HTMLAreaElement.shape — Eigenschaft · JavaScript-Referenz

Signatur

HTMLAreaElement.shape

Beschreibung

Die Eigenschaft shape der Schnittstelle HTMLAreaElement spiegelt das HTML-Attribut shape eines <area>-Elements wider. Sie legt fest, wie die Koordinaten im Attribut coords gedeutet werden und welche Form der anklickbare Bereich innerhalb einer Bildkarte (<map>) hat.

Gültige Werte sind:

"rect" (auch "rectangle"): Rechteck, coords="x1,y1,x2,y2"
"circle" (auch "circ"): Kreis, coords="x,y,radius"
"poly" (auch "polygon"): Polygon, coords="x1,y1,x2,y2,…,xn,yn"
"default": der gesamte Bildbereich, coords wird ignoriert

Die Eigenschaft liefert den Attributwert so, wie er im Markup steht, also ohne Normalisierung. Fehlt das Attribut, ist das Ergebnis ein leerer String. Der Browser behandelt diesen Fall dann aber wie "rect". Die Eigenschaft ist nützlich, wenn man Bildkarten per Skript auswerten, dynamisch erzeugen oder umbauen will. Ein Beispiel dafür sind Hervorhebungen auf einem darübergelegten <canvas>.

Rückgabewert

Typ

string

Beschreibung

Der Wert des Attributs shape, z. B. "rect", "circle", "poly" oder "default". Fehlt das Attribut, ist es ein leerer String. Beim Setzen wird das HTML-Attribut aktualisiert.

Beispiele

Form eines Bereichs auslesen

// HTML:
// <img src="plan.png" usemap="#plan" alt="Grundriss">
// <map name="plan">
//   <area id="kueche" shape="rect" coords="0,0,120,80" href="#kueche" alt="Küche">
//   <area id="tisch" shape="circle" coords="200,100,30" href="#tisch" alt="Tisch">
// </map>

const areas = document.querySelectorAll('map[name="plan"] area');
for (const area of areas) {
  console.log(`${area.alt}: ${area.shape} (${area.coords})`);
}

Küche: rect (0,0,120,80) Tisch: circle (200,100,30)

Bereich dynamisch erzeugen

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

const area = document.createElement('area');
area.shape = 'poly';
area.coords = '10,10,60,10,35,50';
area.href = '/details/dreieck';
area.alt = 'Dreieckiger Bereich';
map.append(area);

console.log(area.outerHTML);

Bereich auf Canvas hervorheben (abhängig von shape)

const canvas = document.querySelector('#overlay');
const ctx = canvas.getContext('2d');

const highlight = (area) => {
  const c = area.coords.split(',').map(Number);
  // Alias-Werte und fehlendes Attribut normalisieren
  const shape = (area.shape || 'rect').toLowerCase();
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = 'rgba(255, 200, 0, 0.4)';
  ctx.beginPath();
  if (shape === 'circle' || shape === 'circ') {
    ctx.arc(c[0], c[1], c[2], 0, Math.PI * 2);
  } else if (shape === 'poly' || shape === 'polygon') {
    ctx.moveTo(c[0], c[1]);
    for (let i = 2; i < c.length; i += 2) ctx.lineTo(c[i], c[i + 1]);
    ctx.closePath();
  } else if (shape === 'default') {
    ctx.rect(0, 0, canvas.width, canvas.height);
  } else {
    ctx.rect(c[0], c[1], c[2] - c[0], c[3] - c[1]);
  }
  ctx.fill();
};

document.querySelectorAll('area').forEach((area) => {
  area.addEventListener('mouseenter', () => highlight(area));
});

// Wichtig · Fallstricke

Keine Normalisierung: shape gibt den Attributwert unverändert zurück, also auch Alias-Werte wie "circ" oder "polygon" und abweichende Groß-/Kleinschreibung ("RECT"). Vergleiche deshalb immer mit toLowerCase() und berücksichtige die Alias-Werte.
Fehlendes Attribut: Dann ist das Ergebnis "", obwohl der Browser den Bereich als Rechteck behandelt.
Ungültige Werte werden beim Setzen nicht abgelehnt, sondern einfach ins Attribut geschrieben. Der Bereich funktioniert dann womöglich nicht wie erwartet.
Koordinaten in CSS-Pixeln des Originalbilds: Wird das Bild responsiv skaliert, passen sich die coords nicht an. Sie müssen per Skript umgerechnet werden.
Barrierefreiheit: Jedes <area> mit href braucht einen aussagekräftigen alt-Text.
Kompatibilität: Wird von allen Browsern seit Langem unterstützt. Das Attribut shape an <a>-Elementen ist dagegen veraltet.

Siehe auch

HTMLAreaElement.hash HTMLAreaElement.alt HTMLAreaElement.host HTMLAreaElement.href HTMLAreaElement.search