Cette page a été traduite à partir de l'anglais par la communauté.Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
<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 inclutles attributs universels.
nameCet 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 touchetab de votre clavier) :
Pour le lienleft.html :
Pour le lienright.html :
Résumé technique
| Catégories de contenu | Contenu de flux,contenu phrasé,contenu tangible. |
|---|---|
| Contenu autorisé | Tout élément dontle 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 acceptedu contenu phrasé. |
| Rôles ARIA autorisés | Aucun. |
| Interface DOM | HTMLMapElement |
Spécifications
| Specification |
|---|
| HTML # the-map-element |