HTML map-Tag - Learn HTML

Der HTML-Tag <map> definiert eine clientseitige Image-Map — ein Bild, dessen verschiedene Bereiche auf unterschiedliche Ziele verlinken. Anstatt eines einzelnen Links für das gesamte Bild markiert man mehrere anklickbare „Hot Spots" darauf. Jeder Hot Spot wird durch ein <area>-Element beschrieben, und alle <area>-Elemente befinden sich innerhalb eines einzigen <map>.

Sie wird clientseitig genannt, weil der Browser das Interpretieren und Rendern der Bereiche vollständig lokal übernimmt — für die Erkennung des angeklickten Bereichs ist kein Roundtrip zum Server erforderlich.

Diese Seite erläutert, wie ein <map> mit seinem Bild verknüpft wird, wie anklickbare Bereiche mit <area> definiert werden, welche Anforderungen hinsichtlich Barrierefreiheit gelten und wann eine Image-Map das richtige Werkzeug ist (und wann nicht).

Wie `<map>` mit einem Bild verbunden wird

Ein <map> hat allein keine Funktion. Er muss von einem Bild referenziert werden — über zwei Attribute, die übereinstimmen müssen:

Beim <map>: das name-Attribut, z. B. <map name="planets">.
Beim <img>: das usemap-Attribut, das auf diesen Namen mit einem führenden # verweist, z. B. <img usemap="#planets">.

<img src="planets.png" alt="The planets" usemap="#planets" />

<map name="planets">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.html" />
  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercury.html" />
</map>

Wichtige Regeln zur Verknüpfung:

Das #-Präfix ist nur bei usemap erforderlich. Der name-Wert wird ohne # geschrieben; der usemap-Wert mit # (es handelt sich um eine Fragment-Referenz). name="planets" ↔ usemap="#planets".
Die Werte sind Groß-/Kleinschreibungs-sensitiv. usemap="#Planets" stimmt nicht mit name="planets" überein.
name muss im Dokument eindeutig und darf nicht leer sein.
<area>-Elemente müssen sich innerhalb von <map> befinden. Ein <area> an anderer Stelle hat keinen Effekt.

Stimmen die Namen nicht exakt überein, wird das Bild ohne anklickbare Bereiche gerendert und kein Fehler angezeigt — ein häufiger, stiller Bug.

Anklickbare Bereiche mit `<area>` definieren

Jeder Bereich ist ein <area>-Element. Zwei Attribute beschreiben seine Geometrie, die übrigen beschreiben den Link:

Attribut	Zweck
`shape`	Bereichstyp: `rect`, `circle`, `poly` oder `default`.
`coords`	Koordinaten, die den Bereich definieren, in CSS-Pixeln.
`href`	Ziel-URL des Bereichs.
`alt`	Textalternative für den Bereich (erforderlich, wenn `href` vorhanden ist).
`target`	Wo der Link geöffnet wird (`_blank`, `_self` usw.).

Die Bedeutung von coords hängt von shape ab:

Form	`coords`-Format	Bedeutung
`rect`	`x1,y1,x2,y2`	Obere linke und untere rechte Ecke eines Rechtecks.
`circle`	`x,y,r`	Mittelpunkt `x,y` und Radius `r`.
`poly`	`x1,y1,x2,y2,x3,y3,…`	Eine Liste von Punkten, die ein Polygon bilden (jedes Paar ist ein Scheitelpunkt).
`default`	(keine)	Der gesamte Bildbereich, der nicht von einem anderen Bereich abgedeckt wird.

Alle Koordinaten werden ausgehend von der oberen linken Ecke des Bildes (0,0) in Pixeln gemessen, relativ zur intrinsischen Größe des Bildes.

<map name="shapesmap">
  <!-- rectangle from (0,0) to (60,60) -->
  <area shape="rect" coords="0,0,60,60" alt="Square region" href="square.html" />
  <!-- circle centered at (120,30) with radius 25 -->
  <area shape="circle" coords="120,30,25" alt="Round region" href="circle.html" />
  <!-- triangle through three points -->
  <area shape="poly" coords="160,0,200,60,120,60" alt="Triangle region" href="triangle.html" />
</map>

Syntax

Der <map>-Tag wird paarweise verwendet. Der Inhalt wird zwischen dem öffnenden (<map>) und schließenden (</map>) Tag geschrieben.

