<map> : l'élément de carte d'image
Baseline
Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.
L'élément HTML <map> est utilisé avec des éléments <area> pour définir une carte d'image (une zone de lien cliquable).
Exemple interactif
<map name="infographic">
<area
shape="poly"
coords="130,147,200,107,254,219,130,228"
href="https://developer.mozilla.org/docs/Web/HTML"
alt="HTML" />
<area
shape="poly"
coords="130,147,130,228,6,219,59,107"
href="https://developer.mozilla.org/docs/Web/CSS"
alt="CSS" />
<area
shape="poly"
coords="130,147,200,107,130,4,59,107"
href="https://developer.mozilla.org/docs/Web/JavaScript"
alt="JavaScript" />
</map>
<img
usemap="#infographic"
src="/shared-assets/images/examples/mdn-info2.png"
alt="MDN infographic" />
img {
display: block;
margin: 0 auto;
width: 260px;
height: 232px;
}
Attributs
Cet élément inclut les attributs universels.
name-
L'attribut
namedonne un nom à la carte afin qu'elle puisse être référencée. L'attribut doit être présent et avoir une valeur non vide ne contenant aucun espace. La valeur de l'attributnamene doit pas être identique à celle de l'attributnamed'un autre élément<map>dans le même document. Si l'attributidest également défini, les deux attributs doivent avoir la même valeur.
Exemples
Carte d'image avec deux zones
Cliquez sur le perroquet de gauche pour JavaScript, ou sur le perroquet de droite pour CSS.
HTML
<!-- Photo de Juliana et Mariana Amorim sur Unsplash -->
<map name="primary">
<area
shape="circle"
coords="75,75,75"
href="https://developer.mozilla.org/docs/Web/JavaScript"
target="_blank"
alt="JavaScript" />
<area
shape="circle"
coords="275,75,75"
href="https://developer.mozilla.org/docs/Web/CSS"
target="_blank"
alt="CSS" />
</map>
<img
usemap="#primary"
src="parrots.jpg"
alt="Image 350 x 150 de deux perroquets" />
Résultat
Résumé technique
| Catégories de contenu | Contenu de flux, contenu phrasé, contenu tangible. |
|---|---|
| Contenu autorisé | Tout élément dont le modèle de contenu est transparent. |
| Omission de balises | Aucune, la balise d'ouverture et la balise de fermeture sont obligatoires. |
| Parents autorisés | Tout élément qui accepte du contenu phrasé. |
| Rôle ARIA implicite | Pas de rôle correspondant (angl.) |
| Rôles ARIA autorisés | Aucun role autorisé |
| Interface DOM | HTMLMapElement |
Spécifications
| Specification |
|---|
| HTML # the-map-element |