4x bewertet

Rollover

von .crazü  |  23.02.2007 um 13:52 h
Tutorial bearbeiten Tutorial löschen
Javascript Anwendungen
Typ: Javascript Anwendungen
Stufe:Einfach
Nun werdet ihr lernen, wie man simple ein Rollover erzeugen kann.
Was ist ein Rollover? Dann schau dir das doch mal an und klick auf das Bild bzw. fahr einfach mit der Maus drüber!

Wie man sowas macht? Ganz einfach :) Benutz einfach folgenden Code :)

<a href="dein link hier" onmouseover="imgname.src='rollover-over.gif';"
onmouseout="imgname.src='rollover.gif';">
<img name="imgname" src="rollover.gif" border="0" alt=""></a>


Zur Erklärung:

Bei imgname kommt das gleiche hin, wie im <IMG> Tag, da der Browser sonst nicht weiß, wo der Code ausgeführt werden soll!
Bei rollover-over.gif kommt der Pfad (mit Namen und so ;)) des Rolloverbilds hin, also das Bild welches beim Drüberfahren erscheinen soll! Dabei ist es egal ob es sich um .gif, .jpg etc. handelt!
Zuletzt gibts du mit rollover.gif das Ausgangsbild an, also das was von Anfang an gezeigt wird :) Dabei ist es egal ob es sich um .gif, .jpg etc. handelt!

Das wars auch schon- bei Fragen einfach fragen ;)



11 Kommentare




Rawrdesign

Schön erklärt (: 6 Blümchen ....
am 22.04.2008 um 14:58 Uhr


tema

Smilie wuhii toll erklärt <3
am 08.12.2008 um 15:48 Uhr


-SnowwhiteQueen-

Beispiellink tooot Smilie
am 03.01.2009 um 22:14 Uhr


Miss_Jennii

Wie bekomm ich das dann in meine Homepage rein?
Muss ich da ne Tabelle machen oder wie?

Der Beispiellink is ausserdem auch tot :/
am 03.02.2010 um 12:30 Uhr


SmaX

Tabelle? Nein, du nimmst einfach den Code fügst den Link und das Bild bzw. die Adressen ein und dann änderst du noch den imagename.. fertig!
am 03.02.2010 um 17:59 Uhr


Miss_Jennii

Naja aber ich will ja nicht, dass das Bild iwo herumfliegt O_o
Wo muss ich das einfügen?
am 03.02.2010 um 20:31 Uhr


Luluko

Du kannst sowas mit CSS-Formationen machen, du gibst den Linkbilder eine Class oder eine ID, jenach dem ob es mehrfach verwendet werden soll, oder nicht.

Dann kannst es entweder wo machen:


<a class=′klassennamen′ href="dein link hier" onmouseover="imgname.src=′rollover-over.gif′;" onmouseout="imgname.src=′rollover.gif′;"> <img name="imgname" src="rollover.gif" border="0" alt=""></a>

-----oder-----

<a id=′IDnamen′ href="dein link hier" onmouseover="imgname.src=′rollover-over.gif′;" onmouseout="imgname.src=′rollover.gif′;"> <img name="imgname" src="rollover.gif" border="0" alt=""></a>

-----oder-----

<ul>
<li id=′name1′><a href="dein link hier" onmouseover="imgname.src=′rollover-over.gif′;" onmouseout="imgname.src=′rollover.gif′;"> <img name="imgname" src="rollover.gif" border="0" alt=""></a><li>

<li id=′name2′><a href="dein link hier" onmouseover="imgname.src=′rollover-over.gif′;" onmouseout="imgname.src=′rollover.gif′;"> <img name="imgname" src="rollover.gif" border="0" alt=""></a><li>
.
.
.
.
am 03.02.2010 um 20:56 Uhr


SmaX

... Das war aber nicht die Antwort auf ihre Frage..

@miss_jennii: Du musst halt den Code einfach in den Inhalt deiner Page einfügen oder in die Navigation da machst du es besser mit Css. Wenn Du positionieren willst, dann erstelle am besten einen Css-Container den Du dann frei positionieren kannst.


MfG SmaX
am 04.02.2010 um 16:23 Uhr


Miss_Jennii

Vielen Dank Smilie
am 04.02.2010 um 17:29 Uhr


Miss_Jennii

also ich kann das nur mit 1 Bild machen :/
am 11.03.2010 um 23:34 Uhr


butterfly

Beispiellink ist leider tot :(
Ansonsten gut erklärt :)
am 03.06.2010 um 19:56 Uhr