mostrar una segunda imagen al pasar el mauso (cursor ) sobre ella

Con este truco, y teniendo dos imágenes del mismo tamaño, puedes conseguir que al pasar el cursor por encima de ella, se muestre la segunda.

Puedes ver un ejemplo colocando el cursor encima de la imagen del elemento "Configuración" de la sidebar de este blog, o bien en la siguiente imagen:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="URL DEL ENLACE"><img style="display: block;" src="URL DE LA PRIMERA IMAGEN" onmouseover="this.src='URL DE LA SEGUNDA IMAGEN'" onmouseout="this.src='URL DE LA PRIMERA IMAGEN'" /></a>

2. Cambiamos simplemente 2 veces la URL DE LA PRIMERA IMAGEN y una vez URL DE LA SEGUNDA IMAGEN.

1. Colocaremos en el lugar de la entrada o en un Elemento HTML donde queremos conseguir este efecto el siguiente código:

2. Cambiamos simplemente 2 veces la URL DE LA PRIMERA IMAGEN y una vez URL DE LA SEGUNDA IMAGEN.

Además, si queremos que al pinchar en la imagen, esta te dirija a algun sitio, cambiamos URL DEL ENLACE por la dirección deseada. Si queremos que la imagen no dirija a ningun sitio, simplemente eliminamos esta parte:href="URL DEL