Gaaanzkurz-Anleitung "clickable image maps"

[Thilo]

Nur für den Fall, dass irgendwer aus irgendeinem Grund (z.B. für die Seite einer Baronie / eines Fürstentums) eine Karte erstellen will, die anklickbar ist, hier eine Kurzanleitung.

1) Ihr benötigt ein Program, um image maps zu erstellen. Ich empfehle das kostenlose "Image Mapper 1.0 ": http://www.tomaweb.com/image-mapper.asp

2) Image Mapper starten, mit File / Load Image die betreffende Grafik einladen.

3) Nun die einzelnen anklickbaren Regionen einzeichnen. Man kann kreisförmige, rechteckige und polygone  Bereiche zeichen.
Für Karten wird man wohl meistens mit polygonen Flächen arbeiten. Also das Polygon Tool aus der Werkzeugleiste auswählen und dann in der Karte die Eckpunkte des Bereches anklicken, der anklickbar sein soll.

4) Nach dem letzten Punkt des Polygons das "Deselct" Tool (der weisse "Mauszeiger") anwählen und dann erscheint ein kleines Fenster in den man die Felder "Area Name" und "Destination URL" eingeben sollte.

5) "Area Name" ist ein frei Wählbarer Name für den Bereich. Der erscheint im Internetbrowser, wenn ihr mit der Maus über den Bereich fahrt und dort einen Augenblick stehen lasst.
Als Beispiel kann man dort z.B. "Kronmark" eintragen, wenn der Markierte Bereich die Kronmark ist.

6) "Destination URL" ist die Adresse der Seite, die bei einem Klick in den Bereich aufgerufen werden soll.

7) Nachdem durch mehrfaches Widerholenen der Schritte 3-6 alle gewünschten Bereiche definiert und mit einem Link versehen ist, in der Werkzeugleiste auf den "HTML" Button klicken. Man bekommt dann den HTML Code angezeigt, den man dann per Copy & Paste auf die Webseite übernehmen kann.
DAbei ggf. den LInk im IMG Tag auf die korrekte Adresse der Kartengrafik korrigieren.

Beispiel:

Code Auswählen Erweitern

<img src="Koenigreich_Galladoorn_Freigestellt_Wappen_klein2.gif" usemap="#Koenigreich_Galladoorn_Freigestellt_Wappen_klein2" border="0">

<map name="Koenigreich_Galladoorn_Freigestellt_Wappen_klein2">
<area shape="poly" coords="285,33,323,126,306,153,319,195,272,203,238,226,216,221,217,186,196,163,185,136,156,128,177,92,236,75,275,37,285,34" href="http://drachenreiter.de/galladoorn/waldbrunn" target="">
<area shape="poly" coords="285,32,309,18,347,57,382,59,408,42,431,122,415,179,385,175,361,198,319,197,306,154,323,126,285,35,285,35" href="http://drachenreiter.de/galladoorn/tron" target="">
<area shape="poly" coords="410,43,571,85,661,153,656,230,468,269,417,250,407,209,413,178,431,128,410,43" href="http://drachenreiter.de/galladoorn/rabenmund" target="">
<area shape="poly" coords="658,203,772,334,773,354,632,352,658,205" href="http://drachenreiter.de/galladoorn/dornengrund" target="">
<area shape="poly" coords="654,230,631,353,621,387,511,381,498,360,453,363,467,271,654,231" href="http://drachenreiter.de/galladoorn/erbnacht" target="">
<area shape="poly" coords="620,388,614,416,626,466,609,485,574,481,539,548,456,543,451,565,397,565,397,531,371,492,391,403,431,397,454,366" href="http://drachenreiter.de/galladoorn/zwingern" target="">
<area shape="poly" coords="388,415,371,492,397,531,399,565,334,563,317,591,302,600,286,582,164,570,138,550,93,485,92,445,181,445,237,402,337,375,389,415" href="http://drachenreiter.de/galladoorn/leutern" target="">
<area shape="poly" coords="156,127,185,135,216,189,216,222,237,226,270,204,319,197,363,197,382,176,413,177,419,252,469,269,453,358,433,397,387,415,339,373,236,399,186,440,177,416,162,416,144,359,150,344,150,327,135,322,121,245,143,216,138,205,134,156,157,131" href="http://drachenreiter.de/galladoorn/kronmark" target="">
<area shape="poly" coords="121,245,132,320,151,326,150,350,142,356,161,414,176,415,185,437,178,443,93,445,66,423,65,386,54,383,51,344,61,343,69,272,119,249" href="http://drachenreiter.de/galladoorn/schwingenstein" target="">
</map>


ciao, Thilo

[Der Thorsten]

Hi Thilo,

Süüüüüüüüüppppäääärp! 

Dank dir!

Da bin ich ja mal gspannt, ob´s bei mir mit der Kharkov-Karte klappen wird. 

Gruß,
Thorsten