HTMLMapElement.areas — Eigenschaft · JavaScript-Referenz

Signatur

HTMLMapElement.areas

Beschreibung

Die Eigenschaft areas eines HTMLMapElement gibt eine HTMLCollection zurück. Darin stehen alle <area>-Elemente, die Nachfahren des jeweiligen <map>-Elements sind. Über diese Sammlung kommt man bequem an die klickbaren Bereiche einer Image-Map (verweissensitive Grafik) heran, ohne selbst mit querySelectorAll suchen zu müssen.

Die Sammlung ist live: Fügt man per Skript neue <area>-Elemente in die Map ein oder entfernt welche, zeigt dasselbe Sammlungsobjekt die Änderung sofort an. Die Eigenschaft selbst ist schreibgeschützt. Eine neue Sammlung kann man ihr also nicht zuweisen, die einzelnen Elemente darin lassen sich aber ganz normal verändern.

Typische Einsatzfälle sind:

Event-Listener an alle Bereiche einer Image-Map hängen
die Bereiche für Barrierefreiheit prüfen, etwa auf fehlende alt-Texte
Koordinaten (coords) an eine responsiv skalierte Grafik anpassen
Menüs oder Legenden dynamisch aus den Bereichen erzeugen

Rückgabewert

Typ

HTMLCollection<HTMLAreaElement>

Beschreibung

Eine live aktualisierte HTMLCollection mit allen <area>-Nachfahren des <map>-Elements, in Dokumentreihenfolge. Hat die Map keine Bereiche, ist die Sammlung leer (length === 0).

Beispiele

Alle Bereiche einer Image-Map auflisten

// HTML:
// <img src="plan.png" usemap="#lageplan" alt="Lageplan">
// <map name="lageplan" id="lageplan">
//   <area shape="rect" coords="0,0,100,100" href="/halle-a" alt="Halle A">
//   <area shape="circle" coords="200,150,50" href="/halle-b" alt="Halle B">
// </map>

const map = document.getElementById('lageplan');

console.log(map.areas.length);
for (const area of map.areas) {
  console.log(`${area.alt}: ${area.shape} (${area.coords})`);
}

2 Halle A: rect (0,0,100,100) Halle B: circle (200,150,50)

Klick-Tracking für alle Bereiche

const map = document.querySelector('map[name="lageplan"]');

// HTMLCollection hat kein forEach – vorher in ein Array umwandeln
Array.from(map.areas).forEach((area) => {
  area.addEventListener('click', (event) => {
    event.preventDefault();
    console.log(`Bereich angeklickt: ${area.alt}`);
  });
});

Bereich angeklickt: Halle A (nach Klick auf den ersten Bereich)

Live-Verhalten und Prüfung auf fehlende alt-Texte

const map = document.getElementById('lageplan');
const areas = map.areas; // Referenz einmal speichern

const neu = document.createElement('area');
neu.shape = 'rect';
neu.coords = '300,0,400,80';
neu.href = '/parkplatz';
map.append(neu);

console.log(areas.length); // live: schon aktualisiert

const ohneAlt = [...areas].filter((a) => !a.alt.trim());
console.log(`Bereiche ohne alt-Text: ${ohneAlt.length}`);

3 Bereiche ohne alt-Text: 1

// Wichtig · Fallstricke

Live-Sammlung: Wer beim Durchlaufen Bereiche entfernt, verändert dabei die Indizes. Deshalb vorher mit Array.from(map.areas) oder [...map.areas] eine feste Kopie anlegen.
HTMLCollection hat weder forEach noch map. for...of funktioniert aber in allen modernen Browsern.
Auf einzelne Einträge greift man über den Index (areas[0]) oder mit areas.namedItem('id') über id bzw. name zu.
Die Eigenschaft ist schreibgeschützt. Eine Zuweisung wird im nicht-strikten Modus stillschweigend ignoriert und löst im strikten Modus einen TypeError aus.
In der Sammlung stehen nur <area>-Nachfahren der jeweiligen Map. Dass die Map über usemap tatsächlich mit einem Bild verknüpft ist, garantiert das nicht.
Barrierefreiheit: Jeder Bereich mit href braucht einen aussagekräftigen alt-Text.
Die Eigenschaft wird seit jeher von allen gängigen Browsern unterstützt.

Siehe auch

GPUCanvasContext.canvas HTMLFormElement.target HTMLMapElement.name HTMLBaseElement.href HTMLAreaElement.href