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 usemap-Attributs von HTML wider. Diese Eigenschaft ist ein String, der 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 Hash- oder Pfund-Symbol # beginnt) des <map>-Elements, das die Bildkarte definiert, die auf das Bild angewandt werden soll.

Sie können mehr über clientseitige Bildkarten in unserem Lernartikel Fügen Sie eine Treffermaske auf 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>-Attributs name sein, dem ein Pfund- oder Hash-Symbol vorangestellt ist.

Betrachten Sie ein <map>, das so aussieht:

html
<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 Bildkarte heißt mainmenu-map, sollte das Bild, das sie verwendet, etwa so aussehen:

html
<img src="menubox.png" usemap="#mainmenu-map" />

Für zusätzliche Beispiele (einschließlich interaktiver) sehen Sie sich die Artikel über die <map>- und <area>-Elemente an, sowie den 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