CSS, HTML UND JAVASCRIPT MIT {STIL}

Das HTML-Tag 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.

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

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

Beispiel: 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 ein Bild vorliegen, in dem das Bundesland farbig hinterlegt ist.

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.

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 können keine CSS-Eigenschaften notiert werden – AREA-Elemente sind nur maus-sensitive Bereiche, aber bilden keine Blöcke im Dokument. Darum verhindert 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; }

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

Attribute für HTML map

name

Zeichenfolge, mit der die Map identifiziert wird. 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

shape

geometrische Form der Image Map. Das kann entweder ein Kreis (circle), ein Polygon (poly) oder ein Viereck (rect) sein.

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.

href

URL-Adresse eines Links. Jedes <area>-Tag der Image Map kann einen Link enthalten.

nohref

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.

accesskey

eine Taste auf der Tastatur, die beim Drücken zusammen mit der Alt-, Strg- oder Befehlstaste einen Link aktiviert.

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.

tabindex

ganze Zahl, die den Rang innerhalb der Tabulatoraufrufe bei der Navigation mit der Tastatur festlegt.

Attribute und Ereignisse für area

Kernattribute	Events für area map
id, title	onclick ondblclick onkeydown, onkeypress, onkeyup onmousedown onmousemove onmouseout onmouseover onmouseup