L'élément HTML <map> est utilisé avec des éléments <area> afin de définir une image cliquable divisée en régions.
| 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 |
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
Dans cet exemple, la partie gauche est un lien vers une page et la partie droite est inactive.
HTML
<map name="exemple-map-1"> <area shape="rect" coords="0,0 200,200" href="https://developer.mozilla.org" target="_blank" /> <area shape="default" /> </map> <img usemap="#exemple-map-1" src="https://mdn.mozillademos.org/files/14546/map.png">
Résultat
Spécifications
| Spécification | État | Commentaires |
|---|---|---|
| WHATWG HTML Living Standard La définition de '<map>' dans cette spécification. |
Standard évolutif | |
| HTML5 La définition de '<map>' dans cette spécification. |
Recommendation | |
| HTML 4.01 Specification La définition de '<map>' dans cette spécification. |
Recommendation | Définition initiale. |
Compatibilité des navigateurs
| Fonctionnalité | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Support simple | 1.0 | (Oui) | 1.0 (1.7 ou moins)[1] 5.0 (5.0)[2] 17.0 (17.0)[3] |
(Oui) | 1.0 | 1.0 |
| Fonctionnalité | Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| Support simple | 1.0 | (Oui) | 1.0 (1.0)[1] 5.0 (5.0)[2] 17.0 (17.0)[3] |
(Oui) | 1.0 | 1.0 |
[1][2] À partir de Gecko 5.0 (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2), les cartes vides ne sont plus ignorées en faveur des cartes non-vides en mode quirks. Ainsi, avec le code suivant :
<map></map> <map> <area shape="rect" coords="25,25,75,75" href="#fail"> </map> <img usemap="#a" src="image.png">
Avant Gecko 5.0, l'élément <img> aurait été rattaché à la seconde <map>, désormais il est rattaché à la première, même si elle est vide.
[3] À partir de Firefox 17, la mise en forme par défaut de <map> est display: inline; et plus display: block;. Cela correpsond au comportement des autres navigateurs et à celui déjà utilisé en mode quirks.