<map>
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> afin de définir une image cliquable divisée en régions.
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
Comme tous les autres éléments HTML, cet élément inclut les attributs universels.
name-
Cet attribut fournit un nom afin que la carte cliquable puisse être référencée. Cet attribut est obligatoire et sa valeur doit être une chaîne de caractères non-vide qui ne contient pas de blancs. La valeur de cet attribut doit être unique pour tous les éléments
<map>du document. Si l'attribut universelidest utilisé,namedevra avoir la même valeur que celui-ci.
Exemples
HTML
<map name="primary">
<area shape="circle" coords="75,75,75" href="left.html" />
<area shape="circle" coords="275,75,75" href="right.html" />
</map>
<img
usemap="#primary"
src="https://via.placeholder.com/350x150"
alt="350 x 150 pic" />
Résultat
Résultat attendu
L'exemple précédent devrait faire apparaître des images semblables (en utilisant la touche tab de votre clavier) :
Pour le lien left.html :
Pour le lien right.html :
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ôles ARIA autorisés | Aucun. |
| Interface DOM | HTMLMapElement |
Spécifications
| Specification |
|---|
| HTML # the-map-element |
Compatibilité des navigateurs
Chargement…