Image Maps erstellen mit GIMP

Zuletzt aktualisiert: Sonntag, 01. Januar 2017 Geschrieben von Jan Pionzewski

Hast du dich auch schon einmal gefragt, wie du am besten eine Image Map erstellen kannst? In diesem Artikel beschreibe ich, wie du mit dem kostenlosen Grafikbearbeitungsprogramm GIMP ganz einfach Image Maps für deine Webseite erstellen kannst.

 

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, so dass die Besucher durch Klick auf ein bestimmtes Land zu einer entsprechenden Sektion - speziell für dieses Land - weitergeleitet werden. 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, denn 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 und anschließend unter der Kategorie "Web" den Menüeintrag "Imagemap" anklicken. Nun öffnet GIMP ein weiteres Fenster, in der die Image Map schlussendlich erstellt wird.

 

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. Dir wird nur der HTML-Quellcode der Image Map angezeigt. Diesen musst du kopieren und in deine Webseite einbinden.

 

Code-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 muss hochgeladen und der Quellcode in die Website eingebunden werden. Ist beides erledigt, hast du damit deine Image Map erstellt.

 

 

Kommentare  
Nicole 2015-03-02 22:10
Hallo Jan
Wie binde ich das Ganze in Wordpress ein?
Gruss
Nicole
Antworten | Antworten mit Zitat | Zitieren
Jan 2015-03-02 22:18
Hallo Nicole,

ich bin jetzt persönlich kein Wordpress-Exper te. Ich bin mir aber ziemlich sicher, dass der Wordpress-Edito r, mit dem man seine Beiträge auf Wordpress schreibt, auch einen HTML-Editor bietet. Mit diesem lässt sich der in GIMP erzeugte Quellcode in die Website einbinden.
Antworten | Antworten mit Zitat | Zitieren
Rolf 2016-02-15 16:20
Hi Nicole,

ist relativ einfach.
Nur in der Seitenansicht, den Schalter auf "Text" statt "Visuell", dort kannst Du den Code komplett eingeben.
Antworten | Antworten mit Zitat | Zitieren
Peter Kutsch 2015-02-19 12:26
Hat sich erledigt; musste nur noch einmal das Bild einladen.

Super tolles Programm und vielen dank für die Anleitung.

beste Grüße
Peter
Antworten | Antworten mit Zitat | Zitieren
Peter Kutsch 2015-02-19 12:17
Leichte Verzweiflung macht sich breit :-)

ich bin eigentlich in dem glauben alles nach anweisung gemacht zu haben.
Imagemap erstellt; abgespeichert, Quelltext kopiert und in den Quelltext auf der seite kopiert, JPG Bild hochgeladen...
Das Bild bekomm ich nicht angezeigt; jedoch wenn ich mit der Maus über die Stelle fahre, an der das Bild sein sollte, bekommen ich die Links angezeigt.

HILFE BITTE :-)
Antworten | Antworten mit Zitat | Zitieren
kuf 2014-10-09 19:20
Super Anleitung.

Wird die so erstellte ImageMap auch responsiv sein?
Antworten | Antworten mit Zitat | Zitieren
Jan 2014-10-10 17:15
Hallo,

nein, die Image-Map ist nicht wirklich responsiv. Mein Smartphone (zur Referenz: Iphone 5S, mit dem habe ich es gerade getestet) skaliert zwar das Bild selbstständig herunter, aber das würde ich jetzt nicht als "responsives Verhalten" bezeichnen. ;)
Antworten | Antworten mit Zitat | Zitieren
Andrea 2014-05-16 12:42
Hallo, ja, auch mir hat dieser Beitrag sehr geholfen. Nur eine Frage ist bei mir aufgetaucht: Kann das sein, dass ich keine zwei unterschiedlich e Image-Maps auf einer Seite untereinander einbauen kann? Denn immer werden die Links von der oberen Image-Map automatisch auch in der unteren Image-Map aktiviert, obwohl ich dort ganz andere Links eingebaut habe...
Antworten | Antworten mit Zitat | Zitieren
Dirk 2014-02-13 22:04
Hallo Jan,

