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>
...
|
