Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.
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 Juli 2015.
Die useMap-Eigenschaft des
HTMLImageElement-Interfaces spiegelt den Wert des
HTML-usemap-Attributs wider. Diese Eigenschaft ist eine Zeichenkette, die den Namen der clientseitigen Image-Map angibt, die auf das Bild angewendet werden soll.
Wert
Eine Zeichenkette, die die seitenlokale URL angibt (das heißt, eine URL, die mit dem Raute- oder Hashtag-Symbol # beginnt) des <map>-Elements, die die Image-Map definiert, die auf das Bild angewendet werden soll.
Sie können mehr über clientseitige Image-Maps in unserem Lernartikel Hintergrundkarte über ein Bild legen erfahren.
Verwendungsnotizen
Der Zeichenkettenwert von useMap muss ein gültiger Anker für ein <map>-Element sein. Mit anderen Worten sollte diese Zeichenkette der Wert des Attributs name des entsprechenden <map>-Elements sein, dem ein Raute- oder Hashtag-Symbol vorangestellt ist.
Betrachten Sie ein <map>, das wie folgt 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 diese verwendet, in etwa wie folgt aussehen:
<img src="menubox.png" usemap="#mainmenu-map" />
Für zusätzliche Beispiele (einschließlich interaktiver) siehe die Artikel über die <map>- und <area>-Elemente sowie den Leitfaden zur Verwendung von Image-Maps.
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
Loading...