Image Maps sind eine sehr praktische Angelegenheit: man stelle sich vor, man hat in seinem Webseiten-Layout ein Bild eingearbeitet, und da sollen nun nur bestimmte Bereiche anklickbar sein.
Denkbar wäre dies zum Beispiel bei einer Navigation oder wenn man Details im Bild erläutern will.

Hier kommen Image Maps zum Einsatz.

was brauchen wir?

- Ein Bild (haha, welch Überraschung… *g*), ein Bildbearbeitungsprogramm zum Ermitteln der Koordinaten (Paint recht vollkommen) und eine Prise HTML.

der Code

Zunächst einmal der komplette Code, Erklärungen folgen darunter:

<img src="bild.jpg" usemap="#unserbild" alt="Das Bild mit der Image Map" />
<map id="unserbild" name="unserbild">
<area shape="rect" coords="120, 30, 154, 193"
target="_blank" href="verlinkung.html" alt="Link" />
</map>

So. Zuerst wird das Bild wie gewohnt eingefügt, allerdings ergänzt durch die Angabe usemap=”…”. Hier kann man der Imagemap einen beliebigen Namen verpassen.

Anschließend wird die Image Map geöffnet, dabei entsprechen id und name dem, was man oben als Name für die Map gewählt hat.

Innerhalb der Map werden nun die Bereiche definiert, die anklickbar sein sollen. Dies geschieht über Koordinaten: angegeben in Pixeln, entsprechen die vier Werte dem jeweiligen Abstand vom Bildrand in der oberen linken Ecke angeben, beginnend links oben. Die Area fungiert als Link.

Hier wurde über area shape=”rect” festgelegt, dass es sich um einen rechteckigen Bereich handeln soll – alternativ kann man auch Punkte, Kreise oder Vielecken nehmen:

verschiedene Formen

• Viereck: area shape=”rect” coords=”x1, y1 (1. Koordinate – oben links), x2, y2 (2. Koordinate – unten rechts)”
• Kreis: area shape=”circle” coords=”x,y (Koordinate des Kreis-Mittelpunkts), r (Radius)”
• Vieleck: area shape=”poly” coords=”x1, y1, x2, y2, …., n1, n2″
• Punkt: area shape=”point” coords=”x1, y1″

die Koordinaten ermitteln

Mittels eines Programms wie etwa Paint lassen sich die Koordinaten der einzelnen Punkte bestimmen:
Man öffnet das Bild und fährt dann mit dem Mauszeiger an die jeweilige Stelle. Unten in der Statuszeile erscheint dann eine Angabe der Form 232, 93 – das sind die x- und y-Koordinaten des Punktes, die man dann in genau dieser Form einfügt.