Info: Dieser Blog wurde 2014 eingestellt. Dies hat viele Gründe, die an dieser Stelle jedoch nicht relevant sind. Die meisten der hier veröffentlichten Tutorials sind inzwischen nicht mehr aktuell, verlasst euch also nicht auf das hier geschriebene.
Zusammen mit dem Blog sind auch unsere E-Mail, unser ask.fm und unser facebook eingestellt.

Image Maps (Mehrere Links in einem Bild)

Bevor es zu Anfeindungen kommt: Dieses Tutorials stammt ursprünglich von CopyPasteLove, aber da ich es  etwas unverständlich und umständlich fand veröffentlich ich es hier auch nochmal.

Image Map bedeutet, dass ihr in einem Bild mehrere Links markieren könnt. Das ist sehr praktisch für Menüs, wenn ihr dort eine Schriftart benutzen wollt, die von Blogger nicht unterstützt wird.





Zuerst einmal müsst ihr euch ein Menü erstellen. Ich habe dafür Photoshop genutzt, ihr könnt es aber in jedem Programm machen.
Jetzt öffnet ihr das Menü in Gimp.
Dann wählt ihr oben aus der Menüleiste Filter → Web → Imagemap aus. Nun müsste sich ein neues Fenster öffnen, das ungefähr so aussieht:



Wie ihr seht habe ich auch bereits etwas markiert. Links an der Seite seht ihr drei Formen. Ihr wählt eine davon aus (ich würde euch entweder die Ellipse oder das Rechteck empfehlen) und umrahmt damit den Teil des Bildes, in dem ihr euren ersten Link haben wollt. Jetzt öffnet sich noch ein Fenster:



Bei Zu öffnende Adresse, blablabla... gebt ihr den Link ein, zu dem dieser Teil des Bildes führen soll. Bei ALT-Text könnt ihr einen Text einfügen, der erscheint, wenn mit der Maus über den Link fahrt. 
Jetzt bestätigt ihr mich OK.

Das macht ihr mit all euren Links.
Am Ende kann es so aussehen:


Um das Bild einzufügen müsst ihr auf Ansicht → Quelle klicken und den Code, der erscheint kopieren. Den fügt ihr nun in ein neues HTML/Java Script Gadget ein.
Doch was nun? Wenn wir uns unseren Blog ansehen ist dort, wo das Bild sein soll folgendes Bild:


Um das zu beheben müsst ihr euer ursprüngliches Bild, das ihr in Gimp zum Menü gemacht habt, irgendwo hochladen. Zum Beispiel bei fotos-hochladen.netimagebanana.com oder tinypic.com. Jetzt kopiert ihr den Link zu eurem Bild und fügt ihn oben in den Code für euer Menü/eure Image Map ein:


Ich hoffe das war verständlich und hat euch ein bisschen weiter geholfen.

Liebste Grüße,
Paula


Kommentare:

  1. Dieser Kommentar wurde vom Autor entfernt.

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

    AntwortenLöschen
  3. Schönes Tutorial! Ich hab in meinem Header auch eine Imagemap, kenne das schon von CPL :) Aber ich muss zugeben das euers besser erklärt ist und verständlicher ist.

    Um noch etwas hinzuzufügen; Hier ein tolles Tutorial wie man eine hover bei Imagemaps zaubert! Ich finde es toll :)

    AntwortenLöschen
    Antworten
    1. Das Tutorial hab ich mittlerweile verschoben. Für alle die es sich ansehen wollen. ImageMap mit Hover
      Und ja, ich gebe zu, meine Version ist um einiges umständlicher. Müsst ich mal überarbeiten :D

      Löschen
  4. Ich habe das Problem das mein Bild format nicht denen entspricht die ich angeben soll und das kann ich auch nicht endern.Ich habe das doch richtig verstanden dasich das Bild mit den texten hochladen muss oder?

    AntwortenLöschen
  5. bei mir funktioniert das nicht. das bild ist da aber die links funktionieren nicht.
    wisst ihr woran das liegt?
    nach dem ich die ganzen links hinzugefügt habe muss ci dann noch irggendwas machen oder muss ich gleich die quelle kopieren. weil da sind ja dann 2 gimp fenster offen.
    lg

    AntwortenLöschen

Wie schon an anderer Stelle dieser Seite bemerkt, ist der Blog eingestellt. Das bedeutet leider auch, dass wir als Blogautoren auf deinen Kommentar nicht eingehen werden.