El elemento<area>HTML define un área dentro de un mapa de imagen que tiene áreas cliqueables predefinidas. Un mapa de imágen permite que áreas geométricas en una imagen sean asociadas con unhipervínculo.

Este elemento solo es usado dentro de un elemento<map>.

Pruébalo

<map name="infographic">  <area    shape="poly"    coords="129,0,260,95,129,138"    href="https://developer.mozilla.org/docs/Web/HTTP"    alt="HTTP" />  <area    shape="poly"    coords="260,96,209,249,130,138"    href="https://developer.mozilla.org/docs/Web/HTML"    alt="HTML" />  <area    shape="poly"    coords="209,249,49,249,130,139"    href="https://developer.mozilla.org/docs/Web/JavaScript"    alt="JavaScript" />  <area    shape="poly"    coords="48,249,0,96,129,138"    href="https://developer.mozilla.org/docs/Web/API"    alt="Web APIs" />  <area    shape="poly"    coords="0,95,128,0,128,137"    href="https://developer.mozilla.org/docs/Web/CSS"    alt="CSS" /></map><img  usemap="#infographic"  src="/shared-assets/images/examples/mdn-info.png"  alt="MDN infographic" />

img {  display: block;  margin: 0 auto;  width: 260px;  height: 260px;}

Atributos

Los atributos de este elemento incluyen losatributos globales.

alt

Una línea de texto alternativo que se muestra en los navegadores o en lectores de pantalla, si no se muestra la imagen.El texto debe ser redactado de modo que el usuario tenga el mismo tipo de elección a si la imagen fuese mostrada sin el texto alternativo.Este atributo solo es requerido si se usa el atributohref.

coords

El atributocoords detalla las coordenadas del atributoshape en tamaño, forma, y posicionamiento del<area>.Este atributo debe ser usado si el atributoshape está establecido endefault.

• rect: el valor esx1,y1,x2,y2.El valor especifica las coordenadas de la esquina superior izquierda y de la esquina inferior derecha del rectangulo.Por ejemplo, en<area shape="rect" coords="0,0,253,27" href="#" alt="Mozilla"> las coordinadas son0,0 y253,27, indicando las esquinas superior izquierda e inferior derecha del rectángulo, respectivamente.
• circle: el valor esx,y,radius. Este valor especifica las coordenadas del centro del círculo y el radio del mismo.Por ejemplo:<area shape="circle" coords="130,136,60" href="#" alt="MDN">
• poly: el valor esx1,y1,x2,y2,..,xn,yn. Este valor especifica las coordenadas de los bordes de el polígono.Si los primeros y últimos pares de coordenadas no son los mismos, el navegador añadirá el último par de coordenadas para cerrar el polígono.Los valores son numeros de píxeles de CSS.

download

Este atributo indica que el autor pretende que el hipervínculo sea usado para descargar un recurso.Véase<a> para una descripción completa del atributodownload.

href

Se utiliza para incluir un hipervínculo para el área.Su valor debe ser un URL valido.Este atributo puede ser omitido, si es así, el elemento<area> no representará un hipervínculo.

ping

Contiene una lista de URLs separada por espacios a las que, cuando se sigue el hipervínculo, el navegador enviará solicitudesPOST con el cuerpoPING (en segundo plano).Típicamente utlizado para el rastreo.

referrerpolicy

Indica que referente será utilizado cuando se recoja el recurso:

• no-referrer: La cabeceraReferer no sera enviada.
• no-referrer-when-downgrade: La cabeceraReferer no sera enviada aorigin sinTLS (HTTPS).
• origin: El referente enviado será limitado al origen de la página de referencia: suesquema,host, ypuerto.
• origin-when-cross-origin: El referente enviado será limitado al esquema,host y el puerto. Las navegaciones del mismo origen seran aun incluidas en la ruta.
• same-origin: Un referente será enviado para elmismo origen, Sin embargo, las solicitudes de origen cruzado no contendrán información de referencia.
• strict-origin: Solo envía el origen del documento como referente cuando el nivel del protocolo de seguridad se mantiene igual (HTTPS→HTTPS), pero no lo envía si el destino es menos seguro, como un HTTP.
• strict-origin-when-cross-origin (predeterminado): Envia un URL completo cuando se realiza una solicitud del mismo origen, Solo envía el origen cuando el protocolo de seguridad es el mismo (HTTPS→HTTP) y no envía ninguna cabecera a un destino menos seguro (HTTPS → HTTP).
• unsafe-url: El referente incluira el origen y ruta (pero nofragment,password, ousername).Este valor es inseguro, ya que filtra los origenes y las rutas de acceso a los recursos protegidos TLS.

rel

Para anclas que contengan el atributohref, este atributo especifica la relación entre el destino del enlace con el del objeto del enlace.El valor es una lista de tipos de enlaces separados por espacios.Los valores y su semántica serán registrados por alguna autoridad que pueda tener significado para el autor del documento.La relación predeterminada, si no se ha dado ningun otra es nula. Usa solamente el atributo si se está usando un atributohref.

shape

Es la forma asociada al area del mapa. Las especificaciones para HTML definen los valoresrect, define una región en forma rectangular;circle, define la región como una forma circular;poly, la define como un polígono; ydefault, la cual indica toda la región sin ninguna forma específica.

target

Palabra clave o nombre definido por el autor delcontexto de exploración para mostrar el recurso vinculado. Las siguientes palabras clave tienen significados especiales:

• _self (predeterminado): Muestra el recurso en el contexto de navegación actual.
• _blank: Muestra el recurso en un contexto de navegación nuevo y sin nombrar.
• _parent: Muestra el recurso en el contexto de navegación padre del actual.Si no hay un elemento padre, se comporta de igual manera que_self.
• _top: Mestra los recursos en el contexto de navegación mas alto (el contexto de navegacion que es un ancestro del actual y no tiene padre).Si no hay elemento padre, se comporta igual que_self.

Usa este atributo solo si esta presente el atributohref.

Nota:Si se ajustatarget="_blank" en el elemento<area> implicitamente provoca el mismo comportamientorel que si se ocupararel="noopener" que no establecewindow.opener. Véase tambiénCompatibilidad con navegadores.

Ejemplos

<map name="primary">  <area    shape="circle"    coords="75,75,75"    href="left.html"    alt="Clic para ir a la izquierda" />  <area    shape="circle"    coords="275,75,75"    href="right.html"    alt="Clic para ir a la derecha" /></map><img  usemap="#primary"  src="https://via.placeholder.com/350x150"  alt="350 x 150 pic" />

Resultado

Resumen Técnico

Especificaciones

Compatibilidad con navegadores