HTML Area Map

Area Map – Maus-sensitive und Touch-sensitive Bereiche mit Links zu anderen Seiten oder zum Einspielen von Erklärungen.

HTML area und map teilen ein Bild in eine Area Map oder Image Map. Area Maps bestehen aus Bildern, über denen maus-sensitive Bereiche liegen. Diese Bereiche verzweigen mit Links zu anderen Seiten oder lösen ein Script aus, um die Area Map zu animieren.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

Nichts für kleine Monitore

HTML Area Maps oder Image Maps waren Knüller, als kleine GIF-Animationen die frühen Internetnutzer noch begeisterten. Die Image-Map ist ein Bild, das an mehreren Stellen auf Aktionen des Benutzers antwortet. Area Maps stammen aus der Zeit vor den mobilen Geräten mit ihren kleinen Monitoren. Der Aufwand für klassische responsive Area Maps ist hoch und das zugrunde liegende Bild muss auf die Benutzung mit dem Finger angepasst sein. Um es also gleich vorweg zu sagen: Einfacher und besser anpassbar an die Viewports der mobilen Geräte ist eine Area Map mit SVG.

Area Maps mit Sprungziel

Das map-Tag verweist auf ein Bild und die darunter liegenden area-Tags unterteilt das Bild in Regionen, die von der Maus oder durch ein Touch angesprochen werden.

Die area-Elemente innerhalb des map-Tags legen die Bereiche durch Formen (shape) fest.

occelli-300
occelli-600
<img usemap="#myMap" src="occelli.jpg" width="600" height="357" alt="Butter, Brot und Croissant">
<map name="myMap">
  <area id="butter" shape="poly" coords="4,166,156,3,260,3,310,60,310,79,110,300,40,290,4,240" href="#" alt="Butter">
  <area id="brot" shape="poly" coords="360,4,470,4,597,120,597,240,560,290,300,60" href="#" alt="Brot">
  <area id="croissant" shape="circle" coords="318,244,108" href="#" alt="Croissant">
</map>

Wer den Validator nicht erzürnen möchte, setzt keine Leerzeichen nach dem Komma zwischen die Werte der Koordinaten. Die Browser haben allerdings keine Probleme mit einem überflüssigen Leerzeichen.

Das shape-Attribut jedes area-Tags beschreibt einen Bereich, z.B. durch einen Kreis oder durch eine unregelmäßige Form (Polyline). Das sind maus-sensitive Bereiche oder Hot Spots, die durch das href-Attribut zu verschiedenen Linkzielen führen oder Aktionen eines Scripts auslösen.

Zu guter Letzt: Das href-Attribut der area-Tags ist die URL, die Adresse eines Sprungziels.

Area Map: Bild austauschen

Area Maps führen entweder durch das href-Attribut zu einem Sprungziel oder dienen als Grundlage für eine einfache Animation durch das Austauschen des angezeigten Bilds.

Area Map mit mouse-sensitiven und touch-sensitiven Bereichen
Schleswig-Holstein.png Hamburg.png Mecklenburg-Vorpommern.png Niedersachsen.png Brandenburg.png Berlin.png Nordrhein-Westfalen.png Sachsen.png Sachsen-Anhalt.png Thueringen.png Bayern.png Hessen.png Bremen.png Saarland.png Rheinland-Pfalz.png Baden-Wuerttemberg.png

Das HTML map-Tag ist der Container für area-Tags, in denen die Area Map durch die Koordinaten der Hot Spots beschrieben wird. Als Verbindung zur Area Map dient das Attribut usemap im img-Tag.

area-Tags müssen innerhalb des map-Tags liegen. Das img-Tag kann vor oder nach dem map-Tag stehen. Jedes area-Tag muss ein href-Attribut als Link enthalten.

HTML Area map
<img src="karte.png" … usemap="#Mapi">

<map name="Mapi" id="Mapi">
   <area shape="circle" coords="110,110,25" 
      alt="Bremen.gif" href="Bremen.html">
   <area shape="poly" coords="265,151,273,135,…" 
      alt="Berlin.gif" href="Berlin.html">
   <area shape="circle" coords="150,90,30" 
      alt="Hamburg.gif" href="Hamburg.html">
   …
</map>
Javascript für Area Map
window.addEventListener ('load', function () {
var map = document.querySelectorAll('#Mapi area');
for (var i=0; i<map.length; i++) {
   if (map[i].addEventListener) {
      map[i].addEventListener('touchstart', swap, false);
      map[i].addEventListener('mouseover', swap, false);
   }
}

function swap(ev) {
   var lan = this.getAttribute('alt');
   document.getElementById('deutschland').setAttribute('src','bilder/' + lan);
   return false;
}
});

Deutschlandkarte als HTML Area-Map

Für eine Image Map müssen also das Originalbild (im Beispiel oben karte.png) und in derselben Größe für jeden maus-sensitiven Bereich entsprechende Varianten des Bildes vorliegen.

