Attribut usemap de l'élément HTML <img>

Balise HTML <img>

Définition et utilisation

usemap Cet attribut définit l'image comme une carte d'image client.

Une carte d'image est une image avec des zones cliquables.

usemap Propriétés en relation avec Élément <map> liée à l'attribut name ou id pour établir une relation entre <img> et <map>.

Attention :Ne pas utiliser si l'élément <img> est un descendant de l'élément <a> ou <button>. usemap Propriétés.

Lecture recommandée : Explication détaillée de l'attribut usemap

Exemple

Carte d'image avec zone cliquable :

<img src="life.png" alt="Vie" usemap="#lifemap" width="650" height="451">
<map name="lifemap">
  <area shape="rect" coords="10,208,155,338" alt="Ordinateur" href="airpods.html">
  <area shape="rect" coords="214,65,364,365" alt="Téléphone" href="iphone.html">
  <area shape="circle" coords="570,291,75" alt="Tasse de café" href="coffee.html">
</map>

Essayez-le vous-même

Syntaxe

<img usemap="#mapname">

Valeur de l'attribut

Valeur Description
#mapname Le caractère dièse (#) suivi du nom de l'élément <map> à utiliser.

Lecture recommandée : Explication détaillée de l'attribut usemap

usemap Les attributs fournissent un mécanisme de carte d'image "client" qui élimine efficacement le traitement des coordonnées du curseur du côté serveur et les problèmes de décalage de réseau qui en découlent. Grâce aux balises spéciales <map> et <area>, les créateurs HTML peuvent fournir une carte qui décrit les coordonnées des zones sensibles aux hyperliens de l'image usemap, cette carte contient également l'URL correspondante des hyperliens. La valeur de l'attribut usemap est une URL qui pointe vers une zone spéciale <map>. Le navigateur de l'ordinateur de l'utilisateur convertit les coordonnées du clic du curseur sur l'image en actions spécifiques, y compris le chargement et l'affichage d'un autre document.

Nous allons illustrer par exemple, le code source suivant map.gif de 100x100 pixels est mappé sur 4 zones, lorsque l'utilisateur clique sur l'une de ces zones, il est redirigé vers un document différent. Veuillez noter que dans cette balise <img>, nous avons inclus efficacement la fonction de traitement de la carte d'image ismap, de sorte que les utilisateurs de navigateurs qui n'ont pas la fonction de traitement usemap peuvent traiter la carte d'image par un autre moyen, à savoir le mécanisme du serveur :

<a href="/example/map">
  <img src="/i/map.gif" ismap="ismap" usemap="#map" />
</a>
<map name="map">
  <area coords="0,0,49,49" href="link1.html">
  <area coords="50,0,99,49" href="link2.html">
  <area coords="0,50,49,99" href="link3.html">
  <area coords="50,50,99,99" href="link4.html">
</map>

Différences d'application entre les attributs ismap et usemap

Les cartes sont un bon exemple de l'utilisation des attributs ismap et usemap, par exemple, lors de la navigation sur un site web d'une grande entreprise à l'échelle nationale, les utilisateurs peuvent cliquer sur la ville où ils habitent sur la carte pour obtenir les adresses et les numéros de téléphone des magasins de détail à proximité, etc.

Les avantages de la gestion client des cartes de site via usemap sont qu'elle ne nécessite pas de serveur ou de logiciel de serveur spécial, contrairement au mécanisme ismap, elle peut être utilisée dans des environnements non web (sans réseau), par exemple, pour utiliser des fichiers locaux ou des CD-ROM.

Prise en charge du navigateur

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

Balise HTML <img>