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:
Da der Header nicht mehr auf meiner Page sichtbar ist, habe ich ein DEMO gebaut.
Ausserdem habe ich für all diejenigen unter euch, die gerne eine ImageMap mit Hover-Effekt hätten, noch einen Link zu meinem Tutorial dazu. :)

139 139 Kommentare

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

    AntwortenLöschen
    Antworten
    1. Dankeschön. Das klappt schon und sonst einfach nochma nachfragen =)

      Löschen
  2. Dieser Kommentar wurde vom Autor entfernt.

    AntwortenLöschen
  3. 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

    AntwortenLöschen
  4. Antworten
    1. Genau das hab ich auch gedacht, als ich's zum ersten Mal gesehen hab xD Es erleichtert definitiv so einiges ^^

      Löschen
  5. Bei mir wird das Bild nicht angezeigt,sondern nur dieses Bild,dass das nicht angezeigt werden kann...

    AntwortenLöschen
    Antworten
    1. 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. =)

      Löschen
    2. 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?

      Löschen
    3. 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.

      Löschen
    4. 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.

      Löschen
    5. Wo genaus soll ich denn den Bildlink in den Code einfügen!?

      Löschen
    6. Ähm:
      <img src='BILDLINK' widt='xy' height='xy' border ='0'>

      Löschen
  6. 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

    AntwortenLöschen
  7. hat mega gut geklappt :) wusste gar nicht das sowas funktioniert ;)

    AntwortenLöschen
  8. super, DANKE!!! so eine anleitung suche ich schon ewig!!!
    jetzt weiß ich endlich wies geht!

    AntwortenLöschen
  9. Geiles Tutorial! Endlich kann ich meinen Header vervollständigen:D

    AntwortenLöschen
  10. 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

    AntwortenLöschen
    Antworten
    1. 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...

      Löschen
    2. 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

      Löschen
  11. 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 :)

    AntwortenLöschen
  12. 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/

    AntwortenLöschen
    Antworten
    1. 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.

      Löschen
  13. 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?

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

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

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

      Löschen
    2. :'( 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...

      Löschen
    3. 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...

      Löschen
    4. 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. =)

      Löschen
    5. AHA! Die Bild-URL war drinne, aber das Bild habe ich bei Blogger noch gar nicht hochgeladen ,D DANKE! :)

      Löschen
    6. 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: 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

      Löschen
    7. 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.

      Löschen
    8. Oh Wahnsinn. Auf einmal geht es wunderbar im HTML/Java Gadget. ^.^ Nun aber wirklich DANKE :D

      Löschen
    9. Freut mich, dass ich helfen konnte =)

      Löschen
  15. jetzt nur noch ne übersetzung für photoshop^^

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

    AntwortenLöschen
  17. Vielen vielen Dank für dieses Tutorial! Es hat wunderbar funktioniert und ich bin ganz schön glücklich mit dem Ergebnis :) Merciii

    AntwortenLöschen
  18. 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

    AntwortenLöschen
    Antworten
    1. 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

      Löschen
  19. 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. :D
    Falls du nicht verstehst, was ich meine: guck's dir an

    AntwortenLöschen
    Antworten
    1. 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!

      Löschen
    2. Danke für die schnelle Antwort. :)
      Mhm, ja, habe ich. Aber irgendwie wird's immer schlimmer.
      Und danke :)

      Löschen
    3. Mein Bildlink ist auch viel komplizierter.. :O

      Löschen
    4. So, ich hab's jetzt mit www.image-maps.com gemacht, und es geht jetzt. :D
      trotzdem danke!

      Löschen
    5. 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.

      Löschen
  20. Gaaaanz vielen Dank für dieses tolle Tutorial... habs sofort umgesetzt... Danke schön

    AntwortenLöschen
  21. wie bekommt man dieses bild in die mitte der website?

    AntwortenLöschen
    Antworten
    1. 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 =)

      Löschen
    2. ja genau, vielen lieben dank :-)))))

      Löschen
    3. aber irgendwie funktioniert es immer noch nicht :(

      Löschen
    4. 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

      Löschen
    5. 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...

      Löschen
  22. Hmm... versuchs mal so, dass du das ganze in nen div-Container steckst:

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

    AntwortenLöschen
  23. 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 ^^

    AntwortenLöschen
  24. 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!

    AntwortenLöschen
    Antworten
    1. 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 =)

      Löschen
    2. Okay, danke. Ich guck gleich mal! :)

      Löschen
    3. 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?

      Löschen
    4. 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?

      Löschen
    5. 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... :/

      Löschen
    6. Das ist mein 2. Blog & ganz neu. :D
      lottismiracle.blogspot.de

      Löschen
    7. 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 ^^

      Löschen
    8. Okay, das habe ich gemacht. Aber man sieht immernoch nichts. :/

      Löschen
    9. 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.

      Löschen
    10. Okay. :)

      <img src="http://tinypic.com/r/27zyzv8/6" 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" />
      <area shape="rect" coords="121,337,302,395" href="http://lottismiracle.blogspot.de/search/label/Beauty" />
      <area shape="rect" coords="293,271,583,376" href="http://lottismiracle.blogspot.de" />
      <area shape="rect" coords="539,238,716,295" href="http://lottismiracle.blogspot.de/search/label/Alltag" />
      <area shape="rect" coords="587,324,763,387" href="http://lottismiracle.blogspot.de/search/label/Fashion" />
      </map>

      Löschen
    11. 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. =)

      Löschen
    12. Jaa, es hat geklappt!! :D :)
      Vielen, vielen Dank, dass du dir mit mir so viel Zeit genommen hast!! :) <3

      Löschen
    13. 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 :D

      Löschen
  25. Ihr habt hammer Tutorials :) Ihr habt mein gesamtes Blogdesign gerettet :) Toll gemacht :)

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

    AntwortenLöschen
    Antworten
    1. 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

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

      Löschen
    3. 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

      Löschen
    4. Ich geh mal davon aus, es hat geklappt ^^
      Freut mich. :)

      Und bitte gern geschehen. :D

      Löschen
  27. 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 ♥

    AntwortenLöschen
    Antworten
    1. Hab' gerade gesehen, dass die Frage schon mal aufgetaucht ist und beantwortet wurde. Danke :)

      Löschen
  28. 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.. :(

    AntwortenLöschen
    Antworten
    1. 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

      Löschen
  29. 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 :)

    AntwortenLöschen
    Antworten
    1. 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. :)

      Löschen
    2. 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 :D
      Aber vielen Dank für deine Hilfe :)

      Löschen
    3. Okay :)
      Schön, dass es sich erledigt hat.

      Löschen
  30. 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

    AntwortenLöschen
  31. Hey, tolles Tutorial!
    1 Problem: Die Imagemap ist jetzt nach rechts verschoben.
    Wie kann ich das ändern? :)

    AntwortenLöschen
    Antworten
    1. Kann ich mir das vielleicht ansehen?
      ich hätt mal gesagt, dass du's entweder mit nem Align machen kannst, oder floaten musst...

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

      Löschen
  32. 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/

    AntwortenLöschen
    Antworten
    1. 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 ^^

      Löschen
  33. 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?

    AntwortenLöschen
    Antworten
    1. 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

      Löschen
  34. 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

    AntwortenLöschen
    Antworten
    1. 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

      Löschen
    2. Vielen Dank, ich hoffe ich hab das mit konvertieren und hier einfügen richtig gemacht :)
      Link: www.imgluecksfieber.blogspot.com

      <img src="http://www.fotos-hochladen.net/uploads/headerbearbeitf84is02lau.jpg" 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" />
      <area shape="rect" coords="183,218,286,305" href="http://imgluecksfieber.blogspot.de/p/uber-diesen-blog.html" />
      <area shape="rect" coords="287,220,458,302" href="http://imgluecksfieber.blogspot.de/p/kreatives.html" />
      <area shape="rect" coords="458,221,624,303" href="http://imgluecksfieber.blogspot.de/p/blogroll.html" />
      <area shape="rect" coords="631,207,834,305" href="http://imgluecksfieber.blogspot.de/p/beauty-profil.html" />
      <area shape="rect" coords="836,225,1002,305" href="http://imgluecksfieber.blogspot.de/p/impressum.html" />
      </map>

      lg anna

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

      Löschen
    4. Versuch mal folgendes:

      <img src="http://www.fotos-hochladen.net/uploads/headerbearbeitf84is02lau.jpg" 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" />
      <area shape="rect" coords="183,218,286,305" href="http://imgluecksfieber.blogspot.de/p/uber-diesen-blog.html" />
      <area shape="rect" coords="287,220,458,302" href="http://imgluecksfieber.blogspot.de/p/kreatives.html" />
      <area shape="rect" coords="458,221,624,303" href="http://imgluecksfieber.blogspot.de/p/blogroll.html" />
      <area shape="rect" coords="631,207,834,305" href="http://imgluecksfieber.blogspot.de/p/beauty-profil.html" />
      <area shape="rect" coords="836,225,1002,305" href="http://imgluecksfieber.blogspot.de/p/impressum.html" />
      </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.

      Löschen
    5. 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.

      Löschen
    6. Dieser Kommentar wurde vom Autor entfernt.

      Löschen
    7. 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 ♥

      Löschen
    8. 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. :)

      Löschen
    9. Vielen, vielen Dank!
      Ich musste einfach nur den tap-Hintergrund noch anpassen, ich Dusselchen :)

      Löschen
    10. Haha, ja dann ist gut :)
      Freut mich, dass es geklappt hat.
      Schönes WE noch ^^

      Löschen
  35. 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 ?

    AntwortenLöschen
  36. 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

    AntwortenLöschen
    Antworten
    1. Gratuliere! Freut mich sehr, dass es geklappt hat :)
      Liebe Grüsse
      Myri

      Löschen
  37. 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?

    AntwortenLöschen
  38. 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ü? :(

    AntwortenLöschen
    Antworten
    1. Doch, such nach
      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

      das solltest du finden können. :)

      Löschen
    2. uh ich danke dir so sehr!! ich habe es gefunden ! :) ich bin soo glücklich, daaaaanke! :*

      Löschen
  39. 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 :)

    AntwortenLöschen
    Antworten
    1. 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.

      Löschen
    2. Dieser Kommentar wurde vom Autor entfernt.

      Löschen
    3. Dieser Kommentar wurde vom Autor entfernt.

      Löschen
    4. 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.

      Löschen
    5. Dieser Kommentar wurde vom Autor entfernt.

      Löschen
  40. 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.

    :) :) :)

    AntwortenLöschen
  41. 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 :)

    AntwortenLöschen
  42. Super!!! So hab ich endlich meinen Wunsch-Header.
    LG Chia

    AntwortenLöschen
  43. 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/

    AntwortenLöschen
  44. Ich finde den HTML code nicht :oo nur header inner oder header outer

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

      Löschen
    2. Tut mir wirklich leit, dass ich so viel frage :D
      also der Header wird jetzt angezeigt. ich habe es einfach mit image maps gemacht..

      Allerdings sitzt er jetzt nicht mittig ...

      Löschen
    3. Wird mittig angezeigt, wenn ich deinen Blog öffne...

      Löschen
  45. 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:)

    AntwortenLöschen
  46. 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?

    AntwortenLöschen
    Antworten
    1. Ich versteh deine Frage nicht...
      kannst du versuchen das nochmal zu erklären?

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

    AntwortenLöschen
  48. 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

    AntwortenLöschen
  49. Hab alles so gemacht funktioniert nicht :(

    AntwortenLöschen
  50. 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!!

    AntwortenLöschen
  51. 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 www.imagemarker.com

    LG Maria

    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!

Hinweis: Nur ein Mitglied dieses Blogs kann Kommentare posten.