HTMLAreaElement: interestForElement-Eigenschaft

Wert

Eine Element-Objektinstanz oder null, wenn das zugehörige <area>-Element kein Zielelement zugewiesen hat.

Beispiele

Grundlegende Nutzung von interestForElement

In diesem Beispiel verwenden wir die interestForElement-Eigenschaft eines <area>-Elements, um dessen Zielelement festzulegen. Anschließend rufen wir das tagName des Zielelements ab. Das tagName wird dann im Textinhalt des <area>-Elements angezeigt.

HTML

Wir fügen ein <area>-Element und ein <div>-Element ein. Wir verwandeln das <div>-Element in ein Popover, indem wir ein popover-Attribut darauf setzen.

<map>
  <area href="#" shape="default" />
</map>
<div id="mypopover" popover>I am a <code>&lt;div&gt;</code> element.</div>

map {
  width: 200px;
  height: 100px;
  background-color: pink;
  padding: 5px;
}

JavaScript

Wir holen Referenzen auf die <area>- und <div>-Elemente im Skript und deklarieren dann eine Interest Invoker-Ziel-Beziehung zwischen dem <area> und dem <div>, indem wir die interestForElement-Eigenschaft des <area>-Elements auf eine Referenz zum <div> setzen. Wir setzen dann den Textinhalt des <area>-Elements auf einen String, der das tagName des Zielelements enthält, welcher über invoker.interestForElement.tagName abgerufen wird.

const invoker = document.querySelector("area");
const popover = document.querySelector("div");

invoker.interestForElement = popover;

invoker.textContent = `My target is a ${invoker.interestForElement.tagName} element`;

Ergebnis

Das Beispiel wird wie folgt dargestellt:

Versuchen Sie, Interesse an dem Bereich zu zeigen (zum Beispiel durch Hovern oder Fokussieren), um das <div> erscheinen zu lassen.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Nutzung von Interest Invokers
• Die Popover-API