Muchas veces tenemos la necesidad de crear un menu con imagenes Rollover y usamos extensos códigos Javascript que solo llenan nuestro archivo HTML innecesariamente, cuando al hacerlo mas simple no solo ayudamos a la carga mas rápida de nuestr archivo HTML, si no que también estaremos generando un código correcto para validarlo por el W3C.
En nuestro código HTML donde se encuentra la ruta de la imagen debemos agregar los eventos Javascript: onMouseOver y OnMouseOut donde indicaremos la ruta de la nueva imagen a cargar cuando coloquemos el cursor encima de la imagen.
Ejemplo:
<img src=”image/index.gif” alt=”Home” width=”84″ height=”27″ border=”0″ onMouseOver=”this.src=’image/index_on.gif’” onMouseOut=”this.src=’image/index.gif’”/>
Donde:
img src=”image/index.gif”
indica la ruta de la imagen original (image/index.gif),
onMouseOver=”this.src=’image/index_on.gif’”
nos indica que la imagen cambiará por la nueva imagen que estamos colocando (image/index_on.gif) cuando coloquemos el cursor encima, y
onMouseOut=”this.src=’image/index.gif’”
nos indica que la imagen volvera a ser la misma (image/index.gif) cuando saquemos el cursor de encima.
