Bildwechsel via Hover

Hier möchte ich euch erklären wie man einen Bildwechsel mit Hover realisiert, wo das wechselnde Bild an anderer Stelle dargestellt wird. Diese Methode habe ich selbst schon sehr oft bei meinen Cuties benutzt.

1. Schritt
Als erstes benötigt ihr einen Platzhalter, also das Bild, dass sich bei einem Mouseover wechseln soll. Diesem gebt ihr die ID "DynamischesBild". Positionieren könnt ihr dieses beispielsweise via Div.

2. Schritt
Nun geht es an den eigentlichen Script-Code. In diesem Beispiel werde ich zunächst zwei Hover verwenden, natürlich könnt ihr auch mehrere Hover nutzen.

Damit der Platzhalter nach dem Mouseover wieder seine normale, ursprüngliche Form (s. Schritt 1) annimmt, wird folgender Zusatz im Code benötigt. Dabei muss das gleiche Bild wie beim Platzhalter angegeben werden.

Der vollständige Code sieht also folgendermaßen aus.

3. Schritt
Nun müsst ihr nur noch folgendes in euren Quelltext einbauen. Achtet darauf eure eigenen Urls einzusetzen. Übrigens könnt ihr auch die einzelnen Hover-Bilder mit einem div positionieren.

Zusammenfassend benötigt ihr also folgende Bilder und Urls: