Mehrere Links in einem Bild (ImageMap) ♥♥

Wenn ihr auf das obere Bild auf bestimmte Artikel klickt, kommt ihr auf verschiedene Seiten. Ein Tutorial dazu gab es schon mal (hier) und auch, wie man ein komplettes Bild verlinkt (hier), und dazu gibt es heute diesen Tutorial als Ergänzung.

ImageMap ist ziemlich nützlich. So habe ich zum Beispiel das Menü für Miutiful und die Bilder für die "Blog des Jahres"-Bilder (zB. hier) erstellt.

1. Das Bild

Als erstes erstellt ihr ein Bild. Hier habe ich eine Collage mit Produkten erstellt. Wenn ihr es wie ich in Picasa erstellt habt, ändert dann noch in einem anderen Programm oder beim Hochladen die Bildgröße, sodass sie so groß sind wie in eurem Post. In der Regel sind die Bilder im X-Large 640px breit. Dieser Schritt ist ganz wichtig, falls ihr am Ende nicht nochmal alles von Anfang machen möchtet!

3. Bild hochladen

Jetzt müsst ihr euer Bild hochladen. Flickr, PicasaWebalben, Photobucket, TinyPics, euer eigener Server etc. sind hier möglich. Ich lade meine Bilder hin und wieder auf Abload hoch, hier könnt ihr auch die Größe eures Bildes verändern (wer sich fragt, warum? Lest euch Punkt 1 durch.).

4. Mein Geheimnis

... ist eigentlich kein Geheimnis, sondern eine Seite mit einem Generator, welches mir die Rechnerei und das HTML-Gefummel erspart. Und wer sich jetzt denkt, Mira mag kein HTML-Gefummel? - Ja, nicht jeder Programmierer steht auf unnötige Arbeit, die man sich durch solche tolle Seiten ersparen kann. ;)

Also gehen wir alle auf www.image-maps.com und laden unser Bild im Kästchen "From URL" hoch.

Wer sich jetzt fragt "wie?", hier kommt die Antwort: Den Link eines Bildes kriegt ihr nach dem Hochladen. Meistens ist es ein Kästchen mit dem Titel "URL". Wie dieser Link aussieht? Macht einmal einen Rechtsklick auf das Bild hier und drückt auf "Bild in neuem Tab öffnen". Schon habt ihr nur das Bild im Fenster und in der Adresse folgendes stehen: http://3.bp.blogspot.com/.../Vollbildaufzeichnung+21.12.2012+211230.bmp.jpg
Das ist die URL des Bildes.

Wieso nicht das Bild direkt bei Image-Map.com hochladen? Weil die Seite ausdrücklich betont, dass das nicht gemacht werden soll, da sie keine Bilder speichern wollen. Die Bilder werden zwar hochgeladen und sind sichtbar, die Bilder sind aber nach 2 Tagen nicht mehr sichtbar bzw. gelöscht.

5. Verlinken 
Beim Verlinken markiert ihr im Bild Bereiche und gebt diesen einen Link und einen Titel. Dabei könnt ihr rechteckige und freie Formen nutzen. In diesem Teil müsst ihr etwas aufpassen, wenn ihr keine Firefox 3 User seid. Denn falls ihr aus Versehen die Seite schließt, müsst ihr nochmal von vorne anfangen!

5.1 Rechteckige Formen
Dafür klickt ihr im rechten Teil auf "Rectangle". Ein Kästchen taucht auf das Bild auf, welches ihr vergrößern und verschieben könnt. Schiebt es auf den gewünschten Bereich und vergrößert den Kasten indem ihr die kleinen Quadrate am Rand verschiebt. Tragt den Link unter Link for this map und den Titel unter Title/Alt for this map ein. Danach auf Save und schon habt ihr den ersten Link gesetzt.

5.2 Freie Formen
Dafür klickt ihr rechts im Kasten auf Custom Shape. Dann sieht es etwa so aus wie im Bild unten. Wählt im Kasten eine Farbe (ist aber nicht notwendig) und fangt an, den Teil des Bildes, das verlinkt werden soll, zu markieren. Ich habe hier schon angefangen und das Kleid mit grünen Punkten umrandet. Seid ihr fertig, gebt ihr noch einen Link rechts im orangenen Kasten unter Link und einen Titel unter Title ein. Danach drückt ihr auf Save.

Alles markiert sieht es dann übrigens so aus:

6. Der Code
Den kriegt ihr rechts im Kasten unter Get Your Code. Darauf kommt ihr auf eine Seite, wo ihr euch für irgendetwas anmelden könnt. Das könnt ihr gerne ignorieren und drückt einfach oben auf HTML Code. Dann könnt ihr euren Code markieren (Klick in die Box & Strg+A) und kopieren (Strg+C).

7. In Blogger einfügen
Öffnet euren Post und geht in den HTML-Modus. Dort Fügt ihr euren Code ein (Strg+V).

Und so sieht es dann im Verfassen-Modus aus:

Und wer die Links unten nicht haben möchtet, der löscht im HTML-Code den Teil von <!-- Image map text links - Start - If you do not wish to have text links under your image map, you can move or delete this DIV --> bis <!-- Image map text links - End - -->. Danach könnt ihr anfangen, euren Post zu schreiben, falls dies nicht schon passiert ist! :)

Viel Spaß und Erfolg damit!