toller Beitrag, leicht verständlich und gut nachzuvollziehe n. Allerdings bin ich Volldummie ;) und so habe ich einige Zeit gebraucht, bis ich herausgefunde habe, das ich die Bild-URL in den Quellcode anstatt "unbenannt" eintragen muss. Vielleicht könntest Du das in Deinem Beitrag ja noch mit einbauen, dann wäre das absolut perfekt!

Und noch ein kleiner Tip: Bei Wordpress genügt es, wenn der Code in den Text-Bereich (also nicht visuell) des Text-Editors einer Seite oder eines Beitrages eingefügt wird.

Ansonsten wirklich toll beschrieben, damit kann ich jetzt einige tolle Sachen auf meiner Seite verwirklichen, vielen Dank nochmal!
Antworten | Antworten mit Zitat | Zitieren
Domi 2013-08-18 18:51
Schöner Beitrag :) Mit GIMP Imagemaps erstellen, ist wirklich cool. Gibt auch coole Imagemap Generatoren, die man online benutzen kann: z.B. http://imagemap-generator.dariodomi.de/
Antworten | Antworten mit Zitat | Zitieren
Meeelxo 2013-08-15 20:16
wie füge ich den html quellcode in meine website ein? brauche schnell hilfe danke :-)
Antworten | Antworten mit Zitat | Zitieren
Stefan 2013-06-03 22:54
Super Hilfe, vielen Dank für die idiotensichere Beschreibung!
Antworten | Antworten mit Zitat | Zitieren
Kathrin 2013-05-22 17:13
Hallo,
erstmal vielen Dank für die tolle Erklärung. Habe lange nach einer verständlichen Anleitung zur Erstellung einer image map gesucht und diese ist mit Abstand die best!
Allerdings hats bei mir leider nicht ganz geklappt. Es erscheint nicht richtig auf meiner Homepage. Muss ich nur die Grafik (also in der jpg Datei) auf meiner Homepage hochladen oder auch die Datei mit der .map Endung. Die wird nämlich nicht angenommen.
Vielleicht hat ja jemand einen Tipp :)
Antworten | Antworten mit Zitat | Zitieren
Jan Pionzewski 2013-06-05 19:27
Hallo Kathrin,

sorry für die späte Antwort. Aber da ich im Urlaub war und nur eingeschränkt Internet zur Verfügung hatte, ging es leider nicht schneller. ;-)

Zu deiner Frage: Hochladen musst du nur die JPG-Datei. In der Datei mit der .map-Endung findest du den Quellcode, den du in deine Webseite einbauen musst. Die Datei lässt sich dabei mit jedem beliebigen Texteditor öffnen.
Antworten | Antworten mit Zitat | Zitieren
Thomas 2013-05-15 11:55
Super Anleitung. Auch von mir ein DANKE !

Kleiner Hinweis:
Wenn sich Umringe bei der Anlage überschneiden stürzt GIMP ab und alles ist weg. Also darauf achten Schnittmengen zu vermeiden.

Gruß
Thomas
Antworten | Antworten mit Zitat | Zitieren
Bettina 2013-02-11 12:41
Hallo Jan,

toller Beitrag. Ich benötige des öfteren für meine Kunden solche Karten. Ich bin aber mit der Matterie nicht so vertraut und die Zeit sitzt auch einem im Nacken. Ich habe eine Seite www.Image-maps.de im Netz gefunden die so etwas anbieten. Bin ich dort gut beraten? Hat hier jemand Erfahrung mit der Seite?

lG Bettina
Antworten | Antworten mit Zitat | Zitieren
Elroy 2013-05-01 14:13
zitiere Bettina:
Bin ich dort gut beraten?


Sicher wenn du dazu das nötige Kleingeld hast.

Da ich meine Webseiten nur als Hobby betreibe ist das für mich keine Option.

Aber wenn man für Kunden arbeitet und keine Zeit hat geht das schon.
Antworten | Antworten mit Zitat | Zitieren
Frank 2013-01-10 08:20
Beitrag hat mir ebenfalls sehr geholfen. Gibt es eigentlich eine Begrenzung wieviele Links in eine Imagemap eingebaut werden können?
Antworten | Antworten mit Zitat | Zitieren
ToBe 2012-07-16 16:41
hey cooler Beitrag - hat mir sehr geholfen! 8)
Antworten | Antworten mit Zitat | Zitieren
Kommentar schreiben