Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.

View in English Always switch to English

HTMLImageElement : propriété useMap

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨juillet 2015⁩.

La propriété useMap de l'interface HTMLImageElement reflète la valeur de l'attribut HTML usemap, qui est une chaîne de caractères fournissant le nom de la carte d'image côté client à appliquer à l'image.

Valeur

Une chaîne de caractères fournissant l'URL locale à la page (c'est-à-dire une URL qui commence par le symbole dièse, #) de l'élément HTML <map> qui définit la carte d'image à appliquer à l'image.

Vous pouvez en apprendre davantage sur les cartes d'image côté client dans notre article d'apprentissage Ajouter une carte d'image sur une image.

Notes d'utilisation

La valeur de chaîne de caractères de useMap doit être une ancre valide pour un élément HTML <map>. En d'autres termes, cette chaîne doit être la valeur de l'attribut name de l'élément <map> approprié, précédée du symbole dièse.

Considérez un élément <map> qui ressemble à ceci :

html
<map name="mainmenu-map">
  <area
    shape="circle"
    coords="25, 25, 75"
    href="/index.html"
    alt="Retour à la page d'accueil" />
  <area
    shape="rect"
    coords="25, 25, 100, 150"
    href="/index.html"
    alt="Boutique" />
</map>

Étant donné la carte d'image nommée mainmenu-map, l'image qui l'utilise devrait ressembler à ceci :

html
<img src="menubox.png" usemap="#mainmenu-map" />

Pour d'autres exemples (y compris interactifs), voir les articles sur les éléments <map> et <area>, ainsi que le guide d'utilisation des cartes d'image.

Exemples

Exemple interactif

<map name="infographic">
  <area
    shape="poly"
    coords="129,0,260,95,129,138"
    href="https://developer.mozilla.org/docs/Web/HTTP"
    alt="HTTP" />
  <area
    shape="poly"
    coords="260,96,209,249,130,138"
    href="https://developer.mozilla.org/docs/Web/HTML"
    alt="HTML" />
  <area
    shape="poly"
    coords="209,249,49,249,130,139"
    href="https://developer.mozilla.org/docs/Web/JavaScript"
    alt="JavaScript" />
  <area
    shape="poly"
    coords="48,249,0,96,129,138"
    href="https://developer.mozilla.org/docs/Web/API"
    alt="API Web" />
  <area
    shape="poly"
    coords="0,95,128,0,128,137"
    href="https://developer.mozilla.org/docs/Web/CSS"
    alt="CSS" />
</map>
<img
  usemap="#infographic"
  src="/shared-assets/images/examples/mdn-info.png"
  alt="Infographie MDN" />
img {
  display: block;
  margin: 0 auto;
  width: 260px;
  height: 260px;
}

Spécifications

Specification
HTML
# dom-img-usemap

Compatibilité des navigateurs