Rollover con JavaScript

Cuando pasamos el puntero del ratón por una imagen y esta cambia de aspecto invitandonos a pulsarla, le llamamos rollover. Es uno de los efectos más vistosos que podemos incluir en una página web con unas pocas líneas de Javascript.

En la sección body escribimos:

Podemos utilizar la imagen que queramos, en este caso se usarán dos flechas:

 

 

Pulsa en cada una de las flechas con el botón derecho del ratón y elige la opción guardar imagen como … en el mismo directorio donde guardes este script:

Ejecuta y observa el resultado:

Al pasar con el puntero del ratón por encima de la flecha obtenemos:

Prueba a crear un par de iconos con tu editor de imagen favorito que haga la función de encendido y apagado y úsalos en este ejemplo.

---