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:
) 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.
- 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).
- 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! - 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!
- 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.
huhu
AntwortenLöschenalso 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...
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öschenHallo 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öschenja, 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öschenSchade :-(
AntwortenLöschenwow dankeschön, hat geklappt! :D
AntwortenLöschenhttp://tap-and-tack.blogspot.com/
Das freut mich =)
AntwortenLöschenhat nich geklappt
AntwortenLöschenalso bei mir hats geklappt und ich bin heilfroh das ich endlich weiß wie es geht *freu*
AntwortenLöschenWo genau wird das eingesetzt im HTML Teil?
AntwortenLöschenDort 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öschenKlappt prima!
AntwortenLöschenVielen Dank
Sina
Hey Sina, das freut mich sehr! :D
LöschenHi, 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öschenHey Jay^^ Prima! Dann noch viel Freude beim Blogausbauen :)
LöschenLiebe Kathrin,
AntwortenLöschenvielen 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
Das freut mich zu hören.
Löschenservus kathrin,
AntwortenLöschendanke 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
Hihi, geht mir auch so - ohne Linkliste ist die To-Do-Liste nur halb so lang ;)
LöschenDANKE, 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öschenGern^^
AntwortenLöschenman lernt nie aus!
AntwortenLöschenBilder 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
vieeeelen lieben dank für deine anleitung!!!!
AntwortenLöschenwow!!! das ist ja ein erfolgserlebnis! :-)
lg v
OMG!!!! Ich lieeebe Dich!! Du bist einfach genial :)))
AntwortenLöschenIch 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/
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 :))))))
AntwortenLöschenDu wirst immer meine Nr.1 bleiben!!!
Love,
http://eyeloveeyecatcher.blogspot.de/
Endlich hab ich gecheckt wie es geht! Danke :) Der Code ist jetzt erstmal abgespeichert :D
AntwortenLöschenDas macht sovieles einfacher :)
Liebe Grüße
Mandy
Ja, nich? Das freut mich! :)
LöschenDanke, 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öschenNa dann ist doch alles gut. Super gemacht :)
LöschenHallo 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öschenLiebe Kathrin,
AntwortenLöschenendlich klappt es.
Du hast die erste verständliche Anleitung gemacht. Vielen vielen Dank!!!
Sabine