HTMLImageElement: useMap-Eigenschaft
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Die useMap
-Eigenschaft des HTMLImageElement
-Interfaces spiegelt den Wert des HTML usemap
-Attributs wider, das einen String darstellt, welcher den Namen der clientseitigen Bildkarte angibt, die auf das Bild angewendet werden soll.
Wert
Ein String, der die seitenlokale URL angibt (das heißt, eine URL, die mit dem Rautezeichen oder Pfundzeichen, #
, beginnt) des <map>
-Elements, das die Bildkarte definiert, die auf das Bild angewendet werden soll.
Sie können mehr über clientseitige Bildkarten in unserem Lernartikel Fügen Sie eine Trefferkarte über ein Bild hinzu erfahren.
Verwendungshinweise
Der Stringwert von useMap
muss ein gültiger Anker für ein <map>
-Element sein. Mit anderen Worten, dieser String sollte der Wert des entsprechenden <map>
-Elements name
-Attributs sein, dem ein Pfundzeichen oder Hash-Symbol vorangestellt ist.
Betrachten Sie ein <map>
, das so aussieht:
<map name="mainmenu-map">
<area
shape="circle"
coords="25, 25, 75"
href="/index.html"
alt="Return to home page" />
<area shape="rect" coords="25, 25, 100, 150" href="/index.html" alt="Shop" />
</map>
Angesichts der Bildkarte mit dem Namen mainmenu-map
sollte das Bild, das sie verwendet, etwa wie folgt aussehen:
<img src="menubox.png" usemap="#mainmenu-map" />
Weitere Beispiele (einschließlich interaktiver) finden Sie in den Artikeln über die <map>
- und <area>
-Elemente sowie im Leitfaden zur Verwendung von Bildkarten.
Beispiele
Probieren Sie es aus
<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="Web APIs" />
<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="MDN infographic" />
img {
display: block;
margin: 0 auto;
width: 260px;
height: 260px;
}
Spezifikationen
Specification |
---|
HTML # dom-img-usemap |
Browser-Kompatibilität
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
useMap |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support