Donnerstag, 18. Februar 2010

Blog-Tricks: Bild mit Tooltip und Link einfügen

Kostenfrei Schulfreunde finden und Klassentreffen organisieren auf AbiTreff.de
Während meines Blogcandys habe ich ab und zu Anfragen erhalten, wie ich es geschafft habe das Bild so einzufügen, dass beim Berühren mit dem Mauspfeil ein Text erscheint, und man beim Anklicken auf eine Webseite geleitet wird. Das möchte ich euch heute in einem kleinen, unkomplizierten Tutorial (auch für HTML-Noobs ) zeigen. Testet das doch einfach mal bei diesem süßen Mops-Bild: Wenn ihr das Bild oben mit dem Mauscursor berührt, erscheint der Text "Wuff, das kitzelt :-)", und wenn ihr das Bild anklickt, landet ihr auf der Homepage meines Blogs:

HTML-Tutorial: Bild in Blog einfügen mit Tooltip* und Link

* Erstmal zum Verständnis: "Tooltip" heißt der Fachausdruck dafür, wenn beim "Mouseover" (Berühren des Bildes mit dem Mauscursor) ein Text über dem Bild erscheint.
  1. Wenn ihr so ein "multifunktionales" Bild in euren Blog einfügen wollt, müsst ihr den auf dem unteren Bild dargestellten HTML-Code abtippen (oder noch einfacher - hier herunterladen und kopieren, oder ihr kopiert euch das Bild oben einfach in euren Blog, und könnt euch den Code unter "HTML bearbeiten" bequem modifizieren). 
  2. Da ihr ja euer Bild individualisieren wollt (es sei denn, euch gefällt mein "Kitzel-Mops" ), müsst ihr nun einige Änderungen am HTML-Code vornehmen: Was genau, ist auf dem Bild dargestellt: a) Webadresse für Klick-Weiterleitung; b) Tooltip-Text, der beim Mouseover erscheint; c) Webadresse des Bildes (wo ihr es hochgeladen habt) und d)  Bildgröße in Pixeln - also Bildbreite und Bildhöhe. Achtung, Bildbreite 2x eingeben! Und wenn ihr euer Bild kleiner darstellen wollt, könnt ihr entweder die Bildgröße im HTML-Code verringern, oder ihr zieht euch das Bild bei "Verfassen" an den Ecken so groß, wie ihr es haben wollt. Achtet darauf, dass ihr nur den Teil zwischen den "Anführungszeichen" (jeweils markiert) ändert, der Rest muss gleich bleiben!  
  3. Wenn ihr mit dem Bearbeiten des HTML-Codes fertig seid, könnt ihr unter "Verfassen" das Bild noch an die Stelle im Text verschieben, wo ihr haben wollt. Dadurch verändert sich dann natürlich wieder der HTML-Code des Bildes (z.B. steht dann irgendwo ein "float", "margin", etc), also nicht wundern - das muss so!
  4. Jetzt testet mal, ob Tooltip- und Linkfunktion funktionieren, wenn nicht, habt ihr beim 2. Schritt irgendwo etwas verkehrt gemacht...

Ich hoffe diese kleine Anleitung war für euch verständlich? Über Kommentare würde ich mich freuen.

