HTMLImageElement.isMap — Eigenschaft · JavaScript-Referenz

Signatur

HTMLImageElement.isMap

Beschreibung

Die Eigenschaft isMap des Interfaces HTMLImageElement spiegelt das boolesche HTML-Attribut ismap wider. Ist sie true, wird das Bild als serverseitige Image-Map behandelt: Klickt der Nutzer auf das Bild, hängt der Browser die Klickkoordinaten relativ zur linken oberen Bildecke als ?x,y an die URL des umgebenden Links an, z. B. /karte?120,45.

Das Verhalten greift nur, wenn sich das <img> innerhalb eines <a>-Elements mit gültigem href befindet. Außerhalb eines Links hat isMap keine Wirkung. Der Server wertet die Koordinaten aus und entscheidet, welche Ressource geliefert wird.

Serverseitige Image-Maps sind ein Relikt aus frühen Webtagen. Heute nutzt man stattdessen clientseitige Image-Maps (<map>/<area> mit useMap) oder JavaScript-Klickauswertung über MouseEvent.offsetX/offsetY. Die Eigenschaft ist vor allem für Wartung von Altbestand oder das Auslesen bestehender Markup-Strukturen relevant.

Beispiele

isMap auslesen

// HTML: <a href="/karte"><img id="karte" src="karte.png" ismap alt="Stadtplan"></a>
const img = document.getElementById('karte');
console.log(img.isMap);
console.log(img.hasAttribute('ismap'));

true true

Serverseitige Map per Skript aktivieren

const link = document.createElement('a');
link.href = '/regionen';

const img = new Image(400, 300);
img.src = 'deutschland.png';
img.alt = 'Deutschlandkarte';
img.isMap = true; // setzt das Attribut ismap

link.append(img);
document.body.append(link);

console.log(img.outerHTML);
// Klick bei (120, 45) navigiert zu /regionen?120,45

Altbestand prüfen: wirkungslose ismap-Bilder finden

const wirkungslos = [...document.images].filter(
  (img) => img.isMap && !img.closest('a[href]')
);

wirkungslos.forEach((img) => {
  console.warn('ismap ohne umgebenden Link:', img.src);
  img.isMap = false; // Attribut entfernen
});

ismap ohne umgebenden Link: https://example.com/alt.png

// Wichtig · Fallstricke

Nur im Link wirksam: Ohne umgebendes <a href> hat isMap keinerlei Effekt.
Barrierefreiheit: Serverseitige Maps sind nicht per Tastatur bedienbar und für Screenreader unzugänglich, da die Zielbereiche nur dem Server bekannt sind. Bevorzugen Sie clientseitige Maps (useMap) oder echte Links/Buttons.
Kombination mit usemap: Hat ein Bild sowohl ismap als auch usemap, hat die clientseitige Map Vorrang.
Boolesches Attribut: setAttribute('ismap', 'false') aktiviert es trotzdem – nur Entfernen deaktiviert es. Nutzen Sie daher die Eigenschaft.
Kompatibilität: in allen Browsern seit jeher unterstützt; nicht veraltet, aber praktisch ungebräuchlich.

Siehe auch

HTMLAreaElement.search HTMLImageElement.hspace HTMLImageElement.useMap HTMLImageElement.name HTMLImageElement.src