Tipps & Tutorials, tutorial

ImageMaps – Mehrere Links in einem Bild

Halli Hallo alle miteinander.
Ich bin Myri ausm KreaTief und werde euch heute ein bisschen etwas über ImageMaps erzählen. Also ein Bild in dem mehrere Links integriert sind.
Ein Beispiel wäre mein KreaTief-Header, in dem die ganze Navigation steckt. Unten ein Bildchen davon. =)

In diesem Tutorial erzähl ich euch, wie man das ImageMap allgemein erstellt, dann wie das ganze auch einfacher in Gimp geht und zum Schluss noch, wie ihr das Bild als Header einbinden könnt.
Also: Image Maps.
Ich hab sowas schon mehr als einmal probiert und dabei versucht Bilder zu bauen und die dann irgendwie zusammenzusetzen… was im Chaos und Nichts endete.
Doch bei der Lektüre eines Buches über den ganzen HTML, CSS, Webdesign etc.-Kram, ist mir etwas ins Auge gesprungen, was genau dem entsprach, was ich suchte.

Ein Bild welches zu verschiedenen Links führt, im ‘Fachjargon’ als »ImageMap« bezeichnet.

Der Code:

<img src='BILDLINK' widt='xy' height='xy' border ='0' usemap=#name_der_imagemap'>
<map name='name_der_imagemap'>
<area shape='rect' cords='40.50.130.120' href='Link1'>
<area shape='rect' cords='20.15.60.35' href='Link2'>
<area shape='rect' cords='7.50.45.100' href='Link3'>
</map>

Okay, sieht auf den ersten Blick ziemlich abschreckend aus, ist es aber nicht.
Die gelben Markierungen stehen anstelle der Links, die ihr verwendet. Zu Beginn der Link zu eurem Bild, dann jeweils die Links für das Bild. Grün hinterlegt die Abmessungen eures Bildes in Pixel. Um die geht es nämlich im roten Text.
Wie ihr sehen könnt, stehen da jeweils vier Zahlen mit Punkten, vor jedem Link. Das sind die Koordinaten des Bereichs des Bilder, hinter dem euer Link steckt. Voraussichtlich für die “Klicker” irgendwie markiert, doch eigentlich unsichtbar.
Aber wie kommt man auf diese Koordinaten?
Erinnert ihr euch an die Koordinatensysteme in der Schule? P(x,y)? Genau darum geht es.
Euer Bild stellt das Koordinatensystem dar und die Ziffern jeweils den ersten Punkt des anklickbaren Rechtecks oben links. Die hinteren beiden Zahlen die x- und y-Werte des Endmarkierungspunktes unten rechts.
Folgend grafisch einmal dargestellt:

Okay. Hier eine vergrösserte Version eines Bildes mit der Auflösung 9x8px, dessen Linkbereich zwischen den Punkten P(1;7) und P(4;5) liegen.
Wie ihr sehen könnt, habe ich zwei weitere Rechtecke hinzugefügt inklusive rote Zahlen. Diese Zahlen sind diejenigen, die ihr in den Code schreiben müsst, da man immer von oben und dem linken Rand aus beschreibt. Zu Beginn also die Beschreibung von P(1;7) indem man zuerst die x-Achse dann die y-Achse betrachtet. Also 1.1. Die ersten beiden Buchstaben eingefügt!
Nun zum unteren Punkt. P(4;5). Beschrieben mit 4.3. Und das war’s schon!

Und so sähe dann der Code aus:

<img src='http://bliblablubb.com/iwasanderes/Bild.png' widt='9' height='8' border ='0' usemap=#Beispiel'>
<map name='Beispiel'>
<area shape='rect' cords='1.1.4.3' href='http://dawillichhin.com/Linkbereich.htm'>
</map>

»Warum einfach, wenn’s auch kompliziert geht?« Unter diesen Titel habe ich dieses Tutorial gestellt. So hab ich es gemacht. Doch die Erstellung des ImageMaps geht auch ganz einfach mit Gimp. Also kein langes Zusammentragen der Koordinaten, sondern definitiv eine schnellere Variante. =)
Und wie die geht, folgt nun.

Okay, beginnt damit, dass ihr ein neues Bild in Gimp startet und fangt an die ImageMap zu bauen. (Ich muss hier einfach mal noch den Link der Person lassen, die die besten Scrapbook-Ressourcen überhaupt hat. Bie diesem Stil hab ich diese HeaderNavi schon einige Male gesehen und darum wollt ich meinen eigenen^^)

Sobald das Bild fertig ist, geht auf Filters >Web > Image Map

Ein PopUp öffnet sich. Ihr klickt das Rechteck auf der Linken Seite an und umrahmt damit den ersten Link. Ein Fenster öffnet sich. Wählt oben bei den Tabs “Link” Geht unten auf “WebSite” (sollte eigentlich automatisch so rauskommen) und gebt unten den Link ein, zu dem dieser Bereich führen soll.

Das wiederholt ihr solange, bis ihr alle Stellen mit Linkbereichen versehen habt und dann geht ihr auf View > Source und der Code erscheint. Diesen kopiert ihr.

Wenn ihr eure ImageMap an einer relativ einfachen Stelle haben wollt, beispielsweise unter dem Header als Navigationsleiste, dann fügt ihr den Code einfach in ein HTML-Gadget ein und platziert es unterhalb des Headers.
Soll die ImageMap allerdings den ganzen Header ersetzen, müssen noch zwei Schritte mehr gemacht werden.
Die ImageMap muss oberhalb des Headers platziert werden, was für gewöhnlich nicht geht, also muss der Code verändert werden. Ausserdem muss das Headerbild verschwinden.
Zuerst das “Verschwinden” des Headers. Die einfachste Lösung ist das Ersetzen des Bildes durch ein 1x1px grosses, transparentes Bild, welches “anstelle Titel und Beschreibung” hochgeladen wird.
Das mit dem “über den Header platzieren” wird im HTML gemacht.
Also einfach dorthin wechseln und folgendes suchen:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='HTML4' locked='false' title='' type='HTML'/>
<b:widget id='Header1' locked='true' title='Be KreaTief (Header)' type='Header'/>
</b:section>
</div>

