Image Maps erstellen mit GIMP Drucken E-Mail
Scripting-Tipps - Sonstiges

Haben Sie sich auch schon einmal gefragt, wie man am schnellsten eine Image Map erstellen kann? Also eine Grafik, in der verschiedene Links eingebaut wurden? Nun, mit dem kostenlosen Grafikbearbeitungsprogramm GIMP lässt sich dies sehr leicht bewerkstelligen.
Lesen Sie im folgenden Artikel, wie Sie mit Hilfe von GIMP so genannte Image Maps für Ihre Webseite erstellen können.


So genannte Image Maps sind Grafiken, bei denen mehrere Links zu anderen Bereichen einer Website hinterlegt sind. Ein Beispiel für die Anwendung einer ImageMap könnte eine Länderkarte sein. Die verschiedenen Länder sind dann jeweils mit einem Link hinterlegt, so dass die Besucher durck Klick auf ein besitmmtes Land zu einer entsprechenden Sektion - speziell für dieses Land - weitergeleitet werden. Natürlich gibt es viele weitere Anwendungsbeispiele.

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

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

Als erstes öffnen Sie mit GIMP die Grafik, die Sie in eine Image Map verwandeln möchten.
Sobald die Grafik geöffnet ist, wählen Sie im Hauptmenü von GIMP das Menü "Filter" aus und wählen unter der Kategorie "Web" den Menüeintrag "Imagemap..." aus. Nun öffnet GIMP ein weiteres Fenster, in der Sie die ImageMap erstellen können.

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

Sobald sich das neue Fenster geöffnet hat, können Sie schon mit dem Erstellen der Image Map beginnen. Dazu bietet Ihnen GIMP in der linken Navigationsleiste nun eine Auswahl verschiedener Selektionswerkzeuge: quadratförmig, kreisförmig und die Möglichkeit, einen polygonalen Bereich festzulegen.
Wenn nun ein entsprechender Bereich auf der Karte ausgewählt wurde, öffnet sich ein neues Fenster, in denen URL, etc. eingetragen werden können. Vergleichen Sie dazu folgendes Bild:


ImageMap erstellen mit GIMP

(bitte klicken, um die Grafik in voller Größe zu öffnen)


Schritt 3: Image Map in Webseite einbinden

Wenn Sie mit dem Erstellen der ImageMap fertig sind, können Sie diese mit GIMP abspeichern. GIMP erstellt dabei eine Datei mit der Endung ".map". Diese Datei können Sie z.B. mit dem Texteditor öffnen. Hier finden Sie dann den entsprechenden HTML-Quellcode, den Sie in Ihre Webseite einbinden müssen.

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="www.nrw.de" />
<area shape="rect" coords="10,423,337,627" href="www.bawue.de" />
<area shape="rect" coords="395,167,714,403" href="www.berlin.de" />
</map>


Wenn die Grafik nun hochgeladen und der Quellcode in Ihre Website eingebunden ist, haben Sie Ihre erste, eigene Image Map erstellt.
 

Weitere Artikel: