18. Mapas

En HTML se pueden tener imágenes, asociando un URL a una cierta parte de la misma: imágenes mapeadas o mapas.
Para confeccionar un mapa es necesario crear la imagen al tamaño de visualización y delimitir cada una de las diferentes zonas deseadas. Para delimitar una zona se realizará en forma de círculo, rectángulo o polígono. Las coordenadas que forman cualquiera de las formas mencionadas vendrán expresadas en pixels de imagen: la parte superior izquierda de la imagen corresponde con el origen de coordenadas, mientras que la parte inferior-derecha corresponde con la coordenada más alta de la imagen.

Existen dos técnicas para confeccionar un mapa:

Mapas gestionados por el servidor
El servidor se encarga de hacer la correspondencia de coordenadas del ratón con el URL. Para ello, es necesario la utilización de un programa CGI que se ejecuta en el servidor más unos ficheros de definición de zonas. Es el método más antiguo.
Mapas gestionados por el cliente
En la versión 3 de HTML, se definen los mapas gestionados por el cliente. Ya no necesitamos un programa CGI externo, pues las definiciones de las zonas se especifican en la propia página. El cliente será el encargado de hacer la correspondencia entre las coordenadas del ratón y el URL. En este capítulo, mostraremos como especificar un mapa gestionado por el cliente
Para especificar un mapa deberemos realizar dos tareas: definición de las zonas e inserción de la imagen.

Directiva MAP: definición de las zonas.

Para la definición de las zonas del mapa se utilizará la directiva MAP con el atributo NAME para indicar el nombre del mapa:

<MAP NAME="nombre">
...
</MAP>

En medio especificaremos cada una de las zonas de la imagen. Para lo cual se utilizará una directiva AREA para cada zona. Los atributos a especificar en la directiva AREA son:

SHAPE
Es la forma de la zona. Los valores que admite son: RECT, POLYGON, CIRCLE o DEFAULT para el resto de la imagen que no haya sido incluida dentro de una zona.
COORDS
Indicaremos las coordenadas de la zona; dependiendo de la forma:

RECT
Las coordenadas de los vértices superior-izquierda e inferior-derecha ("X0,Y0,X1,Y1").
POLYGON
Las coordenadas de cada uno de los vértices del polígono ("X0,Y0,X1,Y1,X2,Y2,...,Xn,Yn").
CIRCLE
La coordenada del centro del círculo y su radio ("X,Y,r").

HREF o NOHREF
Indicaremos el URL (HREF) o nada (NOHREF).

Atributo USEMAP: Inserción de un mapa

Una vez hemos definido las zonas del mapa, ya podemos hacer referencia a su nombre. Para ello, utilizaremos el atributo USEMAP dentro de la directiva IMG:

<IMG SRC="nombre_imagen" USEMAP="#nombre_del_mapa">

Ejemplo

Hemos construido una imagen con tres zonas:

  1. Escudo ETSII: La zona definida es un círculo y el URL, la página inicial de la ETSII.
  2. Escudo UVA: La zona definida es el rectángulo que le engloba y el URL, la página inicial de la Universidad de Valladolid.
  3. Lápiz: La zona definida es el rectángulo que lo engloba y el URL, el índice de esta guía.

<IMG SRC="mapa_ejemplo.gif" USEMAP="#ejemplo">
<MAP NAME="ejemplo">
<AREA SHAPE=CIRCLE COORDS="67,58,53" HREF="http://www.eis.uva.es">
<AREA SHAPE=RECT COORDS="140,0,256,112" HREF="http://www.uva.es">
<AREA SHAPE=RECT COORDS="113,116,148,147" HREF="introHTML.html#indice">
<AREA SHAPE=DEFAULT NOHREF>
</MAP>

Se visualizará:

[Up]Indice
[Prev]Paneles (Frames)