HTMLAreaElement.interestForElement — Eigenschaft · JavaScript-Referenz

Signatur

HTMLAreaElement.interestForElement

Beschreibung

Die Eigenschaft interestForElement ist das DOM-Gegenstück zum HTML-Attribut interestfor. Damit wird ein <area>-Element einer Image-Map zu einem Interest-Invoker: Zeigt der Nutzer „Interesse“ am Bereich (Maus darüber halten, Tastaturfokus, auf Touch-Geräten langes Drücken), bekommt das Ziel-Element ein interest-Ereignis. Verliert der Nutzer das Interesse wieder, folgt ein loseinterest-Ereignis. Ist das Ziel ein Popover (popover-Attribut), wird es automatisch ein- und wieder ausgeblendet.

Anders als das Attribut, das nur eine ID als Zeichenkette enthält, arbeitet die Eigenschaft mit einer direkten Element-Referenz. Beim Lesen bekommst du das Element zurück, dessen ID im Attribut interestfor steht (oder null, wenn keines gefunden wird). Beim Schreiben weist du ein Element-Objekt direkt zu. Das funktioniert auch bei Elementen ohne ID. null entfernt die Verknüpfung.

Typische Einsätze sind Tooltips, Vorschaukarten oder Zusatzinfos für einzelne Bereiche einer klickbaren Grafik (z. B. Regionen einer Landkarte oder Bauteile in einem Diagramm). Dafür brauchst du keine eigenen mouseenter-, focus- oder Timer-Handler. Die Verzögerung beim Anzeigen und Ausblenden steuerst du per CSS über interest-delay.

Rückgabewert

Typ

Element | null

Beschreibung

Das Ziel-Element des Interest-Invokers oder null, wenn kein Ziel gesetzt ist oder die ID im Attribut interestfor zu keinem Element passt. Beim Setzen erwartet die Eigenschaft ein Element oder null.

Beispiele

Ziel per Attribut festlegen und auslesen

// HTML:
// <img src="karte.png" usemap="#regionen" alt="Deutschlandkarte">
// <map name="regionen">
//   <area id="bayern" shape="rect" coords="200,300,320,420"
//         href="/bayern" alt="Bayern" interestfor="info-bayern">
// </map>
// <div id="info-bayern" popover="hint">Bayern: ca. 13 Mio. Einwohner</div>

const area = document.getElementById('bayern');
console.log(area.interestForElement?.id);

info-bayern

Ziel dynamisch per Element-Referenz zuweisen

const area = document.querySelector('area[alt="Hessen"]');

// Vorschaukarte ohne ID erzeugen
const karte = document.createElement('div');
karte.popover = 'hint';
karte.textContent = 'Hessen: Landeshauptstadt Wiesbaden';
document.body.append(karte);

if ('interestForElement' in HTMLAreaElement.prototype) {
  area.interestForElement = karte;
  console.log(area.interestForElement === karte);
} else {
  // Rückfall für Browser ohne Unterstützung
  area.title = karte.textContent;
}

true

Auf interest- und loseinterest-Ereignisse reagieren

const info = document.getElementById('info-bayern');

info.addEventListener('interest', (event) => {
  // event.source ist der auslösende Invoker, hier das <area>-Element
  console.log('Interesse an:', event.source.alt);
  info.dataset.geladen ??= 'ja'; // z. B. Inhalte beim ersten Mal nachladen
});

info.addEventListener('loseinterest', () => {
  console.log('Interesse verloren');
});

// Verknüpfung wieder entfernen
document.getElementById('bayern').interestForElement = null;

Interesse an: Bayern Interesse verloren

// Wichtig · Fallstricke

Experimentell: Interest-Invoker funktionieren derzeit nur in Chromium-Browsern (Chrome/Edge ab etwa Version 142). Firefox und Safari unterstützen sie noch nicht. Prüfe deshalb vorher mit 'interestForElement' in HTMLAreaElement.prototype, ob die Eigenschaft existiert, und sieh einen Rückfall vor, z. B. title oder eigene Ereignis-Handler.
Beim Lesen wird die ID nur im selben Baumbereich gesucht (Dokument oder dieselbe Shadow-Root). Zeigt die Referenz über Shadow-DOM-Grenzen hinweg, kann null zurückkommen.
Wenn du ein Element direkt zuweist, wird das Attribut interestfor auf eine leere Zeichenkette gesetzt. Das Attribut enthält dann nicht die ID des Ziels.
Ein Popover mit popover="hint" schließt andere offene auto-Popovers nicht. Für Tooltips ist das meistens der passende Typ.
Barrierefreiheit: Das <area> braucht ein href, damit es per Tastatur fokussierbar ist. Ohne href kann es kein Interesse per Tastatur auslösen. Lege außerdem wichtige Informationen nicht ausschließlich in den Hover-Inhalt.
Die Spezifikation ist noch in Arbeit. Namen von Ereignissen und CSS-Eigenschaften (z. B. interest-delay, :interest-source, :interest-target) können sich noch ändern.

Siehe auch

HTMLAreaElement.hostname HTMLAreaElement.protocol HTMLAreaElement.referrerPolicy HTMLAreaElement.relList HTMLAreaElement.target