Blog

Auf dieser Seite archiviere ich in unregelmäßigen Abständen Code-Schnipsel/Snippets.
Auch wenn ich das hauptsächlich für mich mache,
freue ich mich, wenn andere Menschen davon profitieren können.
Kommentare und Feedback sind erwünscht!

Themen:

Bilderwechsel bei »hover«

Wie bekommt man diesen Bildwechsel Effekt hin, den die meisten Seiten für ihre Bildergalerie nutzen?
Ich habe ein großes und mehrere kleine Bilder. Wenn ich mit der Maus über ein kleines fahre, wird das große Bild durch eben dieses ausgetauscht.

Oft sieht man Bildergalerien, die ganze einfach funktionieren:
Ein großes Bild und eine Auswahl an kleinen Bildern. Bei mouseover über ein kleineres Bild, wird das größere durch ebendieses ausgetauscht.

Demo

Das funktioniert ganz ohne riesige, undurchschaubare Code-Schnipsel!
Es reicht die einfache Javascript Funktion »swap«.

Zunächst benötigt man das große Bild und einen dazugehören Namen:


<img src="Pfad zum großen Bild" name="Name" width="100%">

Darunter werden (in diesem Beispiel) 2 Bilder angezeigt:


<a onmouseover="javascript:swap('Name','Pfad zum kleinen Bild')" width="50%">
   <img src="Pfad zum kleinen Bild">
</a> 
<a onmouseover="javascript:swap('Name','Pfad zum kleinen Bild')" width="50%">
   <img src="Pfad zum kleinen Bild">
</a>

In den head-Bereich der Seite (oder besser, in eine ausgelagerte js-Datei) kommt noch die Javascript-Funktion, damit das Ganze auch funktioniert:


function swap(Bildname,BildURL) { 
   document.images[Bildname].src=BildURL; 
}


17. November 2014

2

2 Kommentare zu “Bilderwechsel bei »hover«”

Williamoner schreibt:

It’s very straightforward to find out any topic on web as compared to books, as I fount this article at this web site.
Legendario.


15. Juni 2015

23:58 Uhr

i-love-webdesign schreibt:

Hallo,
vielen Dank für deinen Beitrag!
Er hat mir sehr geholfen, das Problem auf meiner Webseite zu lösen. Dankeschön! 🙂


24. Juli 2015

13:34 Uhr

Schreib einen Kommentar