Efecto onMouseOver

Si queremos usar los efectos de onMouseOver en una pagina, un buen método es cargar primero las imágenes que se van a mostrar con los eventos. Tenemos dos métodos para hacer esto.

Solo tienes que sustituir las zonas verdes con el apropiado nombre de tus imágenes.

Primer método

En este caso, las imágenes se almacenan en una matriz (array).

<Script>
var lista = new Array ("unoA.gif","dosA.gif","tresA.gif","cuatroA.gif";
var imgs = new Array();
var count;
if (document.images){
   for (count=0; count<lista.length; count++){
      imgs[count] = new Image(); 
      imgs[count].src=lista[count];
   }
}
function prende1(num) {
   if (document.images) {
      document[imageName].src = eval(imgs[num] + ".src");
   }
   function apaga1(num) {
      if (document.images) {
         document[imageName].src = eval(imgs[num] + ".src");
      }
   }
}
</Script>

Ejemplo 1

<A HREF=pagina.htm
onMouseOver="prende1('imagen1')"
onMouseOut="apaga1('imagen1')">
<IMG SRC=imagen.gif NAME=imagen1></A>

...

Segundo método

En este ejemplo cargaremos las imágenes en variables independientes, un juego para on y otro para off.

<Script>
imagen1on = new Image(); 
imagen1on.src = "unoA.gif";
imagen2on = new Image(); 
imagen2on.src = "dosA.gif";
imagen3on = new Image(); 
imagen3on.src = "tresA.gif";
imagen4on = new Image(); 
imagen4on.src = "cuatroA.gif";
imagen1off = new Image(); 
imagen1off.src = "unoB.gif";
imagen2off = new Image(); 
imagen2off.src = "dosB.gif";
imagen3off = new Image(); 
imagen3off.src = "tresB.gif";
imagen4off = new Image(); 
imagen4off.src = "cuatroB.gif";

function prende2(imageName) {
   if (document.images) {
      document[imageName].src = eval(imageName + "on.src");
   }
}
function apaga2(imageName) {
   if (document.images) {
      document[imageName].src = eval(imageName + "off.src");
   }
}
</Script>

Y a continuación el código HTML que deberemos usar en nuestra página para poder llamar a la función.

Ejemplo 2

<A HREF=pagina.htm
onMouseOver="prende2('imagen1')"
onMouseOut="apaga2('imagen1')">
<IMG SRC=unoB.gif NAME=imagen1;</A>