Imagen que al pasar el mouse se cambia

El truco es muy simple. Se trata de una imagen que cuando pasas el cursor por encima del mismo, cambiará de imagen inmediatamente. Aquí está el ejemplo:

Cambiar una imagen al pasar por otra

Afortunadamente, este truco lo podemos aplicar a cualquier sector del blog, ya sea en las entradas
o el sidebar. Esto se debe a que el código no es un script, sino un código HTML.
Entonces pegamos el siguiente código en donde quieran:

<a onmouseover="var img=document['fpAnimswapImgFP1'];img.imgRolln=img.src;img.src=img.lowsrc?img.lowsrc:img.getAttribute?img.getAttribute('lowsrc'):img.src;" onmouseout="document['fpAnimswapImgFP1'].src=document['fpAnimswapImgFP1'].imgRolln" href="URL del enlace"><img border="0" src="URL de la 1ra imagen" id="fpAnimswapImgFP1" name="fpAnimswapImgFP1" dynamicanimation="fpAnimswapImgFP1" lowsrc="URL de la 2da imagen" vspace="3"></a>

Lo escrito en verde es para que lo reemplaces por la dirección de la página a enlazar.
Lo escrito en rojo es lo que hay que reemplazar por la URL de la imagen que permanerá
intacto si no pasas el cursor por encima.
Lo marcado en amarillo, se reemplaza por la URL de la imagen que aparecerá al pasar el
cursor.

No hay que olvidarse

Para agregar más de estos códigos en una misma página o blog, se deben hacer los cambios
en el código cada vez que insertes uno: cuando quieras insertar otro código igual, debes cambiar
el número de todas las apariciones de esta pequeña parte del código fpAnimswapImgFP1
a fpAnimswapImgFP2, es decir, cambiamos el número de ese código, por la cantidad de códigos
puestos en el blog. Por ejemplo:
En el primer código puesto por cuarta vez, pondrás en todas las apariciones del código marcado
en violeta, fpAnimswapImgFP4
O en el quinto código puesto por quinta vez, pondrás en todas las apariciones del código marcado
en violeta, fpAnimswapImgFP5.
Y así correlativamente: 1, 2, 3, 4, (...).

Ver video explicativo

Posteado en: Códigos HTML,Enlace,imágenes,Intermedio