Tag <map>

Tag <map>

Definition

Status: Aktueller Standard

Das Tag steht für map (Karte, Image Map).

Das HTML-Element <map> wird in Verbindung mit dem <img>-Element verwendet, um interaktive Bereiche innerhalb von Bildern zu definieren. So werden innerhalb einer Image Map (einer anklickbaren Grafik) interaktive Bereiche definiert und mit unterschiedlichen Links verknüpft. Bei einer Europakarte kann man mittels <area>-Elementen z.B. die einzelnen Länder als anklickbare Bereiche definieren und mit entsprechenden Links versehen. Es wird über das name-Attribut mit dem usemap-Attribut des entsprechenden Bildes verknüpft.

Syntax

<map name="...">...</map>

Attribute

name: Verbindet die Image Map (mit Attribut usemap mit gleichem Namen) mit einem Bild (Pflichtattribut)

Beispiele

= Tag

= Attribut

= Wert

Text

= Kommentar bzw. wichtig!

Beispiel map

Der Code:

<img src="kamera.png" width="430" height="300" alt="Kamera" usemap="#kamera-map">

<map name="kamera-map">
  <!-- Ein Rechteck für den Auslöser -->
  <area shape="rect" coords="32,44,146,109" href="ausloeser.html" alt="Zum Auslöser">
  
  <!-- Ein Kreis für das Objektiv -->
  <area shape="circle" coords="233,179,88" href="objektiv.html" alt="Zum Objektiv">
</map>

Ergebnis:

Ergebnis: <map>-Demo 1

Hier wird eine Image Map definiert. Das Bild kamera.jpg ist 430 Pixel breit und 300 Pixel hoch. Es gibt zwei interaktive Bereiche: Ein Rechteck (rect) für den Auslöser mit den Koordinaten (32,44) für die obere linke Ecke und (146,109) für die untere rechte Ecke. Ein Kreis (circle) für das Objektiv mit den Koordinaten (233,179) für den Mittelpunkt und einem Radius von 88 Pixeln.

Beim Klick auf den Auslöser oben links bzw. auf das runde Objektiv öffnet sich jeweils eine andere Seite.

Anmerkungen

In Zeiten von Responsive Design (Darstellungsanpassung an Bildschirmgröße) ist das klassische <map>-Tag problematisch, da die festen Pixel-Koordinaten sich nicht mit skalierenden Bildern anpassen. Heutzutage nutzt man dafür eher SVG-Grafiken oder CSS-Overlays um interaktive Bereiche zu definieren, die sich flexibel an die Bildschirmgröße anpassen können. Das <map>-Element und seine <area>-Elemente sind daher eher eine historische Kuriosität und werden in modernen Webprojekten selten verwendet.