Efecto MouseOver con imágenes

Con la función OnMouseOver de JavaScript podremos agregar dinamismo a las imágenes de un sitio, ya que permite cambiar una imagen por otra al pasar el mouse por encima de la primera. Son muy utilizados en sitios institucionales, ya que brindan un valor agregado al diseño del sitio web.

Necesitaremos crear dos imágenes por cada opción, una primaria y la otra secundaria (la cual se observará al pasar el mouse por arriba del enlace). En nuestro ejemplo las hemos llamado:

mouseover_off_1.gif: primaria
mouseover_on_1.gif: secundaria

Ejemplo:


(Pasa el puntero del mouse sobre los botones)

Códigos fuente:

Deberemos ubicar el siguiente código JavaScript entre las etiquetas <head> y </head> o en un archivo .js (Ver artículo):

<script language="JavaScript">
<!–
// Comienzo del código
// Especificamos las imágenes primarias

image0 = new Image();
image0.src = "mouseover_off_1.gif";

image1 = new Image();
image1.src = "mouseover_off_2.gif";

image2 = new Image();
image2.src = "mouseover_off_3.gif";

// Fin del código
–>
</script>

Dentro del cuerpo de la página (<body>) ubicaremos los enlaces a las imágenes en donde deseemos:

Enlace 1:

<a href="enlace.htm" onmouseover="image0.src=’mouseover_on_1.gif’;"
onmouseout="image0.src=’mouseover_off_1.gif’;"><img name="image0"
src="mouseover_off_1.gif" border="0" width="119" height="25"></a>

Enlace 2:

<a href="enlace.htm" onmouseover="image1.src=’mouseover_on_2.gif’;"
onmouseout="image1.src=’mouseover_off_2.gif’;"><img name="image1"
src="mouseover_off_2.gif" border="0" width="119" height="25"></a>

Enlace 3:

<a href="enlace.htm" onmouseover="image2.src=’mouseover_on_3.gif’;"
onmouseout="image2.src=’mouseover_off_3.gif’;"><img name="image2"
src="mouseover_off_3.gif" border="0" width="119" height="25"></a>

Se pueden agregar cuantas imágenes queramos, simplemente hay que editar el Javascript e incorporar cada una de ellas de la siguiente manera:

image3 = new Image();
image3.src = "mouseover_off_4.gif";

image4 = new Image();
image4.src = "mouseover_off_5.gif";

Y el código Html:

<a href="enlace.htm" onmouseover="image3.src=’mouseover_on_4.gif’;"
onmouseout="image3.src=’mouseover_off_4.gif’;"><img name="image3"
src="mouseover_off_4.gif" border="0" width="119" height="25"></a>

Deja un comentario

  • Nombree Apellidoss

    hola, si las imagenes están en una base de datos… como logramos que estas cambien de forma correspondiente ? php