<area> : l'élément de zone

Exemple interactif

<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;
}

Attributs

Les attributs de cet élément incluent les attributs universels.

alt

Une chaîne de caractères alternative à afficher sur les navigateurs qui n'affichent pas les images. Le texte doit être formulé de sorte qu'il présente à l'utilisateur·ice le même type de choix que l'image lorsqu'elle est affichée sans le texte alternatif. Cet attribut est requis uniquement si l'attribut href est utilisé.

coords

L'attribut coords détaille les coordonnées de l'attribut shape en taille, forme et placement d'un élément <area>. Cet attribut ne doit pas être utilisé si shape est défini sur default.

• rect : la valeur est x1,y1,x2,y2. La valeur définit les coordonnées du coin supérieur gauche et du coin inférieur droit du rectangle. Par exemple, dans <area shape="rect" coords="0,0,253,27" href="#" target="_blank" alt="Mozilla">, les coordonnées sont 0,0 et 253,27, indiquant le coin supérieur gauche et le coin inférieur droit du rectangle, respectivement.
• circle : la valeur est x,y,radius. La valeur définit les coordonnées du centre du cercle et le rayon. Par exemple : <area shape="circle" coords="130,136,60" href="#" target="_blank" alt="MDN">.
• poly : la valeur est x1,y1,x2,y2,..,xn,yn. La valeur définit les coordonnées des bords du polygone. Si la première et la dernière paire de coordonnées ne sont pas les mêmes, le navigateur ajoutera la dernière paire de coordonnées pour fermer le polygone.

Les valeurs sont des nombres de pixels CSS. Notre générateur de formes peut vous aider à générer la syntaxe coords en sélectionnant des points sur une image que vous téléchargez.

download

Cet attribut, s'il est présent, indique que la ressource liée est destinée à être téléchargée plutôt qu'affichée dans le navigateur. Voir l'élément HTML <a> pour une description complète de l'attribut download.

href

La cible du lien hypertexte pour la zone. Sa valeur est une URL valide. Cet attribut peut être omis ; dans ce cas, l'élément <area> ne représente pas un lien hypertexte.

ping

Contient une liste d'URL séparées par des espaces vers lesquelles, lors du suivi du lien, des requêtes POST avec le corps PING seront envoyées par le navigateur (en arrière-plan). Généralement utilisé pour le pistage.

referrerpolicy

Une chaîne de caractères indiquant le référent à utiliser lors de la récupération de la ressource :

• no-referrer : L'en-tête Referer ne sera pas envoyé.
• no-referrer-when-downgrade : L'en-tête Referer ne sera pas envoyé vers des origines sans TLS (HTTPS).
• origin : Le référent envoyé sera limité à l'origine de la page référente : son schéma, host, et port.
• origin-when-cross-origin : Le référent envoyé vers d'autres origines sera limité au schéma, à l'hôte et au port. Les navigations sur la même origine incluront toujours le chemin.
• same-origin : Un référent sera envoyé pour la même origine, mais les requêtes inter-origines ne contiendront aucune information de référent.
• strict-origin : N'envoie l'origine du document comme référent que lorsque le niveau de sécurité du protocole reste le même (HTTPS→HTTPS), mais ne l'envoie pas vers une destination moins sécurisée (HTTPS→HTTP).
• strict-origin-when-cross-origin (par défaut) : Envoie une URL complète lors d'une requête même origine, n'envoie que l'origine lorsque le niveau de sécurité du protocole reste le même (HTTPS→HTTPS), et n'envoie aucun en-tête vers une destination moins sécurisée (HTTPS→HTTP).
• unsafe-url : Le référent envoyé inclura l'origine et le chemin (mais pas le fragment, le mot de passe ou le nom d'utilisateur). Cette valeur n'est pas sûre, car elle divulgue des origines et des chemins de ressources protégées par TLS vers des origines non sécurisées.

rel

Pour les ancres contenant l'attribut href, cet attribut définit la relation de l'objet cible à l'objet du lien. La valeur est une liste de types de liens séparés par des espaces. Les valeurs et leur signification seront enregistrées par une autorité qui pourrait avoir une signification pour l'auteur ou l'autrice du document. La relation par défaut, si aucune autre n'est donnée, est vide. Utilisez cet attribut uniquement si l'attribut href est présent.

shape

La forme de la zone associée. Les spécifications HTML définissent les valeurs rect, qui définit une région rectangulaire ; circle, qui définit une région circulaire ; poly, qui définit un polygone ; et default, qui indique toute la région au-delà des formes définies.

target

Un mot-clé ou un nom défini par l'auteur ou l'autrice du contexte de navigation pour afficher la ressource liée. Les mots-clés suivants ont des significations particulières :

• _self (valeur par défaut) : Affiche la ressource dans le contexte de navigation actuel.
• _blank : Affiche la ressource dans un nouveau contexte de navigation sans nom.
• _parent : Affiche la ressource dans le contexte de navigation parent du contexte actuel, si la page courante est incluse dans un cadre. S'il n'y a pas de parent, agit comme _self.
• _top : Affiche la ressource dans le contexte de navigation le plus haut niveau (c'est-à-dire l'ancêtre du contexte actuel qui n'a pas de parent). S'il n'y a pas de parent, agit comme _self.

Utilisez cet attribut uniquement si l'attribut href est présent.

Note : Définir target="_blank" sur les éléments <area> fournit implicitement le même comportement rel que la définition de rel="noopener" qui ne définit pas window.opener. Voir la compatibilité des navigateurs pour plus d'informations sur la prise en charge.

Exemples

Image avec zones cliquables

<map name="primary">
  <area
    shape="circle"
    coords="75,75,75"
    href="left.html"
    alt="Aller à gauche" />
  <area
    shape="circle"
    coords="275,75,75"
    href="right.html"
    alt="Aller à droite" />
</map>
<img
  usemap="#primary"
  src="https://dummyimage.com/350x150"
  alt="Image 350 x 150" />

Résultat

Résumé technique

Spécifications

Compatibilité des navigateurs