Stil mit {stil}

Okt 2008

HTML area und map • Image Map mit maus-sensitiven Bereichen

Das HTML-Tag area unterteilt ein Bild in eine clientseitige Image Map oder Area Map. Das sind maus-sensitive Bereiche oder Hot Spots, die durch das href-Attribut zu verschiedenen Linkzielen führen oder ein Script auslösen könenn.

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

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.

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

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

Zum Seitenanfang