onmouseover="this.src='01.png';" Cuando uno se posa encima de la imagen
onmouseout="this.src='00.png';" Cuando se Aleja el mouse
Con esta simple estructura que se agregara a la etiqueta <img> se logra el tan querido efecto hover, no olvidemos 2 cosas:
1. Después del evento debe ir la sintaxis: this.src='URL'
2. La idea es volver al estado inicial y esto no lo hace automaticamente por lo que es bueno agregar el evento onmouseout
No quiere decir que sean los únicos atributos que se puede usar ya que hay bastantes como experimentar.
ondblclick="this.src='04.png';" Cuando se hace doble clic a la imagen
onclick="this.src='03.png';" Cuando se hace clic
onmousedown="this.src='02.png';" Cuando se hace click a la imagen
Para poder ver un ejemplo en funcionamiento les regalo el código, que utilice para emplear este evento.
<img src="http://midominio.co/imagenes/imagen-boton.png"
onmouseover="this.src='http://midominio.co/imagenes/imagen-boton-hover.png';" onmouseout="this.src='http://midominio.co/imagenes/imagen-boton.png';"
height="120" width="160" style="display: block; margin-left: auto; margin-right: auto; padding-top: 10px;"/>
onclick="this.src='03.png';" Cuando se hace clic
onmousedown="this.src='02.png';" Cuando se hace click a la imagen
Para poder ver un ejemplo en funcionamiento les regalo el código, que utilice para emplear este evento.
<img src="http://midominio.co/imagenes/imagen-boton.png"
onmouseover="this.src='http://midominio.co/imagenes/imagen-boton-hover.png';" onmouseout="this.src='http://midominio.co/imagenes/imagen-boton.png';"
height="120" width="160" style="display: block; margin-left: auto; margin-right: auto; padding-top: 10px;"/>
Este tipo de sustitución de imágenes, lograrlas con css o algún lenguaje frontend (jquery en mi caso) es la mejor opción, ya que el cambio lo podemos hacer dinamicamente, sin embargo, en caso de que estemos limitados a no poder hacer uso de archivos externos o scripts, puede ser la mejor opción. Un ejemplo concreto puede ser en Aulas Virtuales como Moodle, donde los docentes editores estan limitados, de esta forma con solo estudiar un poco el código anterior, en la opción de edición "html" pueden crear efectos "hover" muy sencillos.
