Élément HTML <map> : l'élément de carte d'image

Baseline Large disponibilité

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).

Dans cet article

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 name donne 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'attribut name ne doit pas être identique à celle de l'attribut name d'un autre élément <map> dans le même document. Si l'attribut id est é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

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" />