Animación en javascript

linkzda · #1 (**permalink**) 16/01/2011, 11:41

Hola,

Como puedo realizar algo parecido a lo que se presenta en la página de http://mx.yahoo.com/ en la parte de presentar las fotos de la noticias y al pasar el mouse sobre cada noticia se muestra su foto y una breve descripción.

Gracias.

IsaBelM · #2 (**permalink**) 16/01/2011, 14:01

pregunta en el foro de frameworks. ahí te podrán orientar mejor

rodrigo791 · #3 (**permalink**) 16/01/2011, 14:04

Hola linkzda, creo que podrías hacer algo de eso para empezar un poco mas simple, con eventos.

Código HTML:

Ver original<html>
<head>
<title></title>
</head>
<body>
<table align="center">
<tr>
<td><img name="imagen" src="imagen1.png"></td>
</tr>
</table>
<a href="#" onmouseover="document.imagen.src='imagen1.png'">Primera imagen</a><br /><br /><br />
<a href="#" onmouseover="document.imagen.src='imagen2.png'">Segunda imagen</a><br />
</body>
</html>

Ahí te dejo un ejemplo simple para cuando pases sobre alguno de los links se cambie la imagen.
"onmouseover" es un evento que se ejecuta al pasar el mouse por arriba de el objeto que llama a este evento, o sea, el evento lo llamo cuando pasan por encima de cada link, por eso en cada etiqueta "<a>" pongo "onmouseover="document.imagen.src='imagen1.png ' ">
"document" hace referencia a ese documento, a esa pagina, "imagen" es el nombre que le puse a la imagen cuando pongo "<img name="imagen>" y "src" es la imagen que quiero mostrar.

Mira este ejemplo y probalo con imágenes tuyas para entenderlo y por ahí podes seguir explorando vos también, en este foro o en otro lado.

Suerte que pases bien.