Enlaces con efectos (animaciones)

Hace años, la web era un cúmulo de GIFS animados, ahora, se han transformado en algo que los desarrolladores eluden como si se tratara de la peste negra.

Como cualquier otra herramienta, los GIFS no tienen nada de malo ni nada bueno, todo dependerá de lo que hagamos con ellos. En este caso, vamos a ver cómo podemos usarlos para darle un poco de vida a los enlaces. Para esto, necesitamos tener dos imágenes, una fija y una animada.

El enlace podría tener este código:

<a href="direccion_URL" 
   onmouseout="getElementById('nombreUnico').src='URL_imagen_FIJA';" 
   onmouseover="getElementById('nombreUnico').src='URL_imagen_ANIMADA';">
   <img id="nombreUnico" src="URL_imagen_FIJA"/>
</a>

Como siempre, escribimos todo en una sola línea y tenemos la precaución de darle al ID un nombre único, no repetido.

La imagen fija se mostrará como la imagen por defecto; cuando el puntero del ratón pase sobre el enlace (onmouseover), el script cambiará la dirección de esta y se mostrará la imagen animada. Cuando el puntero del ratón salga de encima del enlace (onmouseout), el script volverá a cambiar la dirección y mostrará la imagen fija.

Debido a que la única imagen cargada es la imagen fija y la imagen animada sólo se carga cuando se ejecuta el evento onmouseover, el efecto puede ser poco evidente ya que se producirá un retardo; habrá un momento en que no veamos nada. Esto, lo resolvemos utilizando JavaScript y "precargando" las imágenes animadas antes, por ejemplo, agregando a la plantilla, justo antes de </head> lo siguiente:

<script type='text/javascript'>
   var animPic=new Array();
   animPic[0]=new Image(ancho0,alto0);
   animPic[0].src="URL_imagen_0";
   animPic[1]=new Image(ancho1,alto1);
   animPic[1].src="URL_imagen_1";
   .............
   animPic[N]=new Image(anchoN,altoN);
   animPic[N].src="URL_imagen_N";
</script>

Donde animPic[] es un nombre cualquiera y, entre corchetes, comenzando con 0 (cero) vamos agregando, sucesivamente, todas las imágenes que queremos precargar, indicando la dirección URL de cada una y reemplazando alto y ancho por los valores correspondientes, expresados en pixeles.

Otra posibilidad es usar estas animaciones como fondos de un elemento. En ese caso, no sólo deberemos tener dos imágenes sino establecer dos clases CSS. Por ejemplo:

<style type="text/css">
.ejemplo-icono-fijo { /* la clase de la imagen fija */
   width: anchopx;
   height: altopx;
   background:transparent url(URLimagenFija) no-repeat scroll left top;
}
.ejemplo-icono-animado { /* la clase de la imagen animada */
   width: anchopx;
   height: altopx;
   background:transparent url(URLimagenAnimada) no-repeat scroll left top;
}
</style>

Esto, lo podemos usar así:

<span class="ejemplo-icono-fijo" 
   onmouseout="this.className="ejemplo-icono-fijo";" 
   onmouseover="this.className='ejemplo-icono-animado';">
   ...................
</span>

O como fondo de cualquier enlace o etiqueta.