Imagen de un enlace con tres iconos, que representan tres estados de una carpeta, a su izquierdaHace unos días, leí un muy buen artículo publicado en Caótico Neutral, donde se explica una interesante técnica para hacer rollovers muy elegante, y que no conocía. Recomiendo leer directamente este artículo, que está muy bien explicado.

A continuación, con permiso del autor, yo tan solo haré una explicación de las ventajas de esta técnica y un resumen.

Un rollover es el acto de cambiar el estado de un enlace cuando el ratón pasa por encima.

Una técnica muy utilizada es la que proporciona Macromedia Dreamweaver en sus librerías en lenguaje Javascript. Para utilizarlas, tan solo había que dibujar los estados del enlace y almacenarlos en archivos diferentes. Luego, mediante las funciones Javascript, se cambiaba una imagen por otra haciendo uso de los eventos de ratón (enlace en inglés) disponibles en HTML/XHTML (enlace en inglés) : onmouseover y onmouseout.

La utilización de esta técnica conlleva los siguientes problemas:

  • Retardo al intercambiar imágenes: Mediante esta técnica, en algunos casos, el agente de usuario (navegador) tarda medio segundo en cambiar la imagen al pasar el ratón por encima del enlace la primera vez que se hace, debido a la precarga.
  • Mayor tiempo de descarga: El agente de usuario ha de descargar tres imágenes en tres solicitudes, ha de descargar las librerías y un archivo HTML o XHTML algo más grande debido al uso de eventos, con su consiguiente retardo.
  • Mantenenimiento más costoso: Si hay que modificar la imagen, hay que acordarse de tocar los tres archivos. Si se cambia un nombre de archivo, hay que modificar el nombre en varios sitios en los eventos del código HTML o XHTML.
  • Es necesario que el agente de usuario, disponga del lenguaje Javascript y lo tenga habilitado.

En la técnica explicada en Caótico Neutral, se dibuja los estados necesarios en un único archivo en lugar de en tres archivos.

Representación del almacenamiento de tres estados en un solo archivo

Se posiciona la imagen en el enlace mediante CSS dejando que se vea tan solo el icono que representa el estado del enlace normal:


a{
padding-left:25px;
background: url(carpetitas.png) no-repeat;
}

Luego, para intercambiar las imágenes y conseguir el efecto deseado, se utilizan las psudo-clases CSS a:link, a:visited, y a:hover. Con ellas, posicionamos el icono que nos interese según el estado:


a:link{
background-position: 0 0;
}

a:visited{
color:#999;
background-position: 0 -20px;
}

a:hover{
background-position: 0 -40px;
}

Comparando esta técnica con la de javascript, sus ventajas son obvias:

  • No hay retardo ya que no hay que intercambiar imágenes de diferentes archivos.
  • Carga más rápida: Solo hay un archivo para la imagen y una solicitud. No hay javascript, solo CSS y no se hace uso de eventos.
  • Mantenimiento menos costoso: solo hay un archivo, y solo habría que tocar un lugar en un CSS.
  • Olvídate de Javascript.

Bonita técnica, ¿verdad? No dejes de visitar el artículo original si quieres ver una explicación más detallada.