Alejandro Arco

En el desarrollo web de aplicaciones es muy común usar rollover en las imágenes, por este mismo motivo detallaré posteriormente una forma de realizar rollover CSS en imágenes sin usar javascript.

Para que funcione en Internet Explorer 6 el rollover CSS es necesario que la imagen esté dentro de un enlace, ya que la única etiqueta compatible con este navegador es a:hover.

Actualmente muchos desarrolladores web siguen usando funciones javascript y etiquetas HTML como onload, onmouseover y onmouseout para realizar rollover en imágenes… siendo este método poco accesible, ya que es necesario que el usuario web tenga javascript habilitado.

Ventajas rollover CSS en imágenes

• Compatible con Internet Explorer 6 y 7, y derivados de Mozilla como Firefox.
• Código CSS y HTML más reducido y limpio.
• No es necesario tener javascript habilitado.
• Se cumplen los estándares web de la W3C.
• Se cumplen las pautas de accesibilidad web.

Ejemplo rollover CSS en imágenes

Descarga el ejemplo Rollover CSS en imágenes.

En primer lugar debemos crear un gif transparente y los estados over y out de la imagen que deseamos enlazar para poder realizar el rollover CSS en imágenes.

Posteriormente definimos el estilo CSS del contenedor de la imagen con la imagen de fondo out definiendo además en el las dimensiones de la imagen.

<style type="text/css">
img { border:0; }
#rollover { width:175px; height:27px; background:url(/wp-content/uploads/2009/03/desarrollo-web-off.gif) top left no-repeat; }
#rollover img, #rollover a:hover { width:175px; height:27px; }
#rollover a:hover { position:absolute; background:url(/wp-content/uploads/2009/03/desarrollo-web-on.gif) top left no-repeat; }
</style>

Después agregamos las dimensiones de la imagen a enlazar mediante CSS a la etiqueta img y al propio a:hover para asegurarnos la compatibilidad con algunos navegadores y que el enlace abarque todo el contenedor.

<h1>Ejemplo Rollover CSS en imágenes</h1>
<div id="rollover"><a href="http://www.alejandroarco.es" title="desarrollo web" accesskey="1"><img src="/wp-content/uploads/2009/03/pixel.gif" alt="desarrollo web" /></a></div>

Finalmente, definimos al estilo a:hover que se posicione de forma absoluta respecto al contenedor y le asignamos la imagen de fondo over correspondiente.

Si tenéis alguna duda sobre el funcionamiento del rollover CSS en imágenes sin javascript, no dudéis en dejarme un comentario al respecto.

A continuación muestro algunas de las herramientas online más usadas para validar la accesibilidad web, estos validadores de la accesibilidad web evalúan todos y cada uno de los elementos y páginas que las componen de forma automátizada e informan de si se encuentran errores y qué puntos de verificación de las pautas deben ser revisados manualmente.

Validar Accesibilidad Web Online

• Validador eXaminator
  eXaminator (revisa y evalúa la accesibilidad en la web)
• Validador Hera
  Hera (revisando la accesibilidad con estilo)
• Validador TAW
  TAW (test de accesibilidad web)
• Validador WAVE
  WAVE (validador accesibilidad web - en inglés)

La accesibilidad web se encuentra estrechamente ligada con el cumplimiento de los estándares web de la W3C, de este modo recomiendo validar en un primer momento el cumplimiento de estos estándares (ver artículo Validar XHTML y CSS) y una vez cumplidos pasar a la validación de la accesibilidad web de nuestros sitios.

Fuente: Alejandro Arco