✔ Bilder wechseln

[bsirske]

Hallo Leute,


kann mir jemand helfen:
Ich möchte durch mouseover ein bild durch ein Gleichgrosses ersetzen.
Tja ganz einfach eigentlich.

Ich möchte das durch animate verschönern.

Kann mir da einer helfen?

 

[erik s.]

Hast du schon etwas in irgendeine Richtung probiert? Gibt's schon Quellcode? Kommst du an einer bestimmten Stelle nicht weiter?
Nur so als Tipp: Zum Thema Einstieg in Javascript gibt es zig Tutorials und eBooks.
Verwendest du ein JS-Framework oder das "pure" Javscript?

Gruß

 

[Lime]

Es gibt natürlich mehrere Möglichkeiten. Ich beziehe mich jetzt vorerst auf jQuery-Lösungen.

Fall1)
Du hast einen DIV und das Bild ist als Hintergrund festgelegt:

<div id="imgdiv" style="background:url('bg.jpg');width:200px;height:150px;"></div>

Dann kannst du einfach den Hintergrund ändern:

$("#imgdiv").mouseover(function()
{
   $(this).animate("background:url('bg2.jpg');", "1000");
});

Möglichkeit 2)
Du hast einen IMG-Tag mit einem Bild.

<img src="bg.jpg" id="imgdiv" />

Der jQuery-Code ist nicht viel schwerer:

$("#imgdiv").mouseover(function()
{
   $(this).attr("src","bg2.jpg");
});

Grüße