Und dann folgende Änderungen vornehmen:

<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>

Vorlage Speichern und dann zu den Seitenelementen wechseln.
Nun seht ihr, dass ihr auch oberhalb des Headers Gadgets hinzufügen könnt. Und da kommt dann das HTML-Gadget mit dem Code rein. (Ob selbstberechnet (yeah! Myri ist dann stolz auf euch ^^) oder mit Gimp, macht keinen Unterschied ;D)

Und das war’s dann auch schon. Ich hoffe es hilft vielleicht jemandem von euch. =)

Version ohne GIMP findet ihr hier.

Nachtrag:
Ich habe für all diejenigen unter euch, die gerne eine ImageMap mit Hover-Effekt hätten, noch einen Link zu meinem Tutorial dazu. 🙂

134 Comments

  1. Luna ‹3

    17. June 2012 at 15:18

    Wow, die Idee und alles ist wundervoll! 🙂
    Mal schauen, ob ich das auch hinbekomme (wenn/falls ich es ausprobiere ;))

    1. Myri

      17. June 2012 at 15:21

      Dankeschön. Das klappt schon und sonst einfach nochma nachfragen =)

  2. Kuno

    17. June 2012 at 16:32

    myri?! Du bei CPL? 😀

    1. Mara

      18. June 2012 at 14:07

      ich finds cool 🙂

  3. Bastelliese

    17. June 2012 at 18:57

    Ich werde das noch heute Abend probieren (wahrscheinlich beide Methoden); mal schauen, ob ich's hinbekomme. Wäre toll.

    Das CPL-Blog ist einfach eine Wucht, ganz ehrlich! Ich schaue da in letzter Zeit immer wieder mal drauf und hole mir den ein oder anderen Tipp!

    Vielen Dank dafür und macht weiter so! Liebe Grüße aus Berlin

    Gabi

  4. Manuel

    17. June 2012 at 20:55

    das geht? 😀 !! Wow 🙂

    1. Myri

      17. June 2012 at 21:08

      Genau das hab ich auch gedacht, als ich's zum ersten Mal gesehen hab xD Es erleichtert definitiv so einiges ^^

  5. Anonym

    17. June 2012 at 21:11

    Bei mir wird das Bild nicht angezeigt,sondern nur dieses Bild,dass das nicht angezeigt werden kann…

    1. Myri

      17. June 2012 at 21:27

      Kannst du das Problem vielleicht nochmal genauer beschreiben? Hast du es mit Gimp gemacht?
      Dann hast du vielleicht vergessen den Bildlink zu ersetzen.
      Also wenn du den Code von Gimp kopierst, dann ist da einfach nur der Dateiname anstelle des Bildlinks. Du musst das Bild hochladen (am einfachsten einfach im Blog) dann den Link davon kopieren (im HTML-Bereich den Link der nach <a href=" folgt.) und dann einfügen.
      Ich hoffe mal, dass das weiterhilft, sonst nochma fragen. =)

    2. Anonym

      18. June 2012 at 11:35

      Ach,jetzt habe ich's;D Vielen Vielen Dank!Hast du noch eine Idee,wie ich das hinbekomme,dass wenn man auf einen Link geht (also in diesem Bild!) der Hintergrund des ausgewählten Bereiches transparent wird und dann da "HOme" steht?

    3. Myri

      18. June 2012 at 15:40

      Puh, da bin ich jetzt grad bisschen überfragt. Ich würd sagen, da muss man irgendwie nen hover definieren, abr fällt mir grad nicht ein, wie ich das bewerkstelligen würde … Abr ich schau mal nach, ob ich irgendwo was finde, was sich damit kombinieren lässt und schreib dir, sobald ich was weiss.

    4. Myri

      18. June 2012 at 19:41

      So, das thema hat mich jetzt nicht mehr losgelassen. Ich hab jetzt aber rausgefunden, wie man hover definieren kann und gleich mal ein kleines Tut dazu geschrieben: ImageMap mit Hover-Effekt

      Hoffe das hilft weiter.

    5. Ela

      6. January 2014 at 12:07

      Wo genaus soll ich denn den Bildlink in den Code einfügen!?

    6. Myriam Kreatief

      6. January 2014 at 15:29

      Ähm:
      <img src='BILDLINK' widt='xy' height='xy' border ='0'>

  6. *Anna*

    18. June 2012 at 11:30

    Eieiei, das kenne ich doch… sowas musste ich in meiner Abschlussprüfung programmieren ;D Das Aufwendige bei mir war nur, dass die Links nicht viereckig waren und die Koordinaten massig Zahlen umfassten 😉

    Sehr schöne Anleitung, danke 🙂

    Lg Anna

  7. Sisters-Closet, by Lisa

    19. June 2012 at 11:51

    hat mega gut geklappt 🙂 wusste gar nicht das sowas funktioniert 😉

  8. Kirschblüte

    20. June 2012 at 12:56

    super, DANKE!!! so eine anleitung suche ich schon ewig!!!
    jetzt weiß ich endlich wies geht!

  9. Anonym

    20. June 2012 at 14:05

    Geiles Tutorial! Endlich kann ich meinen Header vervollständigen:D

  10. Tonia

    20. June 2012 at 17:46

    Tolles tutorial 🙂 Werd ich gleich ausprobieren, danke !

    Eine Frage hätte ich da aber noch. Bei "Area#1 Settings" gibt es doch noch das eine Menü "JavaScript" wo auch einmal "mouseover" steht. Ich hab mal gehört dass sich durch den Mouseover Effekt die bilder verändern wenn man mit der Maus darüber geht. Stimmt das ? Wenn ja wäre eine Anleitung dazu klasse 🙂

    LG Tonia

    1. Myri

      20. June 2012 at 18:27

      Ich weiss jetzt grad nicht, ob die Frage an mich gerichtet war, aber da sie in meinem Tut war, fühl ich mich jetzt einfach mal angesprochen und schreib dir ne Antowrt. Also ja, Mouseove ist das gleiche wie der "hover" für CSS. Ich hab nicht viel Erfahrung mich JavaScript, aber wenn du das ganze mit CSS machen kannst, kannst du ganz einfach ein Bild hinterlegen, wenn die Mouse drüber fährt. Wenn du mal oben guckst, hab ich noch eine andere Version der ImageMaps verlinkt, dort wird der hover-effekt verwendet. Vielleicht kannst du das irgendwie für deine Bedürfnisse verändern…

    2. Tonia

      21. June 2012 at 20:35

      Oh danke für die schnelle Antwort 🙂 Auch das Tutorial mit dem hover Effekt ist richtig gut erklärt, hat alles super geklappt.

      Danke nochmal

      LG Tonia

  11. Bloglicious ♥

    23. June 2012 at 18:07

    wow, das ist genial! *__* das will ich auch! Werd ich so schnell wie möglich ausprobieren:D
    Noch ne frage:Hast du die Bilder für die ImageMap von der Seite deren Link gepostet hast?
    Kann man die sich da einfach so "runterziehen"?
    Würd mich über eine Antwort freuen 🙂

  12. Theresa

    23. June 2012 at 18:36

    bei mir funktioniert es nicht! ich hab den "source" kopiert und dann als HTML/Java Script eingefügt, aber es sieht nur so aus.. nur der blau-gestreifte balken.. 🙁 http://weitertraeumen.blogspot.de/

    1. Myri

      24. June 2012 at 14:31

      Hast du auch den Link eingefügt? Wenn du das von Gimp her machst, musst du den einsetzen.
      Sonst kopier mal deinen Code hierher, vielleicht find ich den Fehler.

  13. Theresa

    26. June 2012 at 14:32

    also ich habe das was bei "source" im fenster stand einfach als html/Java Script eingefügt, sonst nichts, muss ich da noch was machen?

    1. Myri

      30. June 2012 at 12:11

      Japs, du musst das Bild irgendwo hochladen (blogpost?) und dann den Bildlink ersetzen nach dem "src=" Sonst wird kein Bild angezeigt, nehm ich an. =)

  14. Dani

    30. June 2012 at 11:07

    Kann man den Code zum Einfügen der Image Map auch bei normalen Gadgets (Text) einbinden?

    1. Myri

      30. June 2012 at 12:10

      Ja, kann man. Dazu musst du aber HTML-bearbeiten auswählen, sonst geht's nicht. Aber ansonsten ist das kein Problem =)

    2. Dani

      30. June 2012 at 13:45

      :'( Es zeigt nichts an… Ich habe den Code eingefügt, der ist ja richtig… Habe auch schon vorbei Image Maps gemacht, aber ich habe immer Probleme mit dem Einfügen… Komisch…

    3. Dani

      30. June 2012 at 13:53

      Okay, moment mal. Ich erklär's mal richtig ^.^
      Also ich habe mit Gimp eine Image Map erstellt. Dann habe ich bei Blospot unter Design das Gadget Text ausgewählt und dann HTML. Da habe ich meinen Code eingefügt. Aber das Bild wird nicht angezeigt…

    4. Myri

      30. June 2012 at 15:34

      Hast du nach "src=" auch den Link zu deinem Bild eingefügt? Das muss gemacht werden, Gimp schreibt da einfach nur Bildname.Bildendung rein. Den Link muss man dann noch manuell einfügen.
      Dann sollte das mit der Problematik geklärt sein. =)

    5. Dani

      30. June 2012 at 17:18

      AHA! Die Bild-URL war drinne, aber das Bild habe ich bei Blogger noch gar nicht hochgeladen ,D DANKE! 🙂

    6. Dani

      30. June 2012 at 17:38

      Okay äämm tut mir Leid, ich sagte ja bereits, dass ich Probleme mit dem Einfügen habe… :/ Wenn ich den Code einfüge, dann geht alles wunderbar, allerdings ist unter dem Bild eine genauso große Lücke… Und wenn ich die mit Entfernen wegmache, dann geht auch die ImageMap weg… Da ist dann nur noch das Bild…
      Schau hier: http://www.herzgeschichten.blogspot.de Da ist in der Mitte das Bild und darunter eine große Lücke…Und wenn ich die wegmache, sind auch die Verlinkungen weg. Herjee xD

    7. Myri

      30. June 2012 at 21:16

      Versuch mal den Code unterhalb der Bildverlinkung ist, oberhalb des Bilds hinzumachen.
      Liegt wahrscheinlich eben doch am Text-Gadget. Ich würd wirklich empfehlen es in einem HTML zu machen, da wird nicht jede Zeile als Inhalt dargestellt.

    8. Dani

      1. July 2012 at 10:05

      Oh Wahnsinn. Auf einmal geht es wunderbar im HTML/Java Gadget. ^.^ Nun aber wirklich DANKE 😀

    9. Myri

      1. July 2012 at 12:17

      Freut mich, dass ich helfen konnte =)

  15. cupcatz

    5. July 2012 at 0:34

    jetzt nur noch ne übersetzung für photoshop^^

  16. Resaa.

    9. July 2012 at 15:44

    Tolles Tutorial, alles sehr gut erklärt!
    Hat mir sehr geholfen!
    http://sturmwindundfeenstaub.blogspot.de/

  17. Meli melo

    1. September 2012 at 15:21

    Vielen vielen Dank für dieses Tutorial! Es hat wunderbar funktioniert und ich bin ganz schön glücklich mit dem Ergebnis 🙂 Merciii

  18. book-worm

    3. September 2012 at 9:45

    Ist ja wirklich eine klasse Idee. Problem: Bei mir wird zwar das Bild angezeigt, aber leider sind da keine Links, auf die ich klicken kann?! Obwohl ich ja bei Gimp die Quelle kopiert und eingefügt habe… kannst du mir helfen?
    Liebe Grüße

    1. Myri

      14. October 2012 at 19:33

      Tut mir leid, hab deinen Kommentar erst heute mitbekommen, da ist die Mail wohl untergegangen.
      Kannst du mir vielleicht auch deinen Code schicken?
      Encoder findest du wenn du etwas runterscrollst. Nach dem Konvertieren solltest du es in den Kommentar einfügen können.
      Grüsse
      Myri

  19. Nele

    15. September 2012 at 11:12

    Es hat eigentlich super funktioniert, nur ist mein Menü jetzt total verpixelt. Weißt du woran das liegen könnte?
    Ich habe das mit Gimp gemacht, und wie du allen anderen oben schon geraten hast, den link vom hochgeladenen Bild anstatt des Bildnamens eingefügt. Es hat auch die richtige Größe, wurde also nicht einfach nur verzogen, weil es zu klein ist. Ich verzweifle gerade ein bisschen. 😀
    Falls du nicht verstehst, was ich meine: guck's dir an

    1. Myri

      15. September 2012 at 13:50

      Hast du den Link nach dem Bild-Tag genommen? Den, den du brauchst, ist derjenige, der nach dem a-Tag folgt.

      Ein einfaches Bild ist ja im Grunde so aufgebaut:
      <a href="LINK"><img src="LINK" /></a>

      Das heisst also du musst den ersten Link kopieren. Den Fehler den zweiten zu nehmen hab ich auch schon einige Male gemacht…

      Ich hoff du verstehst was ich meine =)

      Viel Glück^^

      Btw, den Header find ich voll schön!

    2. Nele

      15. September 2012 at 16:09

      Danke für die schnelle Antwort. 🙂
      Mhm, ja, habe ich. Aber irgendwie wird's immer schlimmer.
      Und danke 🙂

    3. Nele

      15. September 2012 at 16:31

      Mein Bildlink ist auch viel komplizierter.. :O

    4. Nele

      15. September 2012 at 17:03

      So, ich hab's jetzt mit http://www.image-maps.com gemacht, und es geht jetzt. 😀
      trotzdem danke!

    5. Myri

      17. September 2012 at 10:58

      Schlön, dass du eine Lösung gefunden hast =)
      Den Link kannt ich gar nicht, muss ich mir mal angucken.
      Ist aber schon seltsam, dass Blogger nicht gewollt hat
      Hab gestern auch nochmal eine ImageMap gebaut und alles lief normal, ist schon seltsam.

  20. Annies K

    22. September 2012 at 14:26

    Gaaaanz vielen Dank für dieses tolle Tutorial… habs sofort umgesetzt… Danke schön

  21. melamarie

    25. September 2012 at 16:44

    wie bekommt man dieses bild in die mitte der website?

    1. Myri

      25. September 2012 at 18:15

      Meinst du so zentriert?
      Das müsstest du so machen, dass du beim img-Code, also in der ersten Linie den Code so abänderst, dass du noch ein styleattribut hinzufügst. (align: center) Würde dann also so ausschaun:

      <img src='BILDLINK' width='xy' height='xy' border ='0' align='center' usemap=#name_der_imagemap'>

      Ich hoff du hast das gemeint. Sag sonst einfach, was du gemeint hast und ich versuchs dir zu erklären =)

    2. melamarie

      25. September 2012 at 18:42

      ja genau, vielen lieben dank :-)))))

    3. melamarie

      25. September 2012 at 18:49

      aber irgendwie funktioniert es immer noch nicht 🙁

    4. melamarie

      25. September 2012 at 18:51

      ich habe ja jetzt meine imagemap fertig gestaltet und in das hmtl gadget eingefügt. leider sieht das ganze momentan so aus: http://melamv.blogspot.de/ . und ich hätte es gerne zentriert, aber trotz der hilfe funktioniert es nicht

    5. Myri

      25. September 2012 at 19:28

      Hmm… versuchs mal so, dass du das ganze in nen div-Container steckst:

      <div style="align: center !important;"><img src"…></div>

      Und gib auch das align: center im img noch immer an. Das important sollte es eigentlich klar machen, was du willst, aber vielleicht ist der Computer dann doch mal wieder zu doof…

  22. Myri

    25. September 2012 at 19:26

    Hmm… versuchs mal so, dass du das ganze in nen div-Container steckst:

    <div style="align: center !important;"><img src"…></div>

  23. Anna

    30. September 2012 at 9:38

    Bei mir hats auch nur mit image maps geklappt, vorher sah man garnichts 🙁
    Ich hab es einfach benutzt um die ganzen bilderlinks in meiner Seitenleiste aufzuräumen, hab jetzt wieder mehr platz ^^

  24. Lotti

    14. October 2012 at 13:36

    Gutes Tutorial, aber ich finde die Stelle beim HTML nicht. Also da, wo man was ändern muss… 🙁 Würde mich sehr über eine Antwort freuen!

    1. Myri

      14. October 2012 at 14:25

      Oh liegt daran, dass der Title bei mir "beKreatiefHeader" oder so lautet.
      Gib mal nur das ein:

      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

      Das sollte es aufzufinden sein =)

    2. Lotti

      14. October 2012 at 16:23

      Okay, danke. Ich guck gleich mal! 🙂

    3. Lotti

      14. October 2012 at 16:48

      Hm.. ich hab die Stelle jetzt gefunden und ich kann jetzt auch über dem Header ein Gadget einfügen, aber, wenn ich das gemacht habe, sehe ich auch meinem Blog garkeine veränderung. 🙁
      Hast du eine Idee, was ich machen kann?

    4. Myri

      14. October 2012 at 17:52

      Also dieses Gadget ist nur da, damit die ImageMap nachher an der gleichen Stelle angezeigt wird, wie der Header eigentlich. Also ist das Ziel, dass es eben keine Veränderung zum eigentlichen Header geben sollte.
      Ich verstehe nicht genau, was dein Ziel ist, vielleicht gibst du mir einen LInk, damit ich mir anschauen kann, was du gemacht hast und das Problem nachvollziehen kann?

    5. Lotti

      14. October 2012 at 18:23

      Also ich habe es jetzt so verstanden (also mit der Gimpvariante), dass ich als erstes das Bild (welches ich später als Header haben möchte), mit den ganzen Links auf Gimp versorge. Danach ändere ich im html von meinem Blog, dass ich auch über dem eigentlichen Header ein Gadget hinzufügen kann. Dann füge ich das html Gadget hinzu & setzte dort das html der Datei ein.
      Sorry, wenn ich irgendetwas falsch verstanden habe oderso. Ich kenne mich mit html etc. nicht so gut aus… :/

    6. Lotti

      14. October 2012 at 18:24

      Das ist mein 2. Blog & ganz neu. 😀
      lottismiracle.blogspot.de

    7. Myri

      14. October 2012 at 19:19

      Doch, dann hast du's schon richtig gemacht. =)
      Ich hab's mir angesehen.
      Du hast den Link vergessen.
      Also bei dem HTML musst du nach img src=" den Link zu deinem Bild eingeben, sonst wird das nicht gefunden.
      Darum keine Veränderung, jetzt weiss ich, was du gemeint hattest ^^

    8. Lotti

      14. October 2012 at 19:26

      Okay, das habe ich gemacht. Aber man sieht immernoch nichts. :/

    9. Myri

      14. October 2012 at 19:30

      Kopier mir mal bitte deinen Code in einem Kommentar.
      dazu musst du ihn zuerst kurz umwandeln, das kannst du auf meiner Seite machen, runterscrollen, auf HTML-Encoder klicken, eingeben, konvertieren und direkt in den Kommentar.
      Ich schau mal, was ich machen kann.

    10. Lotti

      14. October 2012 at 19:38

      Okay. 🙂

      <img src="http://tinypic.com/r/27zyzv8/6&quot; width="900" height="400" 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:Carlotta Koroll –>
      <area shape="rect" coords="117,236,337,294" href="http://lottismiracle.blogspot.de/search/label/Fotofrafie&quot; />
      <area shape="rect" coords="121,337,302,395" href="http://lottismiracle.blogspot.de/search/label/Beauty&quot; />
      <area shape="rect" coords="293,271,583,376" href="http://lottismiracle.blogspot.de&quot; />
      <area shape="rect" coords="539,238,716,295" href="http://lottismiracle.blogspot.de/search/label/Alltag&quot; />
      <area shape="rect" coords="587,324,763,387" href="http://lottismiracle.blogspot.de/search/label/Fashion&quot; />
      </map>

    11. Myri

      14. October 2012 at 19:53

      Problem gefunden!
      Dein Image-Link, ist kein Imagelink.
      Wenn du auf der Seite schaust gibt es: "Direct Link for Layouts" den braucht du, also:
      http://i45.tinypic.com/27zyzv8.jpg
      Wenn du den ersetzt, sollte es klappen. =)

    12. Lotti

      14. October 2012 at 19:57

      Jaa, es hat geklappt!! 😀 🙂
      Vielen, vielen Dank, dass du dir mit mir so viel Zeit genommen hast!! 🙂 <3

    13. Myri

      14. October 2012 at 20:05

      Super =)
      Bitte bitte^^
      Na ja, ich find, wenn ich ein Tut schreibt, soll nachher jeder im Stade sein es selbst hinzukriegen, wenn da noch etwas Extra-Hilfe nötig ist, bekommt man die aber auch 😀

  25. Eva Kathie

    17. December 2012 at 17:59

    Ihr habt hammer Tutorials 🙂 Ihr habt mein gesamtes Blogdesign gerettet 🙂 Toll gemacht 🙂

  26. Dani

    23. December 2012 at 12:02

    Haha, ich mal wieder x) Obwohl ich alles genauso mache, wie immer, ist mein Headerbild, also einfach nur das Bild total unscharf? Hilfe? xD

    1. Myri

      23. December 2012 at 15:38

      Hast du das Bild auf Blogger hochgeladen und dann den Bildlink aus dem erstellten Code kopiert?
      Wenn dem so ist, hast du wahrscheinlich den Link nach img src=" kopiert. Dort ist eine verkleinerte Version des Bildes. Du musst den Link nach dem a-Tag kopieren, dort ist das Bild in der Originalgrösse.
      Hoffe dass das Problem damit gelöst wird. 🙂
      Grüsse
      Myri

    2. Dani

      24. December 2012 at 10:59

      Hm… Also ich lade das Headerbild im Picasaalbum direkt hoch und kopiere dann davon den Link. Wie komme ich denn an diesen a-Tag?

    3. Myri

      25. December 2012 at 10:09

      Ach so.
      Also wenn du den Link vom Bild kopierst, dann ist das wahrscheinlich nicht in Vollgrösse.

      Der Link schaut dann irgendwie so aus:
      https://lh6.googleusercontent.com/-4MAYn4vu1uU/UKg0M4FKwhI/AAAAAAAAEHs/pQcARyYWUO0/s912/5.gif

      Wichtig ist der Teil, den ich fett kursive markiert habe.
      Das s gibt die Breite des Bildes an.
      Das Bild da, ist eigentlich 1366px breit, wenn ich aber draufklick, bekomm ich das Bild kleiner als im Original angeklickt.
      Um also dein Bild in guter Quali zu haben, musst du dann nur die Zahl nach dem s anpassen. Da das Bild im Original ja so gross ist, müsste es dann nicht mehr verzerrt aussehen.
      Dann brauchst du den a-Tag nicht 🙂

      Liebe Grüsse und frohe Weihnachten
      Myri

    4. Myri

      27. December 2012 at 19:16

      Ich geh mal davon aus, es hat geklappt ^^
      Freut mich. 🙂

      Und bitte gern geschehen. 😀

  27. TH3YC4LLM3_MEL

    27. December 2012 at 21:49

    Alles hat geklappt.. naja, fast. Mein Bild ist, warum auch immer, nicht sichtbar. Die Links funktionieren, aber man sieht gaaaaar nichts. Weißt Du warum? Glaube es liegt an dem "Bildlink" wo es abgespeichert ist. Denn ich hab es ja auf meinem PC abgespeichert und nirgends hochgeladen. Hab es mit Gimp gemacht. Wäre nett, wenn Du mir helfen würdest!

    Liebste Grüße,
    Melanie ♥

    1. TH3YC4LLM3_MEL

      27. December 2012 at 22:11

      Hab' gerade gesehen, dass die Frage schon mal aufgetaucht ist und beantwortet wurde. Danke 🙂

  28. Jan

    28. December 2012 at 11:00

    und wie füge ich das dan zu meinem blog ei? ich habe das jetzt via flickr hochgeladen, aber irgendwie öfnnet er wenn ich das anklicke dann immer flickr:(
    oh man:8 sonst hat alles geklppt, aber jetzt knn ich das irgendwie nicht zusammenfügen.. 🙁

    1. Myri

      28. December 2012 at 12:47

      Ich geh mal davon aus, dass es sich nicht um deinen Header auf deinem Blog handelt, denn dort läuft von mir gesehen alles einwandfrei. Alle Links klappen, wenn ich draufklick. Macht sich alles zwar in nem neuen Tab auf, aber es klappt.
      Vielleicht kannst du deinen Code in einen Kommentar kopieren und ich schau's mir an. Dafür bitte einfach schnell durch den Encoder auf meiner Page jagen und dann die konvertierte Version (ohne Vorschau zu klicken) hier veröffentlichen. Dann kann ich vielleicht helfen.

      Grüsse

      Myri

  29. Denise

    2. January 2013 at 19:24

    Hallo 🙂
    ich hätte auch eine Frage. Und zwar hab ich alles genau so gemacht wie du es gesagt hast, aber wenn man auf die einzelnen Bilder klickt, kommt beim ersten, zweiten und dritten Blick die gleiche Seite, obwohl ich eigentlich 3 verschiedene Links eingegeben habe..
    Ich hoffe du kannst mir helfen 🙂

    1. Myri

      2. January 2013 at 23:58

      Kannst du mir vielleicht deinen Code zeigen?
      Einfach durch meinen Encoder und dann direkt in den Kommentar (ohne Vorschau anzuzeigen) dann kann ich sehen was du gemacht hast und finde den Fehler vielleicht. 🙂

    2. Denise

      11. January 2013 at 18:53

      Danke für deine Antwort, ich habe mittlerweile ganz vergessen hier reinzuschauen, da sich alles geklärt hat, ich hab die Größe vom Bild geändert aber leider nur im html und dadurch konnte es natürlich nicht funktionieren 😀
      Aber vielen Dank für deine Hilfe 🙂

    3. Myri

      12. January 2013 at 13:40

      Okay 🙂
      Schön, dass es sich erledigt hat.

  30. Anonym

    31. January 2013 at 18:58

    Greate poѕt. Keep writing such kind of
    info on your sitе. Im гeally impгesѕеd by it.

    Thаnks for sharing your thoughts οn keyword.

    Regarԁs
    Feel free to surf my webpage : loans for bad credit

  31. Anonym

    24. February 2013 at 8:51

    Hey, tolles Tutorial!
    1 Problem: Die Imagemap ist jetzt nach rechts verschoben.
    Wie kann ich das ändern? 🙂

    1. Myri

      24. February 2013 at 15:00

      Kann ich mir das vielleicht ansehen?
      ich hätt mal gesagt, dass du's entweder mit nem Align machen kannst, oder floaten musst…

    2. Anonym

      4. March 2013 at 16:38

      Hey, habs geändert. Hab also kein Problem mehr. Trotzdem danke.:)

  32. Dario D. Müller

    27. February 2013 at 17:04

    Hi, schöner Beitrag.
    Tipp: Für die Benutzerung von hover-effekten benutze ich persönlich jQuery Maphighlight, welches aus dem Bild ein Canvas erstellt.
    Kann auch einen sehr schönen Generator empfehlen, erleichtert einem die Arbeit des Rumpixels 😉
    http://imagemap-generator.dariodomi.de/

    1. Myri

      27. February 2013 at 19:17

      jQuery erleichtert wirklich einiges, allerdings ist es bei Leuten die JavaScript in ihrem Browser nicht aktiviert haben, dann etwas schwer, vor allem wenn die Navigation dahintersteckt. 🙂
      Den Generator schau ich mir trotzdem an ^^

  33. Anonym

    18. March 2013 at 14:09

    Heyho Leute, hab das mit dem Image-Mapping in Gimp auch für ne Homepage verwendet und funktionierte soweit ganz gut, allerdings hab ich auf der Seite mehrere "Bilder" mit verschiedenen Verlinkungen in den Maps. Anfangs funktioniert auch das, aber nach einigen Klicks wird man bei beiden Maps immer zu den gleichen Links geleitet, obwohl im Code die Verlinkungen unterschiedlich und somit korrekt sind.

    Weiß jemand woran das liegen könnte?

    1. Myri

      18. March 2013 at 15:18

      Hallo Andy 🙂
      Kann ich mir das vielleicht einmal ansehen? Mir fällt es immer relativ schwer Fragen zu beantworten, wenn ich den Code nicht sehen kann. Vielleicht schickst du mir einen Link und oder deinen Code (ich hab weiter oben schon meinen Converter verlinkt).
      Dann kann ich vielleicht helfen, weil momentan kann ich mir das Problem noch nicht genau vorstellen.

      Liebe Grüsse
      Myriam

  34. Anna G

    21. March 2013 at 7:37

    Vielen Dank für dieses Tutorial, ich habe es auch gleich umgesetzt, jedoch ist auch bei mir die Imagemap nach rechts verrückt. Ich habe auch schon Align versucht, jedoch tut sich nix. Vielleicht könnt ihr mir ja helfen 🙂
    Liebe Grüße Anna

    1. Myri

      21. March 2013 at 13:52

      Vielleicht kann ich mir das mal ansehen?
      Link und Code (über meinen Encoder (irgendwo weiter oben schon an die sechs Mal verlinkt)) in einen Kommentar und dann schau ich mal, was ich machen kann 🙂

      Grüsse
      Myri

    2. Anna G

      21. March 2013 at 15:57

      Vielen Dank, ich hoffe ich hab das mit konvertieren und hier einfügen richtig gemacht 🙂
      Link: http://www.imgluecksfieber.blogspot.com

      <img src="http://www.fotos-hochladen.net/uploads/headerbearbeitf84is02lau.jpg&quot; width="1111" height="385" border="0" align="left" 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:anna –>
      <area shape="rect" coords="66,217,182,306" href="http://imgluecksfieber.blogspot.de&quot; />
      <area shape="rect" coords="183,218,286,305" href="http://imgluecksfieber.blogspot.de/p/uber-diesen-blog.html&quot; />
      <area shape="rect" coords="287,220,458,302" href="http://imgluecksfieber.blogspot.de/p/kreatives.html&quot; />
      <area shape="rect" coords="458,221,624,303" href="http://imgluecksfieber.blogspot.de/p/blogroll.html&quot; />
      <area shape="rect" coords="631,207,834,305" href="http://imgluecksfieber.blogspot.de/p/beauty-profil.html&quot; />
      <area shape="rect" coords="836,225,1002,305" href="http://imgluecksfieber.blogspot.de/p/impressum.html&quot; />
      </map>

      lg anna

    3. Anna G

      21. March 2013 at 16:02

      Achso, hier habe ich das Bild größentechnisch nicht mehr angepasst, weil es eben immer rechts überlappt..

    4. Myri

      21. March 2013 at 22:07

      Versuch mal folgendes:

      <img src="http://www.fotos-hochladen.net/uploads/headerbearbeitf84is02lau.jpg&quot; width="1111" height="385" style="border:0; align: left; float: left !important;" usemap="#map" />

      <map name="map">
      <area shape="rect" coords="66,217,182,306" href="http://imgluecksfieber.blogspot.de&quot; />
      <area shape="rect" coords="183,218,286,305" href="http://imgluecksfieber.blogspot.de/p/uber-diesen-blog.html&quot; />
      <area shape="rect" coords="287,220,458,302" href="http://imgluecksfieber.blogspot.de/p/kreatives.html&quot; />
      <area shape="rect" coords="458,221,624,303" href="http://imgluecksfieber.blogspot.de/p/blogroll.html&quot; />
      <area shape="rect" coords="631,207,834,305" href="http://imgluecksfieber.blogspot.de/p/beauty-profil.html&quot; />
      <area shape="rect" coords="836,225,1002,305" href="http://imgluecksfieber.blogspot.de/p/impressum.html&quot; />
      </map>

      Wenn das nicht geht, dann würd ich's mal noch mit margin-left: -50(ist nur ne Schätzung) versuchen, ob das klappt.

    5. Myri

      21. March 2013 at 22:08

      Oder du versuchst das align:left; float:left!important; durch align:center !important; Das hilft vielleicht ebenfalls. Durch das Important, solltest du die Priorität kriegen und eigentlich sollt's hinhauen.

    6. Anna G

      22. March 2013 at 16:35

      Ich hab das Ganze nochmal neu gemacht, jetzt ist die Imagemap schön in der Mitte, aber mit Rand und Hintergrund. Irgendwie lässt der Vorlagendesigner beim Punkt Gadget-Hintergrund das oberste irgendwie außen vor..?
      Vielen Dank für deine Hilfe ♥

    7. Myri

      22. March 2013 at 19:07

      Versuch mal ne class zu definieren für die Map, also einfach class="Mappe"
      und dann fügst du unten drunter das hier ein:

      <style>
      .Mappe{
      background: transparent !important;
      border: 0 !important;
      }
      </style>

      Hoffe es geht jetzt so. 🙂

    8. Anna G

      23. March 2013 at 10:33

      Vielen, vielen Dank!
      Ich musste einfach nur den tap-Hintergrund noch anpassen, ich Dusselchen 🙂

    9. Myri

      23. March 2013 at 14:04

      Haha, ja dann ist gut 🙂
      Freut mich, dass es geklappt hat.
      Schönes WE noch ^^

  35. TM_PageAmatuer

    2. April 2013 at 16:50

    Hallo,

    bin durchs googlechen in diese Diskussion gekommen und habe folgende Sorge : Das Prinzip kenne ich, benutze die circle, und habe aber href-Objekte, die auf der selben Koordinate liegen. Beim Abgreifen im Bild wird dann jeweils nur ein Link angezeigt. Kann ich das irgendwie lösen ?

  36. Mama, Couch and Coach

    22. April 2013 at 17:08

    Danke für diese grandiose Anleitung – hab gerade meine Imagemap als Header hochgeladen und es sieht super aus. Ich freue mich total!!
    Alles Liebe und tausend DAnk
    deine
    Julia

    1. Myri

      22. April 2013 at 17:58

      Gratuliere! Freut mich sehr, dass es geklappt hat 🙂
      Liebe Grüsse
      Myri

  37. Sabrina

    28. April 2013 at 23:33

    hey, ich wollte das Bild in eine seperate Seite hinein, hab das dann auch so gemacht und einfach im Post den Code eingefügt, wenn ich die Seite jetzt aber abrufe wird das Bild nicht angezeigt.
    Wie kann ich das ändern?

    1. Myri

      29. April 2013 at 7:16

      Hast du den Bildlink ersetzt?

    2. Sabrina

      29. April 2013 at 10:10

      Problem hat sich gelöst, danke vielmals 🙂

  38. Lydi♥

    13. May 2013 at 15:55

    Hallo! Ich habe die ImageMap gemacht per GIMP und finde den Code nicht in der HTML (auch nicht mit Strg + F) Funktioniert das Ganze nicht mehr mit dem neuem HTML-Menü? 🙁

    1. Myri

      13. May 2013 at 18:13

      Doch, such nach
      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

      das solltest du finden können. 🙂

    2. Lydi♥

      14. May 2013 at 14:48

      uh ich danke dir so sehr!! ich habe es gefunden ! 🙂 ich bin soo glücklich, daaaaanke! :*

  39. LeoLilie

    3. June 2013 at 14:35

    Hallo, vielen Dank für die super Erklärung. Das mit der Imagemap hat noch einwandfrei funktioniert, aber leider kriege ich das nicht mit dem Gadget über dem Header hin. Ich kann da einfach keins einfügen, obwohl ich den Quellcode wie bei dir umgeändert habe. Wenn ich die Imagemap unterhalb einfüge sieht das ganze so aus:
    http://pinkpuenktchen.blogspot.de (das ist Gott sei Dank nur ein Testblog um das auszuprobieren).
    Weißt du vielleicht wo der Fehler liegen könnte? Hätte ich die Imagemap noch irgendwie besonders abspeichern müssen. Das mit dem Html beim Gadget kann ich doch über Gadget hinzufügen > Html/Java machen oder?
    Wäre super wenn du mir weiter helfen könntest. Danke 🙂

    1. Myri

      3. June 2013 at 15:43

      Also meinst du das mit dem hinzufügen von Gadgets überhalb des Headers, nein das kannst du nicht über ein Gadget machen, dafür musst du in die Vorlage rein und nach dem gezeigten Code suchen und die Zeile ändern, sonst funktioniert es nicht.
      Die ImageMap musst du nicht besonders abspeichern, einfach nur Quellcode von Gimp übernehmen und dann halt noch Bildlink ändern.

    2. LeoLilie

      3. June 2013 at 17:02

      Hallo, also nach wiederholtem aktualisieren ist irgendwann mal dann das Gadget über dem Header aufgetaucht und da habe ich jetzt den Quellcode von der Imagemap rein kopiert. Einziges Problem es zeigt mir das Bild nicht an sondern nur ein kleines blaues Fragezeichen. Ich kapier das nicht so ganz, hätte ich noch irgendwo im Quellcode von der Seite den Bildlinke einfügen muss (und der hat ja kein http:, oder hätte ich das Bild noch irgendwo im Internet abspeichern müssen).
      Somit ist es offiziell ich hab sooooo keinen Plan, aber ich hätte so gerne so einen schönen Header zum klicken.
      Danke Danke schon im vorraus.

  40. LeoLilie

    3. June 2013 at 17:28

    Aaaahhh jetzt habe ichs kapiert. Super, ist auf der Testseite voll schön geworden, jetzt hoffe ich nur es klappt beim "richtigen" Blog auch. Danke dass du so tolle Tutorials machst und wirklich immer gleich hilfst.

    🙂 🙂 🙂

  41. LeoLilie

    3. June 2013 at 20:22

    Doch noch eine Frage, geht es auch, dass nicht jedes mal ein neuer Tab aufgeht, wenn man auf die Imagemap klickt? Sondern einfach weitergeleitet wird…. ???
    Danke 🙂

  42. Chiawen

    5. July 2013 at 13:27

    Super!!! So hab ich endlich meinen Wunsch-Header.
    LG Chia

  43. Michelle

    20. October 2013 at 15:51

    Vielen, vielen Dank! Hat geklappt! Bloß habe ich erst nicht kapiert, wie das mit dem Bildlink funktioniert. Alles perfekt *________*
    Guck mal: http://bymichelleha.blogspot.de/

  44. Gesa Pütz

    4. January 2014 at 15:30

    Ich finde den HTML code nicht :oo nur header inner oder header outer

    1. Gesa Pütz

      4. January 2014 at 15:58

      ok jetzt funktioniert es nur sehe ich meinen Header nicht un es ist sehr viel Abstand zum rest des Blogs ..http://classyraspberry.blogspot.de/

    2. Gesa Pütz

      4. January 2014 at 17:10

      Tut mir wirklich leit, dass ich so viel frage 😀
      also der Header wird jetzt angezeigt. ich habe es einfach mit image maps gemacht..

      Allerdings sitzt er jetzt nicht mittig …

    3. Myriam Kreatief

      4. January 2014 at 17:24

      Wird mittig angezeigt, wenn ich deinen Blog öffne…

  45. pauula

    19. January 2014 at 15:58

    Also, ich habe alles genau so gemacht wie das beschriebenwar. Bei Gimb habe ich die Links eingefügt. Ich habe den Link ersetzt. Man sieht das Bild auch, aber es erscheinen keine Links.

    Das ganze kannst du dir hier anschauen: http://bundw.blogspot.de/
    ich hoffe wirklich du kannst mir helfen:)

    1. Myriam Kreatief

      19. January 2014 at 21:18

      Ich sehe nix. Wo soll ich es sehen können?

  46. ShiYu H-M

    15. February 2014 at 21:02

    Hallo, kann ich die Imagemap auch genau positionieren? Momentan habe ich sie rechts,
    wenn ich sie aber ganz genau positionieren will, kann ich irgendwie genauer angeben, wieviel pixel von links oder rechts Abstand zum Rand sein sollen?

    1. Myriam Kreatief

      9. March 2014 at 12:54

      Ich versteh deine Frage nicht…
      kannst du versuchen das nochmal zu erklären?

  47. Mila ♥

    21. March 2014 at 20:45

    Ich finde den Code den ich verändern soll im Layout nicht. Irgendwelche Ideen?:(

  48. Elena Marie

    17. April 2014 at 11:49

    hey, danke erstmal für dieses tutorial ! das muss eine mega arbeit gewesen sein.
    ich habe die map mit gimp erstellt und bis zum code hat auch alles geklappt … als ich dann den code in ein html gadget eingefügt habe, wurde mir allerdings nicht die map sondern einfach ein rahmen mit dem zeichen, dass das bild nicht angezeigt werden kann, angezeigt. was habe ich falsch gemacht ? LG

  49. Labellogy s

    11. May 2014 at 11:06

    Hab alles so gemacht funktioniert nicht 🙁

  50. Maribel

    16. May 2015 at 13:09

    Ich bin wahrscheinlich todes doof, aber.. kann mir jemand sagen, wie ich eine ImageMap einfach in einen Beitrag bei Blogger einbinden kann? Ich hab echt keinen blassen Schimmer gerade.. DANKE!!

  51. Maria

    18. November 2017 at 14:35

    Hi Mira, super Beitrag vielen Dank. Ich hab noch einen persöhnlichen Tipp, wem das trotzdem zu umständlich ist und keine Programmiererfahrung hat sollte sich unbedingt mal den Online-Bildeditor von Imagemarker anschauen. Eine Bildbeschreibung mit multimedialen Inhalten ist damit ganz einfach zu gestalten. Das interaktive Bild ist sogar Smartphone (responsive) fähig. Wer Interesse hat sollte hier vorbeischauen http://www.imagemarker.com

    LG Maria

Leave a Reply