<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 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="#" target="_blank" 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="#" target="_blank" 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á solicitudes
POST
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 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 atributohref
. 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; ydefault
, 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 comportamientorel
que si se ocupararel="noopener"
que no establecewindow.opener
. Véase también Compatibilidad 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
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