Hemos visto que podemos hacer enlaces de texto y de gráficos. Pero también existe otra posibilidad: que dentro de una sola imagen podamos acceder a varios enlaces. Se hace declarando zonas dentro de la imagen (rectángulos, círculos, etc..), siendo cada una de ellas un enlace distinto. Tradicionalmente, siempre han existido dos maneras de hacerlo:
- Mapas gestionados por el cliente (el navegador).
- Mapas gestionados por el servidor.
Los segundos fueron los primeros en desarrollarse y estaban incluidos dentro del estándar HTML 2.0. Sin embargo, nunca hubo una manera común de gestionar esos mapas. Debido a ello, Netscape elaboró un sistema propio que fue incluido en el estándar 3.2: los mapas gestionados por el navegador.
13.1. Mapas gestionados por el cliente
Para utilizarlos necesitaremos dos cosas: declarar el mapa y asignarlo a una imagen. Vamos primero a declarar nuestro mapa:
<MAP NAME="mi_mapa"> <AREA SHAPE=... COORDS=... ALT="Enlace a.."> ... </MAP>
Dentro de la etiqueta MAP sólo podremos definir el nombre del mapa (algo imprescindible, por otra parte). Es dentro de cada elemento AREA donde podremos definir cosas más interesantes:
| Parámetro | Utilidad |
|---|---|
| SHAPE | Define la forma de la zona, que podrá ser rectangular, circular o poligonal. |
| COORDS | Coordenadas (separadas por comas) que definen la zona. El número y significado de esas coordenadas dependerá de la zona. |
| HREF | URL a donde irá el usuario si pulsa sobre esa zona. |
| NOHREF | Especifica que esa zona no tiene asignado enlace alguno. |
| ALT | Texto que se presentará en lugar de la imagen en navegadores no gráficos para acceder al enlace. |
Como podemos ver, para declarar correctamente una zona necesitamos conocer cómo se definen exactamente las formas y coordenadas:
| SHAPE | COORDS | |
|---|---|---|
| Rectangular | RECT | "x1,y1,x2,y2" siendo (x1,y1) la esquina superior izquierda y (x2,y2) la inferior derecha. |
| Circular | CIRC | "x,y,radio" siendo (x,y) el centro del círculo y radio su... eehh.. ¿cómo lo diría yo? ¿Su radio?. |
| Polígono irregular | POLY | "x1,y1,x2,y2,x3,y3,..." definiendo cada pareja (x,y) una esquina del polígono. La última pareja de coordenadas se unirá a la primera para cerrar el polígono. |
| Toda la imagen | DEFAULT | No se indican. |
13.2. Cómo usar un mapa
Ahora que hemos definido un mapa, sólo queda asignarlo a una imagen. Esto se hace del siguiente modo:
<IMG SRC=... USEMAP="#mi_mapa">
Siempre tenemos que añadir al comienzo del nombre de nuestro mapa una almohadilla (#). Vamos a ver un ejemplo:
<MAP NAME="navegadores">
<AREA SHAPE=RECT COORDS="0,0,24,31"
HREF="http://www.netscape.com" ALT="Netscape">
<AREA SHAPE=RECT COORDS="26,0,53,31"
HREF="http://www.microsoft.com" ALT="Microsoft">
<AREA SHAPE=DEFAULT NOHREF ALT="Nada">
</MAP>
<IMG SRC="nav.gif" WIDTH=53 HEIGHT=31 BORDER=0 USEMAP="#navegadores">
Se ve tal que así:
Hay que tener en cuenta que, cuando dos zonas se solapan, la que esté declarada primero es la que tiene preferencia. Por eso declaramos al final una zona que no conduce a ningún URL por si el usuario pulsa con el ratón donde no debe.
 |
 Controles avanzados para formularios | Tablas |
