HTML area map • Image Map

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.

<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

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 Einzelbilder der Map werden zu einem Bild zusammengefasst

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.

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.