Cambiar imagen al pasar el cursor por encima de ella

Una imagen que cambia por otra al pasar el cursor sobre ella añade elegancia al blog y a su vez, puede atraer a los lectores. Para realizar el truco, simplemente necesitas dos imágenes y un sólo código.


Puedes ver un ejemplo del truco aquí:

Para agregarlo, bastará con incluir este código en el cuerpo de una entrada o en un gadget HTML/Javascript:

<img src="Url primera imagen" onmouseover="this.src='Url segunda imagen';" onmouseout="this.src='Url primera imagen';"/>

Reemplaza Url primer imagen por la dirección de la imagen que se mostrará por defecto y Url segunda imagen por la dirección de la imagen que se mostrará al pasar el cursor por encima de ella.

Ten en cuenta que al implementarlo en una entrada tendrás que hacerlo desde Edición de HTML y no desde Redactar. También tienes que tener en cuenta que mientras más parecido el tamaño de las imágenes los resultados serán mejor.