Reemplace una imagen por otra cuando el apuntador del ratón se mueve sobre ella
Probablemente ya ha visto el reemplazo dinámico de una imagen por otra cuando
el apuntador del ratón pasa sobre ella. Las dos imágenes deben cargarse cuando se carga la página misma, y también debe detectarse el paso del apuntador sobre la
imagen actualmente visualizada. Se efectúa entonces una permutación de la imagen con una parte de código JavaScript insertado
en el lugar adecuado de su página. Inserte el siguiente script entre las etiquetas
<HEAD> y
</HEAD>:
<SCRIPT LANGUAGE="Javascript">
<!-- Swap images
function Permut (flag,img) {
if (document.images) {
if (document.images[img].permloaded) {
if (flag==1) document.images[img].src = document.images[img].perm.src
else document.images[img].src = document.images[img].perm.oldsrc
}
}
}
function preloadPermut (img,adresse) {
if (document.images) {
img.onload = null;
img.perm = new Image ();
img.perm.oldsrc = img.src;
img.perm.src = adresse;
img.permloaded = true;
}
}
// -->
</SCRIPT>
Reemplace entonces la etiqueta
IMG usual por el siguiente código para llamar las imágenes:
<A HREF="index.html" onMouseover="Permut(1,'IMG1');" onMouseout="Permut(0,'IMG1');">
<IMG SRC="Image1" border=0 NAME="IMG1" onLoad="preloadPermut(this,'Image2');" ></A>
donde
index.html es el documento al que apunta la imagen,
Image1 es la imagen visualizada cunado se carga la página, y
Image2 es la imagen reemplazada por Image1 cuando el apuntador del ratón pasa sobre ella.