About Tutorialübersicht Labels Header Goodies Tutorialwünsche

Text bei Bildhover, Bilder einbinden mit HTML

Montag, 29. Oktober 2012

Ich möchte euch heute erklären, wie man es macht, wenn man über ein Bild mit der Maus fährt, dass ein Text erscheint. Aber weil ihr ja wissen müsst, wie man die Bilder überhaupt mit HTML einbindet, ist das eben auch noch dabei :)
Damit ihr wisst, was ich meine, hier ein Bild:


Bild einbinden:

Zuallererst braucht ihr eure Bild-URL. Das macht ihr beispielsweise wenn ihr es auf einer Plattform hochladet, (pic-upload.de, foto-hochladen.net, etc) und den 'Hotlink' (d.h. direkter Link zum Bild) kopiert. Oder ihr geht mit der rechten Maustaste auf euer Bild, und dann auf "Bild-URL kopieren"
<img src='BILD URL'>
jetzt geht's weiter, ihr könnt auch noch die Höhe und Breite anpassen:
<img src='BILD URL' width='200' height='100'>
 width -> breite
height -> höhe

wenn ihr die Proportionen beibehalten wollt, empfehle ich euch jeweils nur width ODER height zunehmen. Bloggerbilder in X-Large entsprechen 640px.


Bild mit Text:

Als extra gibt es jetzt noch den sogenannten Bild Titel, wie ihr auf dem Bild sehen könnt.
Wir haben unseren Code:
<img src='BILD URL' width='200' height='100'>
und diesem fügen wir jetzt noch title='TEXT' hinzu:
<img src='BILD URL' width='200' height='100' title='TEXT'>


Und wo füge ich es ein?

1. Sidebar:
HTML/Javascript hinzufügen, und einfügen.

2. Posts:
Dort könnt ihr in euren HTML Teil gehen (wo ihr eure Posts schreibt, links in der Ecke steht Verfassen | HTML und dort auf HTML gehen.) Und dort einfügen.

Wenn ihr aber schon ein Bild eingebunden habt, könnt ihr einfach title da hintersetzen.
z.B:
<img height="400" src="http://4.bp.blogspot.com/-taTKdG-1k5U/UIbyu9yHKzI/AAAAAAAACgQ/A_dvIQp_FqE/s640/DSCN2142.JPG" width="640" title='bokeh'>
das sieht dann so aus:

drüber hovern und fertig!
noch ein schönes halloween :)
Hier übrigens könnt ihr lesen, wie man das bei einem ganz normalen Bild macht.

Kommentare:

  1. Ist zwar jetzt nicht wirklich notwendig, aber ein irgendwie cooles Special das ich noch gar nicht kannte :D

    AntwortenLöschen
  2. Schön & simpel erklärt! :D
    Sehr gut gemacht!! ^^

    AntwortenLöschen
  3. Heyo :) Ich wollte mich nur mal kurz für eure Tutorials bedanken, helfen mir immer sehr weiter, und euer Blog ist klasse - weiter so! :)
    xx

    AntwortenLöschen