Der Quelltext

<map name="wexgomap">
<!-- Koordinaten der jeweils anklickbaren Flaechen -->
<area shape="rect" coords="35,80,160,100" href="http://www.wexgo.de/" alt="Eintrag 1" title="Eintrag 1">
<area shape="rect" coords="435,85,565,105" href="http://www.wexgo.de/" alt="Eintrag 2" title="Eintrag 2">
<area shape="rect" coords="450,515,580,535" href="http://www.wexgo.de/" alt="Eintrag 3" title="Eintrag 3">
<area shape="rect" coords="55,625,175,645" href="http://www.wexgo.de/" alt="Eintrag 4" title="Eintrag 4">
</map>


Was wird benötigt:
Editorprogramm – z.B. http://notepad-plus-plus.org/
Grafikprogramm – z.B. http://www.gimp.org/
Bildlizenz einer Landkarte – z.B. http://www.de.fotolia.com/

Arbeitsschritte:
Die Bildgröße der Landkarte (Hintergrundbild) kann frei gewählt werden.
In meinem Beispiel hat das Hintergrundbild (die Karte) 604×794 Pixel.

Sämtliche Einträge (Markierungspunkte) müssen als Grafiken auf dem Hintergrundbild eingefügt werden.

Steuerung durch Koordinaten der anklickbaren Flächen: (map.html)
Der jeweils anklickbare Bereich eines Eintrages auf der Karte wird wird durch die genauen Koordinaten (in pixel) festgelegt.
Ausgangspunkte sind die Kanten des jeweiligen Kartenbildes (Hintergrundbild).

Beispiel anhand eines Eintrages:
coords=”40,60,180,80″

Bedeutet:
- von rechts kann der Bereich ab 40 Pixel bis bis 180 Pixel angeklickt werden. Ergibt eine Buttonlänge von 140 Pixel
- von oben kann der Bereich ab 60 Pixel bis 80 Pixel angeklickt werden. Ergibt eine Bottonbreite von 20 Pixel
Wert 1 (rechts): “40″ – die anklickbare Fläche startet 40 pixel von rechts
Wert 2 (oben): “60″ – die anklickbare Fläche startet 60 pixel von oben
Wert 3 (länge): “180″ – die anklickbare Fläche geht bis 180 pixel von rechts
Wert 4 (tiefe): “80″ – die anklickbare Fläche geht bis 80 pixel von oben

Tipp!
Die genauen Koordinaten lassen sich am besten mit in einem Grafikporgamm ermitteln indem man die Position der gemachten Einträge auf einer Karte ermittelt.

Die Anzahl der Einträge spielt keine Rolle und unterliegt nur dem jeweiligen optischen Empfinden

Der Stylesheet (css) ist nur obligatorisch und bedient die absoluten Grundbedürfnisse der Ansicht, hier müssen keine Anpassungen durchgeführt werden.

Nutzung und Download:
Das Kartenscript kann frei verwendet werden.
Verbesserungsvorschläge und Erweiterungen können gerne mitgeteilt werden.

Inhalt Downloadpacket:
map.html, stylesheet (css), Ordner images (ohne Karte), info.txt

Download

Über einen Link auf www.wexgo.de würde ich mich freuen.