La etiqueta <area> es un elemento que depende de la etiqueta <map>, con estas dos etiquetas podemos dividir una imagen en secciones o áreas y cada área puede ser un enlace o link.
Con la etiqueta <map> creamos un mapa de imagen y con la etiqueta <area> creamos las divisiones dentro del mapa de imagen.
Las divisiones creadas con la etiqueta <area> pueden tomar forma de figuras geométricas, esto se define a traves del atributo shape y para indicar su posición se utiliza el atributo coords.
El atributo shape puede tener 4 valores:
default: Toda la imagen.
rect: Rectángulo.
circle: Círculo.
poly: Polígono personalizado.
Los valores del atributo coords dependen del shape:
default: No aplica.
rect: Se indican la coordenadas de dos esquinas opuestas.
circle: Se indican la coordenadas del centro y el radio.
poly: Se indican n coordenadas, cada úna haciendo referencia a un vértice el polígono.
Ejemplo de uso:
La siguiente imagen está dividida en 3 áreas, un circulo, un cuadrado y un polígono, si intentas hace clic en las zonas blancas verás que no se puede, pero si das clic en alguna zona de color te enviará a otra página.
<img src="/imagenes/etiqueta-area/figuras.jpg" usemap="#mapa">
<map name="mapa">
<area href="/etiqueta-area-circulo.html" shape="circle" coords="50,50,40">
<area href="/etiqueta-area-cuadrado.html" shape="rect" coords="110,10, 190,90">
<area href="/etiqueta-area-poligono.html" shape="poly" coords="210,10, 250,10, 250,40, 280,10, 280,90, 240,90, 210,60">
</map>La primer área (círculo) tiene las siguientes propiedades:
shape="circle" coords="50,50,40"
En el atributo coords los primeros dos números indícan las coordenadas del centro del cículo (x,y) (50,50), el número 40 es el tamaño del radio.
La segunda área (cuadrado) tiene las siguientes propiedades:
shape="rect" coords="110,10, 190,90"
En el atributo coords los primeros dos números indícan las coordenadas de la esquina superior izquierda (110,10) y los siguientes 2 (190,90) las coordenadas de la esquina inferior derecha.
La tercer área (polígono) tiene las siguientes propiedades:
shape="poly" coords="210,10, 250,10, 250,40, 280,10, 280,90, 240,90, 210,60"
Al igual que el cuadrado, cada par de número representa unas coordenadas, en este caso lass coordenadas de cada uno de los vértices de la figura (210,10) (250,10) (250,40) (280,10) (280,90) (240,90) (210,60)
Todas las coordenadas se indican en formato (x,y) es decir el primer número es la posición del eje x y el segúndo el eje y.