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.