HTML - Imágenes activas o Image Maps

Image Maps

Las imágenes activas (image maps, denominadas mapas o imágenes ‘clickables’, son gráficos en los que se ha definido una asociación entre zonas de la imagen y URLs, de forma que cuando se pulsa sobre una de estas zonas se activa la URL correspondiente.

Con los mapas se pueden construir complejas relaciones entre imágenes y datos, que serían difíciles de realizar con enlaces de texto.

Cuando se pulsa con el ratón sobre una imagen activa, el browser envía a un servidor HTTP las coordenadas del punto seleccionado. Este servidor resolverá el enlace que se debe activar, en función de la zona pulsada, y devolverá al cliente la URL correspondiente. En este momento, el browser utiliza esta URL para conectarse con la referencia de destino.

Consideraciones

Para poder utilizar imágenes activas, el cliente debe saber tratarlas, es decir, que sepa qué hacer ante la pulsación del ratón sobre un mapa. La mayoría de los browsers modernos lo permiten.

Que el servidor HTTP sea capaz de trasladar la información del punto de activación en su enlace correspondiente. Dependiendo del tipo de servidor, esto puede ser más o menos sencillo.

La imagen que sirve de base al mapa puede tener cualquier formato, pero la mejor opción es GIF, ya que es uno de los más soportados. Es importante complementar la imagen activa, siempre que sea posible, con un conjunto equivalente de enlaces en modo texto, para usuarios que, por las características de su browser o la velocidad de su conexión a Internet, no utilizan gráficos.

Definir el mapa activo

Las formas geométricas se describen a partir de sus coordenadas en píxel referidas a la esquina superior izquierda de la imagen activa.

El código de zonas es interpretado secuencialmente. Por eso, si existen definiciones solapadas, se activará la URL que primero aparezca en el fichero.

Por último, se identifica el formato de la URL que activará el mapa, que de nuevo dependerá del tipo de servidor. Esa URL incluye, de una u otra forma, el nombre del fichero con la definición de zonas activas.

El mecanismo es sencillo: consiste en incluir dentro del documento HTML la descripción de las secciones activas de una imagen. El browser utiliza el contenido de este mapa para resolver la URL a activar, sin necesidad de enviar las coordenadas al servidor para su resolución.

Para crear un mapa de este tipo, se añade a la etiqueta <IMG> el atributo USEMAP="#nombre de mapa", siendo el mapa una estructura que se crea con la etiqueta <MAP>…</MAP>. El nombre de mapa se comporta como las metas dentro de un documento, creadas con <A NAME=>, por lo que se puede hacer referencia a un mapa que está definido en otro documento.

Simbología

<MAP>… </MAP> Crea un mapa de descripción de zonas activas en una imagen.
NAME= Nombre que se asigna al mapa, con el cual una imagen podrá hacerlo referencia.
<AREA> Define una sección activa del mapa. Debe estar siempre dentro de la etiqueta <MAP>.
SHAPE= Forma del área activa a definir. Puede ser:
RECT: se incluyen las coordenadas de las esquinas superior izquierda e inferior derecha.
CIRCLE: se crea con las coordenadas del centro y la longitud del radio.
POLIGON: Se deben especificar las coordenadas de los vértices consecutivos.
Default: sección que se activará cuando el punto seleccionado no esté incluido en ninguna zona activa.
COORDS="…" Coordenadas necesarias para la forma elegida; es una secuencia de números (medidas en píxel separados por comas. El borde superior izquierdo se corresponde a 0,0.
HREF="…" URL que activará esta zona.