Imagemaps sind vor allem bei Blogparaden ein beliebtes Mittel, um innerhalb des Bloggerteams schöne Verlinkungen zu erstellen. Aber auch für die interne Verlinkung eines Blogs z.B. bei längerfristigen Projekten, wie einem Blogger ABC sind Imagemaps ein echte Bereicherung.

Viele Blogger scheuen sich jedoch davor, sie zu erstellen. Imagemaps zu erstellen wäre schwierig und es würden dabei häufig Probleme auftreten, so lauten einige der Gerüchte. Ich möchte euch heute das Gegenteil beweisen. Ich zeige euch, wie ihr eine Imagemap mit Gimp erstellen könnt. Ich weiß, Gimp ist bei den meisten ebenso verhasst, wie Imagemaps. Ich mag es auch nicht besonders, aber dieses Tutorial zum Erstellen einer Imagemap mit Gimp wird ganz einfach und für jeden von euch umsetzbar, versprochen! Es sieht länger aus, als es ist, weil ich euch wirklich jeden kleinen Mini-Schritt erklärt habe, damit ihr es auch garantiert und ohne Probleme umsetzen könnt.

Was ist eine Imagemap?

Imagemaps sind Bilder, auf denen einige Bereiche verlinkt werden. Dies ist vor allem bei  Collagen zu Outfits, gemeinsamen Blogprojekten mit mehreren Bloggern oder für die interne Verlinkung von Blogbeiträgen sinnvoll. Natürlich ist das alles auch ohne Imagemap in Form einer Linkliste unter einem Bild umsetzbar, mit einer Imagemap sieht es meist aber einfach schöner aus.

Der größte Nachteil von Imagemaps ist, dass sie mobil nicht oder nur stark verschoben klickbar, also quasi nicht nutzbar sind.

Imagemap erstellen mit Gimp – Videotutorial

Mit diesem kurzen Videotutorial versteht ihr ganz fix, wie einfach man eine Imagemap mit Hilfe des kostenfreien Programmes Gimp erzeugen kann:

Imagemap erstellen mit Gimp – Schritt für Schritt Anleitung

Bild vorbereiten und öffnen

Für die Erstellung der Imagemap ist es extrem wichtig, dass das Bild die Breite eures Postbereichs einnimmt. Ist euer Bild größer, als der Beitragsbereich eures Blogs, wird sich bei der fertigen Imagemap später alles verschieben und die Links werden einfach nie an den richtigen Stellen sitzen.

Deshalb solltet ihr euer Bild immer in die perfekte Größe bringen, bevor ihr es schließlich in Gimp öffnet. Wie ihr seht, zeige ich euch das Tutorial am Beispiel meiner Imagemap für die Blogger ABC Beiträge.

In den Imagemap Bereich wechseln

Um die Imagemap zu erstellen, müsst ihr bei Gimp auf Filter -> Web -> Imagemap klicken:

Anschließend öffnet sich ein neues, kleineres Fenster mit eurem Bild:

Dieses öffnet ihr so weit, bis ihr das Bild in der kompletten Breite sehen könnt (den komischen aussehenden Bereich rechts vom Bild ignorieren wir gekonnt):

Bildbereiche verlinken

Oben links könnt ihr die drei möglichen Formen sehen, mit denen ihr Linkbereiche erstellen könnt. euch steht ein rechteckiges, ein rundes und ein freies Auswahlwerkzeug zur Verfügung:

Ich habe als erstes das freie Werkzeug ausgewählt und die Überschrift „Blogger ABC Blogging through the Alphabet“ verlinkt. Hierfür habe ich als erstes am unteren linken B geklickt und habe dann nach und nach die äußeren Punkte meines gewünschten Bereichs markiert:

Mit einem Doppelklick öffnet sich ein kleines Fenster:

Hier klickt ihr auf Internet-Seite und tragt neben dem „http://“ den Link zu der jeweiligen Seite, die ihr verlinken wollt ein. Wenn euch das zu viel hin und her zwischen Gimp und Browser ist, vergebt ihr einfach ein anderes Wort und könnt den Link dann später noch hinzufügen. Ich gehe auch immer letzteren Weg und habe an dieser Stelle deshalb einfach ABC eingetragen, um zu wissen, dass dieser Code später das komplette ABC verlinken soll.

Fertig ist euer erster, verlinkte Bereich:

Bei einem runden oder rechteckigen Bereich geht ihr äquivalent vor.

Imagemap exportieren

Sobald alle Bereich von euch ausgewählt und verlinkt wurden, könnt ihr die Imagemap exportieren, um den fertigen HTML Code zu bekommen.

Hierfür klickt ihr auf Datei -> Speichern oder auf das bekannte Speichern Symbol und wählt anschließend den Speicherort aus.

Imagemap auf dem Blog einfügen

Nun wurde die Imagemap in eine HTML-Textdatei umgewandelt. Ihr geht nun zu dem gewählten Speicherort und öffnet die Imagemap z.B. mit Word. Anschließend kopiert ihr den kompletten Text / Bereich aus Word…

…und geht auf eurem Blog in den Textbereich, in dem ihr HTML Codes einfügen könnt.

Hier fügt ihr nun eure Imagemap ganz einfach ein:

Damit euer Blog nun versteht, auf welches Bild sich die Codes beziehen, müsst ihr das Bild zu eurer Imagemap nun ganz normal hochladen und seine URL kopieren:

Diesen Link fügt ihr nun in die Imagemap ein, indem ihr den pink unterstrichenen Bereich zwischen den zwei Anführungszeichen löscht

und dafür euren Link einfügt:

Nun müsst ihr noch diese fünf Zeilen mit den Pfeilen löschen:

Solltet ihr bereits in Gimp die URL’s eingesetzt haben, seit ihr nun fertig. Ansonsten müsst ihr für eure Abkürzungen nun noch die URL’s eintragen.

Wir machen das jetzt am Beispiel von ABC. Ihr markiert den Bereich http://ABC (bei meinem Beispiel heißt er so):

und fügt dafür eure URL ein:

So macht ihr jetzt mit all‘ euren Links weiter und fertig ist eure Imagemap:

Am besten probiert ihr in der Vorschau eures Beitrags alle Link ein mal aus, denn es kann immer etwas schief gehen. Ansonsten ist eure erste eigene Imagemap mit Gimp nun fertig erstellt und einsatzbereit.

Alle weiteren Beiträge meines Blogger ABC’s findet ihr in unserer gerade erstellten Imagemap (leider nicht mobil klickbar):