CSS, HTML und Javascript mit {stil}

HTML area map

Area Map – Mouse und Touch-Sensitive Bereiche Zeigt eine gefaltete Landkarte

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:

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

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.

Area Map mit mouse-sensitiven und touch-sensitiven Bereichen
Schleswig-Holstein.pngHamburg.pngMecklenburg-Vorpommern.pngNiedersachsen.pngBrandenburg.pngBerlin.pngNordrhein-Westfalen.pngSachsen.pngSachsen-Anhalt.pngThueringen.pngBayern.pngHessen.pngBremen.pngSaarland.pngRheinland-Pfalz.pngBaden-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 kann 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-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; }

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

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

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 SVG-Grafik, 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.

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 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.
y1 px von oben x1 px von links x2 px von links y2 px von oben