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 | Añadir un gadget | HTML/Javascript y pegamos lo siguiente:
<script>
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>
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>
No hay comentarios:
Publicar un comentario