Efectos "rollover": JavaScript versus CSS (1)

¡Ah, los "rollovers"! Recuerdo los tiempos en los que era difícil encontrar un manual o tutorial en el que no aparecieran. Por aquellos tiempos se saldaban con un código bastante sencillo, pero luego llegarían las adaptaciones para tal o cual editor web, y las líneas de código se multiplicaron. Volvamos a lo simple, porque en principio sólo hacen falta unos pocos ingredientes. En primer lugar se inicia una Matriz, y se incluye una función (que podemos reutilizar en cualquier otro documento) que se encarga de almacenar todas las imágenes en dicha matriz:

Imagenes = new Array();
 
function Precargar() {
  for (var i=0; i<Precargar.arguments.length; i++) {
    Imagenes[i]=new Image;
    Imagenes[i].src=Precargar.arguments[i];
  }
}

Las siguiente línea invoca a la función anterior, pasando como argumentos los nombres de los archivos de imagen:

Precargar('uno_ac.png', 'uno_in.png', 'dos_ac.png', 'dos_in.png', 'tres_ac.png', 'tres_in.png');

Todo el código anterior se debe ejecutar, como es lógico, en el head. Respecto al código HTML sólo hay que agregar los atributos onmouseover y onmouseout correspondientes, teniendo en cuenta, obviamente, los índices de la matriz que hemos creado anteriormente:

<li>
  <a href="loquesea.html">
    <img src="uno_in.png" width="72" height="24" alt="uno"
     onmouseover="this.src=Imagenes[0].src;"
     onmouseout="this.src=Imagenes[1].src;" />
  </a>
</li>

Tampoco es nada complicado, pero puede serlo menos aún si prescindimos de JavaScript y aprovechamos la pseudo-clase hover de CSS, como se pone en práctica en la segunda prueba. El ejemplo es idéntico, salvo que las imágenes están en otro directorio para poder comparar de forma imparcial, sin almacenamientos en caché de por medio.

Siguiente >>.

I.D.O. originada a partir del mensaje onLoad vs. onFocus publicado en el grupo e.c.i.w.paginas-web.