Webfibel

Wissenswertes rund um das Internet & der Webentwicklung

Image Map erstellen – Schnell und einfach!

1. März 2016 Martin Hesse 0 Comments

In einigen fällen kann es vorkommen das man für ein Bild eine Image Map erstellen möchte. Mit dieser ist es möglich Bereiche im Bild zu definieren und diese dann mit Funktionen (JavaScript) oder mit einem Verweis (Link) zu belegen.

Wir möchten euch hier zeigen wie es euch gelingt eine Image Map einfach und schnell zu erstellen.

In GIMP eine Image Map erstellen

Die erste Variante erfolgt mit dem kostenlosen Grafikprogramm GIMP. Wenn ihr dieses bereits auf eurem PC installiert habt, startet dies bitte. Ansonsten ladet es euch von der offiziellen Seite herunter.

Nachdem GIMP gestartet ist öffnen wir unser Bild und gehen im Menü auf „Filter“ -> „Web“ -> „Imagemap“ …

Image Map erstellen mit GIMP

GIMP Image Map Bereich

Unsere Arbeitsfläche mit der Grafik finden wir unter Punkt 1. Um unsere Bereiche zu definieren benötigen wir die Toolbar-Leiste auf der linken Seite unter Punkt 2. In Punkt 3 können wir dann für diese Bereiche unsere Verweise definieren.

Wir wählen nun in der Toolbar-Leiste den rechteckigen Kasten aus und ziehen zwei Bereiche jeweils um das entsprechende Logo herum.

Bereiche definieren

Für jeden gezogenen Bereich erscheint in GIMP da folgende Fenster, in welchem wir angeben können, was mit dem Bereich passieren soll.

Image Map GIMP Bereich-Optionen

Image Map GIMP Bereich-Optionen

Wir möchten nun das das obere Logo auf „www.CREATIONX.de“ geht und das zweite auf „www.google.de“. Dazu schreiben wir unter Punkt 1 unseren Verweis rein und in Punkt 2 für die Suchmaschinen ein passenden ALT-Text.

Haben wir dies für beide Bereiche gemacht dann sollte das GIMP-Fenster wie folgt ausschauen:

Unsere fertige Image Map in GIMP

Unsere fertige Image Map in GIMP

Wir sehen hier in Punkt 1 unsere zwei rechtecke die wir als Bereich definiert haben und in Punkt 2 die zwei passenden Verweise.

Quellcode ausgeben

Passt alles? Dann lassen wir uns jetzt den Quellcode ausgeben für die Image Map. Diesen können wir einsehen in dem wir im Menü auf „Ansicht“ -> „Quelle“ klicken. Meine Ausgabe ist die folgende:

Beachtet bitte wenn ihr dieses in euer Dokument kopiert das Ihr den Pfad zum Bild korrigiert und wenn ihr mehrere Image Maps verwendet benutzt bitte ein eindeutigeren Name für die Image Map, welcher derzeit auf „map“ steht. Das ganze muss dann auch im IMG-Attribut unter „usemap“ entsprechend angepasst werden.

Online-Dienste zum Image Map erstellen

Wir werden euch hier in Zukunft noch weitere Online-Dienste vorstellen, mit denen ihr euch auch eine Image Map erstellen lassen könnt.

#GIMP#Image Map#Image Map erstellen#ImageMap

Previous Post

Next Post

Hinterlasse einen Kommentar

Hinterlasse den ersten Kommentar!

Benachrichtige mich zu:
avatar
wpDiscuz