Kommentare:

  1. huhu
    also ich mache schon seit ner weile meine ebay auktionen mit html und so, aber deine anleitung kapiere ich trotzdem nicht. was muss ich abtippen? welches bild kopiere ich mir wie wo hin? hm, schade. aber trotzdem danke, du hast es versucht. es liegt an meinem armen alten gehirn...

    AntwortenLöschen
  2. huhu, habs auch nach deiner anleitung probiert, aber bei mir hats auch net funktioniert....hab dann ein bild direkt in blogger hochgeladen und versucht den code zu bearbeiten aber das ging gar nicht....dann hab ichs bei directupload hochgeladen und den 5. code bearbeitet. das hat geklappt. hab da einfach die adresse mit meiner ausgetauscht und bei titel meinen wunschtitel eingetragen....aber wie gesagt, mit deiner anleitung hab ichs leider auch nicht hinbekommen

    AntwortenLöschen
  3. Hallo Antje, wie meinst du das, dass du den Code in Blogger nicht bearbeiten konntest? Wenn du im Bereich "HTML" bist, kannst du doch eigentlich alles nach Wunsch ändern...?

    AntwortenLöschen
  4. ja, bearbeiten konnt ich ihn, aber der war so anders wie deiner in der anleitung das ich nicht die "richtigen" stellen gefunden habe zum tauschen....also irgendwie hats auf alle fälle nicht geklappt....

    AntwortenLöschen
  5. wow dankeschön, hat geklappt! :D

    http://tap-and-tack.blogspot.com/

    AntwortenLöschen
  6. also bei mir hats geklappt und ich bin heilfroh das ich endlich weiß wie es geht *freu*

    AntwortenLöschen
  7. Wo genau wird das eingesetzt im HTML Teil?

    AntwortenLöschen
    Antworten
    1. Dort wo du es haben willst!^^ Wenn du z.B. das Bild in deiner Sidebar willst, erstellst du dir unter "Design" einfach ein HTML-Feld an der gewünschten Stelle und fügst den Code dort ein :)

      Löschen
  8. Klappt prima!
    Vielen Dank
    Sina

    AntwortenLöschen
  9. Hi, also ich habs genau nach deiner Anleitung gemacht und es hat super geklappt =D Bin schon fast ein wenig stolz auf mich, dass dank dir mein Blog immer weiter Gestalt an nimmt =D

    AntwortenLöschen
    Antworten
    1. Hey Jay^^ Prima! Dann noch viel Freude beim Blogausbauen :)

      Löschen
  10. Liebe Kathrin,
    vielen Dank für diese Anleitung. Habs Probiert und hat super geklappt. Mir gehts wie Jay, bin sooo stolz auf mich und Dir genauso dankbar.

    LG seven

    AntwortenLöschen
  11. servus kathrin,
    danke für deine anleitung!!!
    hab schon ewig nach einer anleitung gesucht, aber nix wirklich gefunden. werd mir dies gleich mal abspeichern, damit ichs auch das nächste mal wieder weiß *g*
    liebe grüße
    doris

    AntwortenLöschen
    Antworten
    1. Hihi, geht mir auch so - ohne Linkliste ist die To-Do-Liste nur halb so lang ;)

      Löschen
  12. DANKE, du bist ein Schatz! Endlich hab auch ich es geschafft, einen Link mit Bild einzufügen, dank deiner wunderbaren Erklärung! Viele Grüsse irene

    AntwortenLöschen
  13. man lernt nie aus!
    Bilder sagen mehr als tausend Worte...
    Gerne würde man jemanden zeigen was Worte nicht sagen können!
    So geht es uns, mit unseren Ersatzteilen für Haushaltsgeräten!
    Ein Ersatzteil auf einem Bild zu vergleichen ist viel leichter!
    Danke für den Tipp!

    Tom und Elvir

    AntwortenLöschen
  14. vieeeelen lieben dank für deine anleitung!!!!
    wow!!! das ist ja ein erfolgserlebnis! :-)
    lg v

    AntwortenLöschen
  15. OMG!!!! Ich lieeebe Dich!! Du bist einfach genial :)))
    Ich bin sooo happy habe schon soo oft versucht da durch zublicken, nie gelungen :(
    Dank dir werden meine Posts schöner und ordentlicher :)
    Bitte mach weiter so!!! :)

    Love,
    http://eyeloveeyecatcher.blogspot.de/

    AntwortenLöschen
  16. Nein ich muss es noch einmal sagen, Wirklich!!! Du bist ein Engel ich will nicht wissen wieviele Blogger du mit diesen einen Post glücklich machst :))))))
    Du wirst immer meine Nr.1 bleiben!!!

    Love,
    http://eyeloveeyecatcher.blogspot.de/

    AntwortenLöschen
  17. Endlich hab ich gecheckt wie es geht! Danke :) Der Code ist jetzt erstmal abgespeichert :D
    Das macht sovieles einfacher :)
    Liebe Grüße
    Mandy

    AntwortenLöschen
  18. Danke, Danke, Danke !!!! Die Bildchen an meiner rechten Blog-Seite waren (nachdem ich endlich rausgefunden hatte, wie man sie dahin bekommt) riiiieeesig grooooß !!! Ich war schon so verzweifelt und wollte alle wieder löschen, ... dann fand ich deine Bloggerhilfe ... und jetzt ist alles gut !!! Tausendmal Danke !!! GLG Regina

    AntwortenLöschen
    Antworten
    1. Na dann ist doch alles gut. Super gemacht :)

      Löschen
  19. Hallo Kathrin, ich richte gerade meinen ersten eigenen Blog ein. Ich habe ein Bild auf dem PC, was ich nehmen möchte. Daher verstehe ich das mit der "Web-Adresse" des Bildes nicht. Woher nehme ich das? Ansonsten bin ich ganz hibbelig und hoffe, das es klappt. Geht das nur in der Sidebar bei Blogger oder auch direkt in einer "Seite" oder einem "Post" ?

    AntwortenLöschen
  20. Liebe Kathrin,
    endlich klappt es.
    Du hast die erste verständliche Anleitung gemacht. Vielen vielen Dank!!!
    Sabine

    AntwortenLöschen

Ich freue mich immer über eure Kommentare :-)

...und erspare euch die nervige Spambot-Abfrage, indem ich jede Anfrage manuell freischalte. Ach und noch etwas: Kommentare mit Werbelinks und Verstößen gegen die Netikette behalte ich mir vor kommentarlos zu löschen.

Related Posts with Thumbnails