<area>: El elemento área de un mapa de imagen

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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 un hipervínculo.

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

Pruébalo

Atributos

Los atributos de este elemento incluyen los atributos 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 atributo href.

coords

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

  • rect: el valor es x1,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="#" target="_blank" alt="Mozilla"> las coordinadas son 0,0 y 253,27, indicando las esquinas superior izquierda e inferior derecha del rectángulo, respectivamente.
  • circle: el valor es x,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="#" target="_blank" alt="MDN">
  • poly: el valor es x1,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 atributo download.

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á solicitudes POST con el cuerpo PING (en segundo plano). Típicamente utlizado para el rastreo.

referrerpolicy

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

  • no-referrer: La cabecera Referer no sera enviada.
  • no-referrer-when-downgrade: La cabecera Referer no sera enviada a origin sin TLS (HTTPS).
  • origin: El referente enviado será limitado al origen de la página de referencia: su esquema, host, y puerto.
  • 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 el mismo 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 no fragment, password, o username). 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 atributo href, 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 atributo href.

shape

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

target

Palabra clave o nombre definido por el autor del contexto 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 atributo href.

Nota: Si se ajusta target="_blank" en el elemento <area> implicitamente provoca el mismo comportamiento rel que si se ocupara rel="noopener" que no establece window.opener. Véase también Compatibilidad con navegadores.

Ejemplos

html
<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

Categorias de Contenido Contenido de flujo, contenido de redacción.
Contenido Permitido Ninguno, este es un elemento vacío.
Omisión de Etiqueta Debe tener una etiqueta de inicio y no una de final.
Elementos padre permitidos Cualquier elemento que acepte contenido redactable. El elemento <area> debe tener como ancestro un elemento <map>, pero no es necesario que este sea el padre directo.
Rol ARIA implícito link cuando el atributo href esta presente, si no lo esta es generic
Roles de ARIA permitidos No hay role permitidos
Interfaz DOM HTMLAreaElement

Especificaciones

Specification
HTML Standard
# the-area-element

Compatibilidad con navegadores

BCD tables only load in the browser