El elemento area y map en HTML
26-11-2014 - Andrés Cruz
In englishEste material forma parte de mi curso y libro completo; puedes adquirirlos desde el apartado de libros y/o cursos.
Con el elemento <area>
es posible crear zonas clickeables dentro de una imagen; el elemento <area>
debe de contener elementos hijos llamados <map>
que son los que permite crear las zonas clickeables como tal a través de las coordenadas establecidas en el mismo como atributos; a continuación la tabla de contenido:
1. Atributos del elemento <area>
Los atributos principales para el elemento <area>
son utilizados para:
alt | Especificar un texto alternativo. |
coords | Especificar las coordenadas del área; segun la cantidad de parámetros indica una figura distinta:
|
download | Especificar un recurso (archivo) para su descarga. |
href | URL. |
target | Específica donde abrirá la nueva ventana, referenciada en el atributo href . |
Puedes consultar el resto de ellos en la W3C.
2. Uso del elemento <area> y <map>
Se debe definir una imagen a través de la etiqueta <img>
y posteriormente se definen las zonas clickeables con las coordenadas establecidas como atributo del elemento <area>
, a su vez se le establece a la imagen un atributo usemap
que indique el nombre del <map>
que definiremos posteriormente:
<img src="sistema_solar_planetas.png" width="700" height="300" alt="planetas del sistema solar" usemap="#planetasmap">
Ahora definimos el elemento <map>
cuyos hijos son elementos <area>
, se les establece a cada uno de estos elementos el atributo coords
(coordenadas); para nuestro ejemplo definiremos tantos <area>
con sus coordenadas como planetas albergue el Sistema Solar; además, al elemento <map>
debe de definirse un atributo name
cuyo valor sea el establecido en la imagen a través del atributo usemap
(usemap = name):
<map name="planetasmap">
<area shape="circle" coords="35,224,17" href="#" alt="Mercury">
<area shape="circle" coords="95,220,26" href="#" alt="Venus">
<area shape="circle" coords="165,217,29" href="#" alt="Tierra">
<area shape="circle" coords="241,219,31" href="#" alt="Marte">
<area shape="circle" coords="392,226,66" href="#" alt="Jupiter">
<area shape="circle" coords="512,233,28" href="#" alt="Saturno">
<area shape="circle" coords="600,231,28" href="#" alt="Urano">
<area shape="circle" coords="668,229,28" href="#" alt="Neptuno">
</map>
Posibles usos de los elementos <area> y <map>
Un uso común consiste en referenciar los <area>
a páginas (a través del atributo href
); también se puede referenciar recursos para su descarga (a través del atributo download
):
Clickea los planetas en el siguiente ejemplo:
Puede que resulte un poco complicado el intentar adivinar las coordenadas para obtener la posición exacta que se desee marcar a través de las coordenadas, por suerte hay softwares para la edición de imágenes como Gimp o Photoshop que cuentan con herramientas que indican la posición del cursor sobre la imagen, lo cual resulta en una gran ayuda para lograr obtener las coordenadas.