Image Maps erstellen mit GIMP

Hast du dich auch schon einmal gefragt, wie du am besten eine Image Map erstellen kannst? Mit dem kostenlosen Programm GIMP kannst du ganz einfach Image Maps erstellen. Diese kannst du im Anschluss in deine Website einbinden.

 

Was ist eine Image Map?

So genannte Image Maps sind Grafiken, bei denen mehrere Links zu anderen Bereichen einer Website hinterlegt sind. Ein Beispiel für die Anwendung einer Image Map könnte eine Landkarte sein. Die verschiedenen Länder sind dann jeweils mit einem Link hinterlegt. Die Nutzer können nun mit einem Klick auf ein spezielles Land zur entsprechenden Sektion wechseln. Natürlich gibt es viele weitere Anwendungsbeispiele.

 

Image Map erstellen

Doch wie erstellt man eine solche Image Map nun? Mit dem Grafikbearbeitungsprogramm GIMP lässt sich dies sehr leicht bewerkstelligen. Es bringt die erforderliche Funktionalität bereits von Haus aus mit. GIMP wird unter der GNU-Lizenz vertrieben und kann unter https://www.gimp.org/ kostenlos heruntergeladen werden.

 

Schritt 1: Grafik für die Image Map auswählen und konvertieren

Als erstes öffnest du mit GIMP die Grafik, die du in eine Image Map verwandeln möchtest.
Sobald die Grafik geöffnet ist, kannst du im Hauptmenü von GIMP das Menü „Filter“ auswählen. Gehe anschließend unter der Kategorie „Web“ auf den Menüeintrag „Imagemap“. Nun öffnet GIMP ein weiteres Fenster, in dem du die Image Map schlussendlich erstellst.

 

Schritt 2: Grafik in Image Map umwandeln und Links einfügen

Sobald sich das neue Fenster geöffnet hat, kannst du schon mit dem Erstellen der Image Map beginnen. Dazu bietet dir GIMP in der linken Navigationsleiste eine Auswahl verschiedener Selektionswerkzeuge. Mit deren Hilfe kannst du quadratische oder kreisförmige Auswahlen treffen. Mit dem dritten Symbol besteht die Möglichkeit, einen polygonalen Bereich auszuwählen.

Wählst du mit diesen Werkzeugen nun einen Bereich deines Bildes aus, öffnet sich erneut ein Fenster. In diesem kannst du unter Anderem die URL und eine Beschreibung des Links hinzufügen. Vergleiche dazu auch folgendes Bild:

 

Beispiel einer Image-Map
Beispiel einer Image-Map (bitte auf die Grafik klicken, um sie in voller Größe zu öffnen)

 

Schritt 3: Image Map in Webseite einbinden

Wenn du mit dem Erstellen der Image Map fertig bist, speichere sie mit GIMP ab. GIMP erstellt dabei eine Datei mit der Endung „.map“. Diese Datei musst du öffnen. Unter Windows kannst du dafür z.B. den „Editor“ (der mitgelieferte, einfache Texteditor) verwenden. Der Inhalt der Datei ist der HTML-Quellcode für deine Website. Diesen musst du kopieren und in deine Webseite an der Stelle einbinden, an der du die Image Map haben möchtest.

 

Beispiel:

<img src="brd.jpg" width="1680" height="1050" 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:Jan -->
 <area shape="rect" coords="10,165,337,401" href="http://www.nrw.de" />
 <area shape="rect" coords="10,423,337,627" href="http://www.bawue.de" />
 <area shape="rect" coords="395,167,714,403" href="http://www.berlin.de" />
 </map>

 

Die Grafik musst du vorher noch hochladen. Danach bindest du den Quellcode in die Website ein. Dies geschieht an der Stelle, an welcher die Image Map erscheinen soll. Ist beides erledigt, hast du damit deine Image Map erstellt.

 


Dir gefällt dieser Artikel?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.