Picture Hover

[vegas11]

Hallo ich würde gerne wissen wie ich ein bild in meine Homepage einbringen kann das, wenn ich mit meiner maus drauf gehe ein anderres bild anzeigt.

 

[DarkCross44]

Javascript ist das zauberwort:

<img id="bild" onmouseover="changeImage()" src="lappen.jpg" width="100" height="100" />

Js:

function changeImage() {
document.getElementById('bild').src="Lappen2.png";
}

 

[Trüffelkrieger]

Oder CSS mit einem kleinen Trick: Du legst eine transparente Grafik an, die den Maßen des Bildes entspricht. Dann bindest du dieses in HTML ein und gibst ihm per CSS im Normalzustand das erste Bild als Hintergrund, und beim hovern das andere.

 

[vegas11]

Das mit css versteh ich nicht ganz könntest du das mal als beispiel daarstellen ?

 

[DarkCross44]

Das was Trüffelkrieger geschrieben hat versteht keine sau... ;)

Wenn du CSS willst dann mach es so:
(Habe eine kleiner Beispielseite erstellt)

Hier

Wie habe ich das gemacht?
Ich habe ein Bild in dem beide Bilder vorhanden sind.


Wenn du jetzt mit Hover-Event die Position veränderst (background-position: ...) verschiebt sich das bild :)

Fertig ;)

 

[vegas11]

Owh duuu <3 danke