This is the P2PU Archive. If you want the current site, go to www.p2pu.org!
Javascript 1-2-3
My recent threads
You haven't posted any discussions yet.
Recently updated threads
- Reuniones semanales Sun, 2011-03-13 03:33
- Medallas y reconocimiento al aprendizaje Tue, 2011-03-01 16:29
- Dudas de programación Mon, 2011-02-21 01:01
- Efectos de texto Tue, 2011-02-08 16:22
- Problemas subir ñlos archivos Sat, 2011-02-05 22:04
Efectos de texto
Hola David,
Me podrías echar una mano con una duda que tengo o darme alguna sugerencia sobre dónde puedo buscar información?
Estoy haciendo la página de mi empresa y mi jefe me ha pedido que en la página de "about us" cuando el usuario pinche en cada foto, el texto de la derecha cambie y despliegue la información de la persona correspondiente. Te mando una imagen para que te hagas una idea de a lo que me refiero, el de la foto es mi jefe, yo no tengo barba y patillas ;) :D jeje Tengo que cambiar dos de las fotos por la del otro chico que trabaja aquí y por la mía pero, de momento, me podrías echar un cable?
Este es el HTML de esa sección:
<div id="about-us">
<a href="#" title="About Rob"><img id="rob" src="images/rob.png" alt="Rob McDonnell" /></a>
<a href="#" title="About Alan"><img id="al" src="images/al.png" alt="Alan" /></a>
<a href="#" title="About Aurora"><img id="aurora" src="images/aurora.png" alt="Aurora Perez Machio" /></a>
<div id="about-text-rob">
<h4>Rob McDonnell</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam rhoncus aliquet egestas. Nulla iaculis, urna condimentum placerat lobortis, sem libero tempus lectus, ac dapibus sapien magna imperdiet dolor. Pellentesque interdum varius urna id posuere. Maecenas tempor laoreet orci sed commodo. Pellentesque interdum..</p>
</div>
</div>
Muchísimas gracias por tu ayuda. Si quieres usar este ejemplo como ejercicio para la clase por mí no ha problema :D
| Attachment | Size |
|---|---|
| aboutus_screenshot.jpg | 414.95 KB |
Podrías darle un id al
<p>donde va el texto, y luego en javascript, utilizando la función innerHTML, cambiar el texto, algo así:<div id="about-text-rob"><h4>Rob McDonnell</h4>
<p id="info">Lorem ipsum..</p>
</div>
Y tu función javascript:
function changeBio(){document.getElementById('info').innerHTML = 'Rob McDonnel es....';
}
Es una idea solamente, nunca lo he hecho, pero espero que te ayude, o te oriente en al dirección correcta. Saludos.
Efectivamente Aurora, como sugiere Celso, la propiedad innerHTML te sirve, aunque ya no es muy recomendada. De hecho ahora se sugiere la manipulación directa del DOM para estas tareas. Pero como apenas vamos empezando, y para tener lo que te piden a tiempo, igual sí te conviene más. Lo único que tendría que agregar a la información de Celso es que en lugar de agregar el atributo
idal párrafo, emplees el elementodivcompleto, de manera que puedas reemplazar tanto el título de nivel 4 como el párrafo con la descripción. El otro secreto está en usar el atributo especialonclickdel elementoaque rodea a cada imagen y agregar un argumentonombreen la funciónchangeBio(nombre).Si te parece bien, para la semana 4 nos podrías presentar este ejercicio, y, con lo que veamos hasta ese momento, explicarnos cómo se puede realizar la misma tarea modificando el DOM y cuáles son las diferencias. Aquí te dejo una muestra de la solución que sugiere Celso: http://js123.dreamhosters.com/pares/pascalin/semana4/innerhtml.html
Muchísimas gracias a los dos. Ya lo voy mirando con tiempo, intentaré la propiedad innnerHTML o lo que sugieres del atributo onclick, en cuanto lo saque os cuento.
David, tu sugenrecia me parece una idea genial, siempre es bueno utilizar casos prácticos. :D
Muchas gracias chicos!
Quería daros las gracias otra vez por echarme una mano.
Lo siento si mi duda excedía el temario del curso. Nunca he usado JavaScript y no tengo experiecia en programación y después de mirar en un montón de páginas sin conseguir lo que me pedía mi jefe, mi última opción fue consultar en el foro.
Siguiendo la sugerencia Celso y los pasos del archivo al final he conseguido el efecto que buscaba.
Muchas gracias!!! :D
Hola Aurora. Está bien, no te preocupes. Además nos dará la oportunidad de que nos hables de este tema más adelante.
También, esto no se trata de ninguna dictadura, y si los demás piensan que ir introduciendo otros temas de programación les viene bien, sólo tienen que comentarlo aquí o en la sección de "Actividades del curso". Pueden proponer también ejercicios para más adelante e ir pensando en lo que quieren hacer como tarea final del curso, algo que sientan que muestre el nivel de aprendizaje que esperan alcanzar con Javascript en estas semanas.
¡Saludos a todos!