Cambiar imagen cuando se pasa el ratón por encima en Blogger

Seguramente te habrás preguntado, cómo cambiar una imagen cuando le pasas el ratón por encima. Pues de hecho, es muy sencillo, y ni siquiera es necesario recurrir al CSS. A continuación verás un ejemplo de cambio de imagen con nuestro logo, pruébalo.


Para lograr este sencillo efecto, basta con un código como el siguiente:

<img onmouseout="this.src='URL de la primer imagen';" onmouseover="this.src='URL de la segunda imagen';" src="URL de la primer imagen" />

Reemplaza lo que está en verde por los enlaces de las imágenes que vas a utilizar.

Pero si no quieres un simple cambio de imagen, sino que quieres que se vea una transición, darle un toque más chevere. También hay una técnica para eso, un poquito más compleja, para ello debemos hacer uso de un DIV y estilos CSS.

Lo primero que hay que hacer es dirigirse a Plantilla » Editar HTML y antes de ]]></b:skin> pegar el siguiente código:

#imagenquecambia1 {
height: alto;
width: ancho;
background: url(URL de la primer imagen) no-repeat;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
}
#imagenquecambia1:hover {
background: url(URL de la segunda imagen) no-repeat;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
}

Cambias alto y ancho por las dimensiones de la imagen (en caso de que tengan diferente tamaño, agregas las dimensiones de la segunda imagen en #imagenquecambia1:hover) y cambias URL de la primer imagen y URL de la segunda imagen por los enlaces correspondientes de cada imagen. También puedes cambiar la duración de la transición sustituyendo 0.5s por el número de segundos que desees.

Por último agregas un DIV con la clase "imagenquecambia1".

<div class="imagenquecambia1"></div>

Y este sería el resultado:

Eso es todo, hasta la próxima.

¿Que te gustaría aprender a hacer en Blogger?