Blogia
Angel

Menu con imagenes cambiantes con javascript

Se puede hacer de muchas maneras, pero yo usare un script tal que éste:


<script language="JavaScript">

<!--

imagen1=new Image

imagen1.src="1.jpg"

imagen2=new Image

imagen2.src="2.jpg"

-->

</script>

Básicamente llama a dos imágenes.

Y usaré también una tabla con enlaces, y las imágenes:


<table>
  <tr>
    <td><a href="http://angelm.blogia.com/" onMouseOver="document.a.src=imagen2.src" onMouseOut="document.a.src=imagen1.src">Mi Blog</a></td>
    <td><img src="1.jpg" name="a" onMouseOver="document.a.src=imagen2.src" onMouseOut="document.a.src=imagen1.src"/></td>
  </tr>

   <tr>
    <td><a href="http://guerrerosdelaverno.mundoforo.com/index.php" onMouseOver="document.b.src=imagen2.src" onMouseOut="document.b.src=imagen1.src">Mi Foro</a></td>
    <td><img src="1.jpg" name="b" onMouseOver="document.b.src=imagen2.src" onMouseOut="document.b.src=imagen1.src"/></td>
  </tr>

  <tr>
    <td><a href="http://www.fotolog.com/angelmmc" onMouseOver="document.c.src=imagen2.src" onMouseOut="document.c.src=imagen1.src">Mi Fotolog</a></td>
    <td><img src="1.jpg" name="c" onMouseOver="document.c.src=imagen2.src" onMouseOut="document.c.src=imagen1.src"/></td>
  </tr>
</table>

Por supuesto podéis cambiar los enlaces y poner los que queráis.... poned en las imagenes el nombre de vuestras fotos, y con éste código el efecto resultante es que al pasar el ratón tanto por el enlace, como por la foto, ésta cambia, y al quitar el ratón de encima, vuelve a ser la imagen de antes.

Para que funcione hay que poner onMouseOver y onMouseOut en el enlace y la imagen,
y cada evento debe llamarse de manera diferente(aquí uso a, b, c).
Los enlaces no necesitan nombre, pero las imágenes si.
tr son filas, td son las columnas de la tabla.
Si solo colocas onMouseOver la imagen cambia al poner el ratón encima, pero no vuelve a su original.
No creo que haya muchas dudas más, pero si las hay solo tenéis que preguntar ^^ 

0 comentarios