Anteriormente hemos visto que podíamos hacer enlaces tanto con texto como con imágenes. Pero nos hemos reservado para el presente capítulo una tercera posibilidad, llamada MAPAS ACTIVOS, mediante la cual una sola imagen puede contener varios enlaces.
Esto se realiza definiendo áreas de la imagen (rectangulares, circulares,
poligonales, ...), cada una de las cuales contiene un enlace distinto.
Para poder crear un mapa activo necesitamos en primer lugar tener una imagen,
necesitamos también conocer al menos las coordenadas de dos puntos de cada zona
activa (más adelante veremos cómo se hace ) y por último debemos conocer las
etiquetas de definición del mapa (<MAP> </MAP> <AREA>
</AREA>).
<MAP> </MAP> indica al navegador que lo que se encuentra dentro de dicha etiqueta es la definición del mapa.
| ATRIBUTO | FUNCIÓN |
| NAME | Permite especificar el nombre del mapa, que nos permitirá posteriormente asignarlo a una imagen mediante el atributo USEMAP dentro de la etiqueta <IMG SRC>. El uso de NAME es obligatorio y no puede empezar por el carácter almohadilla "#". |
<AREA> Nos permite definir la forma y el tamaño del área activa, así como asignarle el enlace correspondiente.
| ATRIBUTO | FUNCIÓN | |||||||||
| COORDS | Define las coordenadas del área activa. Los valores varían según el tipo definido en SHAPE. | |||||||||
| SHAPE | Tiene como función definir
la forma que tendrá el área activa. Sus valores pueden ser: |
|||||||||
|
||||||||||
| HREF | Define el documento que se cargará al hacer clic sobre el área activa. | |||||||||
| NOREF | Indica que el área no es activa, es decir, no hay ningún enlace asociado a ella. | |||||||||
| ALT | Texto que aparecerá en lugar de la imagen en navegadores no gráficos. |
Para definir un mapa de imágenes usaremos la etiqueta <map> cuya finalidad es darle un nombre al mapa que vamos a utilizar, el nombre del mapa lo intrduciremos con el atributo name.
Entre la etiqueta de apertura, <map>, y cierre, </map>, insertaremos tantas etiquetas <area> como zonas activas queramos definir, utilizaremos los atributos href, shape y coords para indicar, respectivamente, el documento a cargar, el tipo de área y las coordenadas de la misma.Éste elemento es un elemento vacío por lo que no necesita etiqueta de cierre.
Para finalizar en la etiqueta <img>usaremos el atributo usemap, que indica que la imagen es un mapa de imágenes de cliente, cuyo valor será el nombre del mapa establecido en la etiqueta <map>, precedido del carácter #.
<map name="mapa">
<area href="frame1.htm" shape="rect" coords="158, 56, 275, 86" alt="área rectangular">
<area href="frame2.htm" shape="circle" coords="217, 152, 23" alt="área circular">
<area href="frame3.htm" shape="poly" coords="115, 62, 160, 143, 124, 152, 78, 137" alt="área poligonal">
</map>
<img src="../../images/imagen.jpg" alt="Mapa activo" HEIGHT="234" usemap="#mapa" WIDTH="309">