Baseline Widely available
L'élément HTML <map> est utilisé avec des éléments <area> afin de définir une image cliquable divisée en régions.
<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;
}
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 universel id est utilisé, name devra avoir la même valeur que celui-ci.
<map name="primary">
<area shape="circle" coords="75,75,75" href="left.html" />
<area shape="circle" coords="275,75,75" href="right.html" />
</map>
<img
usemap="#primary"
src="https://via.placeholder.com/350x150"
alt="350 x 150 pic" />
L'exemple précédent devrait faire apparaître des images semblables (en utilisant la touche tab de votre clavier) :
Pour le lien left.html :
Pour le lien right.html :
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4