Für die Deutschlandkarte mit den Bundesländern wird also für jedes Bundesland ein Bild vorliegen, in dem das Bundesland farbig hinterlegt ist.

area-map-einzelbilder

Die Koordinten der Image Map lassen sich nur in einfachen Fällen aus der Hand errechnen. Einfacher fällt das Aufstellen der Koordinaten mit einem speziellen Programm. Die meisten grafischen HTML-Editoren wie Adobe Dreamweaver erstellen den HTML-Code für eine Image Map. Ansonsten gibt es zahlreichen Apps im Internet, mit denen eine Image Map auf grafischer Basis erstellt wird.

Online Image Map Editor

Im Beispiel oben erfasst ein einfaches Javascript das Event "mouseover" über der HTML-Map und tauscht das gesamte Bild gegen das Bild mit der passenden HTML-id aus. Natürlich sind auch komplexere Aktion möglich. Beliebt war früher z.B. die Navigation zu einer anderen Seite.

HTML area: keine CSS-Eigenschaften

Für das area-Tag konnten in XHTML/CSS2 keine CSS-Eigenschaften notiert werden – area ist ein leeres Element (void) und definiert nur maus-sensitive Bereiche, aber bildet keinen Block im Dokument. Darum verhinderte der Selektor area img { border: none } auch nicht, dass Browser einen Rahmen um das Bild der Image Map anzeigen – stattdessen kann style="border: none;" als inline-Stil verwendet werden oder eleganter ein Attribut-Selektor:

img[usemap] { border: none; }

Mit CSS area { outline:none } setzen Safari und Chrome keinen blauen Outline-Rahmen.

Damit das iPad keinen Flash beim Touch zeigt: -webkit-tap-highlight-color: rgba(0,0,0,0)

Responsive Area Map

Eine Area Map müsste für jeden Breakpoint oder für jede Größe des Viewports neu berechnet werden, damit sie sich auf die Monitore der mobilen Geräte anpasst.

Das jQuery-Plugin jQuery-rwdImageMaps macht eine Image Map / area map responsive.

Allerdings darf man nicht übersehen, dass die mobilen Geräte kein Hovern mit der Maus kennen, sondern auf den Touch mit dem Finger reagieren. Die Flächen müssen groß genug für einen Finger sein (40px x 40px) und die Funktion des Bildes als Image Map muss klar herausgestellt werden.

Die Alternative ist eine Area Map mit SVG, in der schon der Browser das Verkleinern aller sensitiven Bereiche übernimmt. Image Maps mit SVG müssen inline in den Quelltext gesetzt oder mit Hilfe von HTML iframe eingebunden werden, damit Javascript die Elemente der Grafik identifizieren kann.

SVG Area Maps können genauso mit Bitmap-Bildern unterlegt werden wie eine HTML Area Map. SVG Elemente können mit einem Link auf andere Seiten verweisen und mit Javascript animiert werden.

Attribute für HTML map und area

name
Name der Map. Der Name muss im Dokument eindeutig sein, mit einem Buchstaben anfangen und kann ansonsten nicht wieder benutzt werden. Der Wert ist case-sensitiv (Groß- und Kleinschreibung).
alt
verknüpft einen Text mit einem individuellen Bereich der Map. Wenn die Maus über den Bereich fährt, stellt ein kleines Fenster diesen Text dar.
coords
(x,y)-Koordinaten der maus-sensitiven Bereiche. Die Koordinaten sind der x- und y-Abstand von der oberen linken Ecke (0,0) im Bild. Die Anzahl der Koordinaten hängt von der Form ab, die im shape-Attribut definiert wird.
Wie die Koordinaten in einer Area Map festgelegt werden
rect: top left bottom right
  • x1 x-Abstand von der linken oberen Ecke
  • y1 y-Abstand von der linken oberen Ecke
  • x2 x-Abstand der zweiten Ecke
  • y2 y-Abstand der zweiten Ecke
circle: center radius, wobei center als x,y-Paar angegeben wird
poly: Ecken des Polygons.
shape
geometrische Form der Image Map. Das kann entweder ein Kreis (circle), ein Polygon (poly) oder ein Viereck (rect) sein.
download
Link-Ziel für einen Download
href
URL-Adresse eines Links. Jedes area-Element der Image Map kann einen Link enthalten.
hreflang
Sprache der Ziel-URL
media
Medien oder Dienste, für die das Linkziel optimiert ist
referrerpolicy
no-referrer, no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin-when-cross-origin, unsafe-url
rel
Beziehung zur Ziel-URL: alternate, author, bookmark, help, licence, next, nofollow, noreferrer, prefetch, prev, search, tag
target
gibt an, wie der Browser das Fenster für die Ziel-URL öffnen soll:
_blank, _parent, _self, _top, framename
type
Mime-Typ der Ziel-URL
nohref veraltet
gab an, dass der im area-Tag definierte Bereich kein Link ist.
y1 px von oben x1 px von links x2 px von links y2 px von oben