Baseline Widely available *
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>
.
<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 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.
<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
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4