CSS, HTML und Javascript mit {stil}

HTML area map

Folded Area Map

HTML-Image Maps oder area maps waren ein Knüller, als kleine GIF-Animationen die frühen Internetnutzer noch begeisterten. Die Image-Map ist ein Bild, das unterschiedlich auf Aktionen des Benutzers antwortet:

Das map-Tag verweist auf ein Bild und das darunter liegende area-Tag unterteilt das Bild in Regionen, die von der Maus und von Scripten getrennt angesprochen werden können.

HTML area unterteilt ein Bild in frei geformte Bereiche, die clientseitigen Image Map oder Area Map. Das sind maus-sensitive Bereiche oder Hot Spots, die durch das href-Attribut zu verschiedenen Linkzielen führen oder Aktionen eines Scripts auslösen.

Image 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 Image Map durch die Koordinaten der Hot Spots beschrieben wird. Als Verbindung zur Image 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 kann ein href-Attribut als Link enthalten.

HTML image 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 Image 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 Image-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 Variaten 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-Elemente sind nur maus-sensitive Bereiche, aber bilden keine Blöcke 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; }

Safari und Chrome setzen keinen blauen Outline-Rahmen, wenn im CSS area { outline:none } notiert ist.

In Internet Explorer funktioniert der Attribut-Selektor – aber erst ab Version IE8.

Responsive Image Map

Eine Image 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.

SVG Area Map

Die Alternative ist eine SVG-Grafik, in der schon der Browser das Verkleinern aller sensitiven Bereiche übernimmt. Image Maps mit SVG müssen inline in den Quelltext gesetzt werden, damit ein Javascript die Elemente der Grafik identifizieren kann.

SVG wird von IE8 nicht unterstützt, so dass Image Maps mit SVG erst ab IE9 angezeigt werden.

Attribute für HTML map

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).

Attribute für HTML area

y1 px von oben x1 px von links x2 px von links y2 px von oben
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 HTML5
Link-Ziel für einen Download
href
URL-Adresse eines Links. Jedes <area>-Tag der Image Map kann einen Link enthalten.
hreflang HTML5
Sprache der Ziel-URL
media HTML5
Medien oder Dienste, für die das Linkziel optimiert ist
rel HTML5
Beziehung zur Ziel-URL: alternate, author, bookmark, help, licence, next, nofollow, noreferrer, prefetch, prev, search, tag
target
Das kennen wir doch noch: target war raus aus der Image Map in XHTML und in HTML5 gibt target wieder an, wie der Browser das Fenster für die Ziel-URL öffnen soll:
_blank, _parent, _self, _top, framename
tyle HTML5
Mime-Typ der Ziel-URL
nohref nicht mehr HTML5
gibt an, dass der im <area>-Tag definierte Bereich kein Link ist. Dann zeigen Browser den Hot Spot der Image Map beim Hovern mit der Maus keinen besonderen Cursor und der Cursor kann nicht durch ein Stylesheet geändert werden.