Serie "Guía breve": Mapas de imagen

Consejo 2: Mapas de imagen: Use el elemento map y texto para las zonas activas.

¿Qué son los mapas de imagen? Veamos lo que dice el W3C en el apartado 13.6 Mapas de imagen de la especificación HTML 4.01:

Los mapas de imágenes permiten a los autores especificar regiones en una imagen u objeto y asignar una acción específica a cada región (p.ej., abrir un documento, ejecutar un programa, etc.). Cuando la región es activada por el usuario, se ejecuta la acción.

Un mapa de imágenes se crea asociando un objeto con una especificación de las áreas geométricas sensibles del objeto.

Hay dos tipos de mapas de imágenes:

• En el lado del cliente. Cuando un usuario activa una región de un mapa de imágenes en el lado del cliente con un ratón, las coordenadas en píxeles son interpretadas por el agente de usuario. El agente de usuario selecciona el vínculo especificado por la región activada y lo sigue.
• En el lado del servidor. Cuando un usuario activa una región de un mapa de imágenes en el lado del servidor, las coordenadas en píxeles son enviadas al agente del lado del servidor especificado por el atributo href del elemento A. El agente del servidor interpreta las coordenadas y realiza alguna acción.

Se prefieren los mapas de imágenes en el cliente que los mapas de imágenes en el servidor por dos razones: son accesibles a las personas que utilizan agentes de usuario no gráficos y permiten saber en todo momento si el apuntador está sobre una región activa o no.

Por tanto, se tienen que emplear los mapas de imagen en el lado del cliente para evitar problemas de accesibilidad.

¿Cómo se crea un mapa de imagen en el lado del cliente? Un mapa de imagen en el cliente se define con la etiqueta map y cada una de las zonas activas se define con la etiqueta area. La etiqueta area posee los atributos shape coords (su valor depende del valor de shape), que se emplean para definir la forma geométrica de la zona activa, y el atributo href, que se emplea para indicar la acción asociada:

• shape="default": define la acción por defecto para toda la imagen.
• shape="rect": define una región rectangular; el atributo coords contiene las coordenadas de la esquina superior izquierda y de la esquina inferior derecha del rectángulo.
• shape="circle": define una región circular; el atributo coords contiene las coordenadas del centro del círculo y del radio.
• shape="poly": define una región poligonal; el atributo coords contiene las coordenadas de cada uno de los puntos que forman el polígono; el último punto tiene que coincidir con el primero para que el polígono se cierre.

Para que el mapa de imagen sea accesible, se tiene queproporcionar un texto alternativo con el atributo alt para cada etiqueta area. Como cada zona activa realiza la misma función que un enlace, el texto alternativo tiene que ser eficaz, en especial, el texto alternativo tiene que tener sentido cuando se lea fuera de contexto. Desgraciadamente, la etiqueta area no posee el atributo longdesc para proporcionar una descripción más larga que con el atributo alt.

El siguiente código define un mapa de imagen que contiene tres enlaces:
<img alt="" src="logopp.gif" usemap="#map1" /><map name="map1" id="map1"><area href="http://www.ua.es/en/index.html" shape="rect" coords="342,104,490,134" alt="University of Alicante"><area href="http://www.ua.es/es/index.html" shape="rect" coords="160,104,325,134" alt="Universidad de Alicante"><area href="http://www.ua.es/va/index.html" shape="rect" coords="0,104,145,134" alt="Universitat d'Alacant"></map>Un lector de pantalla que esté preparado para interpretar los mapas de imagen comunicará al usuario el texto alternativo de cada una de las zonas sensibles definidas en el mapa de imagen. Por ejemplo, en la siguiente imagen podemos observar como lo interpreta la herramienta aDesigner de IBM:



Sin embargo, Fangs no lo interpreta correctamente y no muestra nada. El W3C propone el uso de la etiqueta object en vez de la etiqueta img, ya que la etiqueta object permite incluir contenido alternativo que se muestra en el caso de que el agente de usuario (navegador) no pueda mostrar la etiqueta object. El ejemplo anterior con la etiqueta object se escribe:

<object data="logopp.gif" type="image/jpg" usemap="#map1"><map name="map1" id="map1"><p>Navegar por este sitio: <a href="http://www.ua.es/en/index.html" shape="rect" coords="342,104,490,134">University of Alicante</a><a href="http://www.ua.es/es/index.html" shape="rect" coords="160,104,325,134">Universidad de Alicante</a><a href="http://www.ua.es/va/index.html" shape="rect" coords="0,104,145,134">Universitat d'Alacant</a></p></map></object>Con este código Fangs muestra de forma correcta el contenido alternativo como sustituo de la imagen, como podemos ver en la siguiente imagen:


aDesigner también muestra correctamente el contenido alternativo, como podemos ver en la parte derecha de la siguiente imagen, pero desgraciadamente Internet Explorer no es capaz de interpretar correctamente la etiqueta object (muestra unas barras de desplazamiento y el mapa de imagen no funciona), como podemos ver en la parte izquierda:

¿Qué pasa con la etiqueta object en Internet Explorer? Su soporte es muy malo, como podemos leer y ver en las siguientes páginas:

• Object test suite
• Object and Internet Explorer
• Robin's HTML 4.0 Conformance Test: Objects