Mehrere Links in einem Bild (ImageMap) ♥♥

Halskette von Oasap Kleid von Mina UK Clutch von Schu(h)tzengel Pumps von Irregular Choice Cardigan von Oasap Image Map



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!

9 Kommentare

  1. Hallo!
    Ich bastel gerade mal wieder an meinem Blog herum, und suche nach einer Möglichkeit mein Seitenelement nach meinen Wünschen zu gestalten. Ich hätte es gerne im Header mit eigener Schrift. Hab schon ne Weile gesucht, finde aber keine wirkliche Hilfe. Mein Gedanke jetzt wäre, euren Tip hier auf mein HeaderImage umzusetzen. Funktioniert das? ... oder wisst ihr wie das geht?
    Hilfe!

    LG
    Anke

    AntwortenLöschen
    Antworten
    1. Ich probier das auch gerade. Links im Header bzw. das Menu in den Header einzubauen. Funktionierts bei dir den schon ? :)

      Löschen
    2. Wie ich auf deinem Blog gesehen habe soll es funktionieren ;) danke für die Sicherheit!!

      Löschen
  2. Vielen Dank! Hat super Funktioniert. Ich habe es verwendet und zu meinen einzelnen Labels zu kommen. Sieht super aus und funktioniert toll.

    AntwortenLöschen
  3. Ein sehr, sehr tolles Tutorial. :) hab das mal für meine Social Media Buttons angewendet. Bleibt nur noch die Frage, wie ich den Abstand nach unten in der Sidebar verkleinern kann :/

    http://justanothercopycat.blogspot.de/

    AntwortenLöschen
  4. Danke, habe es gleich mal ausprobiert. Ist echt super!!
    LG Chia

    AntwortenLöschen
  5. Super Post! Hab's sofort bei meinem neuen Eintrag verwendet, hat klasse funktioniert!
    Dieser Blog hat mir schon sooo weitergeholfen, danke! :)

    Lg, michelloi.blogspot.de :)

    AntwortenLöschen
  6. Hallo, das funktioniert super, dafür erstmal danke! :-)

    Leider wird bei mir unter dem Bild ein großer Abstand zum nachfolgenden Text gelassen. Diese Leerzeilen werden mir im HTML Code aber nicht angezeigt und sobald ich die per Hand lösche, verschwinden die Koordinaten und Links :-( Gibt es dafür eine Lösung? Ich will diesen großen Abstand darunter nicht.

    AntwortenLöschen

Danke für dein Kommentar! Bitte beachte, dass Beleidigungen & Spam ohne Vorwarnung gelöscht werden. Bitte hab Verständnis dafür, dass wir nicht alle Kommentare beantworten können!

Falls ein Tutorial nicht funktioniert hat, dann schreibe bitte in deinem Kommentar genau, was nicht funktioniert & deinen Bloglink. So kann dir besser geholfen werden!

Du möchtest dich direkt an Mira wenden, um ein Problem zu lösen oder ein Design erstellen zu lassen? Dann schaue doch hier vorbei und melde dich!

 
Lass dir dein Blogdesign von mir gestalten!