Balise HTML <map>

Définition et utilisation

<map> balise pour définir la carte image. La carte image (image map, une sorte de carte de navigation sectorielle) est une image avec des zones cliquables.

<map> l'élément nécessite une l'attribut name, cette propriété correspond à l'élément <img> de Attribut usemap associés, créant un lien entre l'image et la carte.

<map> contient quelques Élément <area>，définissant les zones cliquables de la carte image.

Veuillez également consulter :

Guide HTML DOM :Objet Map

Instance

Exemple 1

Carte image avec des zones cliquables :

<img src="life.png" alt="Life" usemap="#lifemap" width="650" height="451">
<map name="lifemap">
  <area shape="rect" coords="10,208,155,338" alt="AirPods" href="airpods.html">
  <area shape="rect" coords="214,65,364,365" alt="iPhone" href="iphone.html">
  <area shape="circle" coords="570,291,75" alt="Coffee" href="coffee.html">
</map>

Essayez-le vous-même

Exemple 2

Une autre carte image avec des zones cliquables :

<img src="solarsystem.png" width="1024" height="576" alt="Planets" usemap="#planetmap">
<map name="planetmap">
  <area shape="rect" coords="0,0,114,576" alt="Sun" href="sun.html">
  <area shape="circle" coords="190,230,5" alt="Mercury" href="mercury.html">
  <area shape="circle" coords="228,230,5" alt="Vénus" href="venus.html">
</map>

Essayez-le vous-même

Attribut

Attribut Valeur Description
name Nom de la carte Obligatoire. Définit le nom de la carte d'image.

Attributs globaux

<map> La balise prend également en charge Attributs globaux dans HTML.

Attributs événement

<map> La balise prend également en charge Attributs événement dans HTML.

Réglages CSS par défaut

La plupart des navigateurs affichent les valeurs par défaut suivantes : <map> Élément :

map {
  display: inline;
}

Compatibilité avec les navigateurs

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support