Bildertausch bei Mouseover

SexontheBeach

Grünschnabel
Ich würde gerne ein Mouse Over effect auf meine Seite einbauen.

Wenn man auf ein Bild geht soll ein anderes Angezeigt werden.

Weiß leider nicht wie ich es umsetzen soll..

Gruß SexontheBeach
 
Ich habs hier lokal getestet bei mir ging es...

Beachte mal folgendes:

onmouseover="this.src='bil2.png' "

Beachte wo ' und " stehen...

ausserdem könntest du noch hinzufügen das wenn man vom bild runter geht weider das erste bild zu sehen ist:

onmouseout="this.src='bild1.png'"

Insgesammt würde das so aussehen:

Code:
<img src="bild1" onmouseover="this.src='bild2.png' " onmouseout="this.src='bild1.png'">
 
Moin.
<img src="bild1.png" onmouseover="this.src='bild2.png'"> Glaub ich... Probier das mal.

Der Codeschnipsel funktioniert einwandfrei.

Oder stellt sich das bei dir in abgewandelter Form etwa so dar?
HTML:
<a href="#" onmouseover="this.src='bild2.png'"><img src="bild1.png"></a>
Dann müsste die Javascript-Anweisung richtigerweise so lauten:
HTML:
<a href="#" onmouseover="home.src='bild2.png'"><img src="bild1.png" name="home"></a>
http://on-mouseover.de/script1.htm


Falls du, weil hier im CSS-Forum und nicht im Javascript-Forum angefragt, den Bildertausch mit CSS realisieren möchtest, müsstest du anstelle des <img>-Element Hintergrundbilder verwenden, da die Formatierungssprache CSS keinen Zugriff auf das src-Attribut dieses HTML-Elements besitzt, um darin die Bild-Resource zu ändern.

Mein CSS-Tutorial CSS-Rollover & CSS-Rollover - Teil 2 mit den angehängten Beispielen zum Download dürfte dir da eine Einstiegshilfe zum Studium dieser Technik sein.

mfg Maik
 
Zurück