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 im HTMLImageElement-Interface spiegelt den Wert des HTML usemap-Attributs wider. Dieser Wert ist ein String, der den Namen der clientseitigen Imagemap angibt, die auf das Bild angewendet werden soll.
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;
}
Wert
Ein String, der das Hash-Symbol # gefolgt von dem name des <map>-Elements enthält, welches die Imagemap definiert, die auf das Bild angewendet werden soll.
Sie können mehr über clientseitige Imagemaps in unserem Lernartikel Ein Trefferfeld auf ein Bild legen erfahren.
Beispiele
Verwendung von useMap
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>
Angenommen, die Imagemap heißt mainmenu-map, können Sie Bilder dynamisch konstruieren, die auf die Imagemap wie folgt verweisen:
const image = new Image();
image.src = "menubox.png";
image.alt = "";
image.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 Imagemaps.
Spezifikationen
| Specification |
|---|
| HTML # dom-img-usemap |
Browser-Kompatibilität
Loading…