Was ist das und wozu braucht man das?

"Alternativ zum Text link oder auch zum Imagelink (das gesamte Bild kann angeklickt werden) bietet sich die Möglichkeit bestimmte Bereiche (hot spots) innerhalb einer Grafik als Verweisfläche zu deklarieren." (Quelle )

Was braucht man dafür?

Der Erste Schritt zu unserer Map (eng. Karte) ist, dass wir ein Bild festlegen. In unserem Image-Tag müssen wir ein spezielles Attribut hinzufügen: "usemap", was so viel bedeutet wie: "benutze Karte". Damit ist gemeint, dass die darauffolgenden Tags dieses Bild benutzen.

<img usemap="#Test" src="meinegrafik.png" width="130" height="130" ... >

Die nächsten einzufügenden Tags sind Anweisungen die dem Browser klar machen was für eine Form die Verlinkung haben soll. Es gibt 3 verschiedene Formen(= shapes).

Rechteck
Das Rechteck hat den Attributnamen "rect", dass kommt von rectangle, dem englischen Wort für Rechteck.

Kreis
Der Attributname vom Kries ist auch aus dem englischen: "circle", das Wort für Kreis.

Polygon
Polygon ist ein Mehreck, also eine Form die mehr gleich 4 Ecken hat. Der Attributname für das Polygon ist poly.

Und wie mach ich das nun?


<map name="Beispiel"><img src="Image.Endung" usemap="#Beispiel">
<area shape="rect" coords="154, 111, 285, 191" href="#" alt="Rechteck" title="Rechteck">
<area shape="circle" coords="77, 73, 61" href="#" alt="Kreis" title="Kreis">
<area shape="poly" coords="26, 247, 86, 186, 163, 283, 55, 280" href="#" alt="Polygon" title="Polygon">
</map>


Wie oben schon erwähnt, gibt es 3 verschiedene Arten von Areas/Bereichen einer Image-Map: Rechtecke, Kreise, Polygone. Diese werden im shape-Attribut mit den Werten rect (für Rechtecke), circle (für Kreise) oder poly bzw. polygon (für Polygone) definiert.
Beispiel:

<area coords="45,50,34,45" shape="rect">
<area coords="3,15,7" shape="circle">
<area coords="15,46,69,50,13,14" shape="poly">

Die Größe und Lage werden dabei mit dem coords-Attribut (coords = engl. Koordinaten) definiert.

Wie stelle ich die Koordinaten fest?

Die einzelnen Arten der Bereiche werden dabei wie folgt mit Koordinaten beschrieben:
Rechteck

Ein Rechteck erhält 4 Koordinatenwerte x1,y1,x2,y2.
x1 - Abstand der linken Ecke oben in Pixel von links
y1 - Abstand der linken Ecke oben in Pixel von oben
x2 - Abstand der rechten Ecke unteren in Pixel von links
y2 - Abstand der rechten Ecke unteren in Pixel von oben

Kreis

Ein Kreis erhält 3 Koordinatenwerte x1,y1,rad.
x1 - Abstand des Kreis-Mittelpunkts in Pixel von links
y1 - Abstand des Kreis-Mittelpunkts in Pixel von oben
rad - Radius des Kreises in Pixel

Polygon

Ein Polygon erhält jeweils 2 Koordinatenwerte für einen Punkt x[n],y[n].
x[n] - Abstand eines Punktes in Pixel von links
y[n] - Abstand eines Punktes in Pixel von oben

Was kann man mit den Koordinaten machen?

Jedem Bereich/Area kann ein Verweis zugewiesen werden. Notieren Sie diese mit dem href-Attribut im einleitenden area-Tag. Als Werte können wie bei Links URL′s oder andere Pfadangeben. Beispiel:
Verweise

<area href="http://www.google.de" coords="45,50,34,45" shape="rect">
<area href="name.htm" coords="3,15,7" shape="circle">
<area href="pfad/name.html#anker" coords="15,46,69,50,13,14" shape="poly">
<area href="name.htm#anker" shape="default">

Was kann ich noch machen?

Jedem Bereich kann ein Text zugewiesen werden. Dieser wird, ebenso wie bei normalen Bildern, angezeigt, sobald der Mauszeiger über dem jeweiligen Bereich ist. Man notiert diesen mit dem alt-Attribut. Beispiel
Bereich-text

<area alt="Link zu einer Suchmaschine" href="http://www.google.de" coords="..........." shape="rect">
<area alt="Bereich ohne Verweis" ...>



Ist ein nicht allzu schweres Thema, dennoch schwer zu erklären ;) Bitte habt Nachsicht

Bei Fragen, Lob, Kritik und verbesserungsvorschlägen stehe ich euren Kommentaren gerne zur Verfügung.