Beispiel für den HTML-Tag `<map>`:

HTML-Tag <map>

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>Click on the logo or on one of the logo items to watch it closer:</p>
    <img src="/uploads/media/default/0001/01/0f94cf189afcdc39c4df2a73d230d1a7425ee66d.png"  width="145" height="126" alt="block" usemap="#blockmap" />
    <map name="blockmap">
      <area shape="circle" coords="45,58,30" alt="html-book" href="https://www.w3docs.com/learn-html.html" />
      <area shape="circle" coords="88,64,15" alt="html-quiz" href="https://www.w3docs.com/quiz-start/html-basic" />
      <area shape="circle" coords="114,67,14" alt="html-snippets" href="https://www.w3docs.com/snippets/html.html" />
    </map>
  </body>
</html>

Probier es selbst »

Attribute

Attribute	Wert	Beschreibung
name	mapname	Legt den Namen einer Image-Map fest.

Das <map>-Element verwendet außerdem die globalen Attribute.

Barrierefreiheit

Image-Maps sind rein visuell, sofern man nichts dagegen unternimmt. Daher gelten einige wichtige Regeln:

Jedes verlinkte <area> benötigt ein aussagekräftiges alt. Screenreader lesen jeden Bereich anhand seines alt-Textes vor, genau wie bei Links. Ein leeres oder fehlendes alt bei einem anklickbaren Bereich lässt den Link unbeschriftet.
Das alt sollte das Ziel beschreiben, nicht das Bild. „Zur Kontaktseite" ist hilfreicher als „blauer Kreis".
Tastaturnavigation funktioniert automatisch für Bereiche mit href: Jeder wird zu einem fokussierbaren, per Tab erreichbaren Link. Vermeiden Sie es, Interaktivität nur in einem Bereich ohne href zu platzieren, da dieser per Tastatur nicht erreichbar ist.
Vermeiden Sie winzige Hot Spots. Kleine oder unregelmäßig geformte Bereiche sind schwer mit Maus, Touch oder Hilfsmittelzeigern zu treffen.

Wann verwenden (und wann nicht)

Clientseitige Image-Maps sind eine ältere Funktion und funktionieren weiterhin, passen jedoch heute nur in einen engen Anwendungsbereich.

Sinnvoller Einsatz: ein einzelnes Rasterbild (ein Foto, ein Diagramm, ein gescannter Grundriss), bei dem einige rechteckige oder kreisförmige Bereiche auf etwas verlinken sollen, und das Bild nicht responsiv skaliert wird.

<map> vermeiden, wenn:

Das Layout responsiv ist. coords sind feste Pixelwerte, die an die intrinsische Größe des Bildes gebunden sind; sie skalieren nicht, wenn das Bild per CSS verkleinert oder vergrößert wird, sodass die Hot Spots verrutschen.
Die Bereiche Schaltflächen, Menüs oder komplexe Elemente sind. Bauen Sie diese stattdessen mit echtem HTML/CSS.

Für die meisten modernen Anforderungen gibt es bessere Alternativen:

Overlay-Anker mit CSS — absolut positionierte <a>-Elemente (in Prozentangaben) auf einem responsiven Bild platzieren. Das skaliert korrekt und ist vollständig barrierefrei.
Inline-<svg> — Formen als echte, skalierbare, stilisierbare Elemente zeichnen und jede anklickbare Form in ein <a> einwickeln. Das ist die flexibelste Option für Diagramme und komplexe Bereiche.

Siehe auch HTML-Links für Informationen zum Verhalten von Ankern und Link-Zielen.

Übung

Was trifft auf den HTML <map>-Tag zu, wie auf der verlinkten Webseite beschrieben?

Der HTML <map>-Tag wird zum Erstellen einer Image-Map verwendet.Der <map>-Tag wird in HTML5 nicht unterstützt.Der <map>-Tag definiert eine clientseitige Image-Map. Eine Image-Map ist ein Bild mit anklickbaren Bereichen.Der <map>-Tag kann nicht zusammen mit <area>-Elementen verwendet werden, um die anklickbaren Bereiche in der Image-Map zu definieren.Das <map>-Element enthält keine <area>-Elemente, die die anklickbaren Bereiche in der Image-Map definieren.

Wie <map> mit einem Bild verbunden wird

Anklickbare Bereiche mit <area> definieren