Con un pequeño script podemos hacer cambiar una imagen por otra al pasar el cursor sobre ella, esto le agrega mayor dinamismo a nuestro blog. Sólo necesitamos tener dos imágenes del mismo tamaño y este código que les daré a continuación.
Vamos a Diseño > Elementos de la Página > Añadir un gadget > HTML/Javascript y pegamos lo siguiente:
Vamos a Diseño > Elementos de la Página > Añadir un gadget > HTML/Javascript y pegamos lo siguiente:
<script language="JavaScript">
function cambiar (flag,img) {
if (document.images) {
if (document.images[img].permitirloaded) {
if (flag==1) document.images[img].src = document.images[img].permitir.src
else document.images[img].src = document.images[img].permitir.oldsrc
}
}
}
function preloadcambiar (img,adresse) {
if (document.images) {
img.onload = null;
img.permitir = new Image ();
img.permitir.oldsrc = img.src;
img.permitir.src = adresse;
img.permitirloaded = true;
}
}
</script>
<a onmouseover="cambiar(1,'IMG1');" onmouseout="cambiar(0,'IMG1');" href="URL del enlace">
<img border="0" src="URL de la imagen UNO" onload="preloadcambiar(this,'URL de la imagen DOS');" name="IMG1"/></a>
Deben cambiar los datos en rojo por los suyos, guardan los cambios y listo. Tendrán una imagen dinámica sin necesidad de tocar la plantilla. Pueden ver un ejemplo en la foto de mi perfil aquí.
Categories:
Efectos
