El elemento area y map en HTML

- Andrés Cruz

In english
El elemento area y map en HTML

Ver ejemplo Descargar fuente

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:

altEspecificar un texto alternativo.
coords

Especificar las coordenadas del área; segun la cantidad de parámetros indica una figura distinta: 

  • Tres parámetros (x,y,radio): Especifican las coordenadas del centro de un círculo y su radio.
  • Cuatro parámetros (x1,y1,x2,y2): Especifican las coordenadas para las esquinas izquierda, arriba, derecha e inferior de un rectángulo.
  • Más de cuatro parámetros y que sean pares (x1,y1,x2,y2,..,xn,yn): Especifican las coordenadas de un polígono.
downloadEspecificar un recurso (archivo) para su descarga.
hrefURL.
targetEspecí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:

planetas del sistema solar

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.

Ver ejemplo Descargar fuente

Andrés Cruz

Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz en Udemy

Acepto recibir anuncios de interes sobre este Blog.