OpenStreetmap als Image Map in WordPress

Im deutschsprachigen WordPress Forum bin ich bei einem thread auf Image Maps gestossen. Das ist in der Tat eine schöne Alternative zu einem WP Plugin – wenn man nur eine statische Karte möchte, in der bestimmte Bereiche verlinkt sind. Die Karte kann man bei OpenStreetMap exportieren.

Das Bildbearbeitungsprogramm Gimp bringt schon alles notwendigt mit um mit der exportierten OSM Karte eine Image Map zu erstellen. Ein feines HowTo findet man hier.

Wenn das JPG in Gimp geladen ist, einfach unter Filter den Bereich Web auswählen und dort auf Imagemap gehen. Der folgende Dialog ist eigentlich selbsterklärend. Beim Abspeichern wird eine *.map Datei erstellt, deren Inhalt (ASCII) man einfach in den Quelltext der WordPress Page oder des Artikels ladet.

Das sieht dann ungefähr so aus:

<img src="Datei.jpg" width="350" height="382" border="0" usemap="#map" />
<map name="map">
<!-- #$-:Image map file created by GIMP Image Map plug-in -->
<!-- #$-:GIMP Image Map plug-in by Maurits Rijk -->
<!-- #$-:Please do not edit lines starting with "#$" -->
<!-- #$VERSION:2.3 -->
<!-- #$AUTHOR:MiKa -->
<area shape="poly" coords="193,281,...,284" alt="Austria @ Fotomobil.at" href="http://www.Fotomobil.at/category/austria" />
<area shape="poly" coords="117,282,...,143,285" alt="Germany @ Fotomobi.at" href="www.Fotomobil.at/category/germany" />
<area shape="poly" coords="74,292,...,82,285" alt="Swize @ Fotomobil.at" href="http://www.Fotomobil.at/category/swize" />
</map>

Im konkreten Beispiel habe ich die deutschsprachigen Länder (Deutschland, Österreich und Schweiz) mit den Länder auf Fotomobil.at verlinkt. Einfach im JPG auf eines der drei Länker klicken 🙂





Austria @ Fotomobil.at Germany @ Fotomobi.at Swize @ Fotomobil.at
Posted in tutorial

Leave a Reply

Your email address will not be published. Required fields are marked *

*