HTMLMapElement — Schnittstelle · JavaScript-Referenz

Signatur

interface HTMLMapElement extends HTMLElement

Beschreibung

HTMLMapElement ist die DOM-Schnittstelle des <map>-Elements. Es erbt alle Eigenschaften und Methoden von HTMLElement und ergänzt sie um zwei spezielle Eigenschaften für Image-Maps. Das sind Bilder, auf denen einzelne Bereiche als Links oder Klickflächen dienen.

name (string): Name der Map. Ein Bild verweist über usemap="#name" auf diesen Namen.
areas (HTMLCollection, schreibgeschützt): Eine live-Sammlung aller <area>-Elemente, die Nachfahren der Map sind.

Diese Schnittstelle braucht man, wenn man Image-Maps per Skript auswerten oder dynamisch aufbauen will. Beispiele sind klickbare Grundrisse, Landkarten oder Produktbilder mit Hotspots. Weil die Sammlung in areas live ist, zeigt sie Änderungen am DOM sofort an. Es gibt keinen eigenen Konstruktor. Neue Instanzen erzeugt man mit document.createElement('map').

Die Zuordnung zwischen Bild und Map läuft über den name-Wert. Ändert man name, muss man auch das usemap-Attribut der zugehörigen Bilder anpassen. Sonst gehört die Map zu keinem Bild mehr.

Rückgabewert

Typ

HTMLMapElement

Beschreibung

Das Objekt, das ein <map>-Element darstellt. Man erhält es z. B. über document.createElement('map') oder document.querySelector('map').

Beispiele

Image-Map dynamisch erzeugen

// Map erstellen und mit einem Bild verknüpfen
const map = document.createElement('map');
map.name = 'grundriss';

const kueche = document.createElement('area');
kueche.shape = 'rect';
kueche.coords = '0,0,150,100';
kueche.href = '#kueche';
kueche.alt = 'Küche';
map.append(kueche);

const img = document.createElement('img');
img.src = 'grundriss.png';
img.alt = 'Grundriss der Wohnung';
img.useMap = '#grundriss';

document.body.append(img, map);
console.log(map instanceof HTMLMapElement, map.areas.length);

true 1

Alle Bereiche einer Map auflisten

// HTML: <map name="europa"><area alt="Deutschland" href="/de" ...><area alt="Frankreich" href="/fr" ...></map>
const map = document.querySelector('map[name="europa"]');

for (const area of map.areas) {
  console.log(`${area.alt} → ${area.href}`);
}

Deutschland → https://example.com/de Frankreich → https://example.com/fr

Klicks auf Hotspots per Event-Delegation auswerten

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

map.addEventListener('click', (event) => {
  const area = event.target.closest('area');
  if (!area) return;
  event.preventDefault();
  console.log(`Hotspot gewählt: ${area.alt}`);
});

Hotspot gewählt: Display

Live-Sammlung areas beobachten

const map = document.createElement('map');
map.name = 'demo';
const areas = map.areas; // live-HTMLCollection
console.log(areas.length);

map.append(document.createElement('area'));
console.log(areas.length); // automatisch aktualisiert

0 1

// Wichtig · Fallstricke

Kein Konstruktor: new HTMLMapElement() wirft einen TypeError („Illegal constructor“). Nutze stattdessen document.createElement('map').
Live-Sammlung: areas ist eine live-HTMLCollection. Wer in einer Schleife über areas Elemente entfernt, überspringt dabei leicht Einträge. Vorher mit Array.from(map.areas) kopieren.
Name und usemap: usemap braucht das führende #, name nicht. Der name-Wert darf nicht leer sein und keine Leerzeichen enthalten.
Responsive Design: Die coords der <area>-Elemente sind feste Pixelwerte. Wenn das Bild skaliert wird, passen sie sich nicht an. Man muss sie per Skript umrechnen oder SVG verwenden.
Barrierefreiheit: Jedes <area> mit href braucht einen sinnvollen alt-Text.
Kompatibilität: Wird von allen Browsern unterstützt. areas berücksichtigt alle <area>-Nachfahren, nicht nur die direkten Kinder.

Siehe auch

HTMLDivElement HTMLModElement HTMLBRElement HTMLBaseElement HTMLDataElement