Bildwechsel bei Mouseover mit CSS

Schon seit sehr langer Zeit gibt es den Artikel „Grafik mit Mausberührung ändern lassen“ hier auf Webmasterparadies.de. In diesem Artikel stelle ich eine Möglichkeit vor, mit JavaScript eine Grafik bei Berührung mit dem Mauszeiger ändern zu lassen. Das ganze ist jedoch noch viel einfacher möglich. Du kannst ebenso einen Bildwechsel bei Mouseover mit CSS erzeugen.

In diesem Artikel zeige ich dir, wie das funktioniert.

 

Einen Bildwechsel bei Mouseover mit CSS erzeugen

Die Methode mit CSS hat mehrere Vorteile. Zum einen nutzt du somit ein JavaScript weniger, was Vorteile in der Performance bringt. Zum anderen funktioniert der Effekt dadurch auch dann, wenn JavaScript im Browser nicht aktiv oder durch ein Plugin geblockt ist.

Es gibt dabei zwei Möglichkeiten, wie du den gewünschten Effekt erzeugen kannst. Ich zeige dir anhand der folgenden Beispiele nun, wie das funktioniert.

 


Anzeige


 

Variante 1: Mouseover mit zwei Grafiken

In dieser Variante benötigst du zwei unterschiedliche Grafiken. Die erste Grafik ist dabei immer sichtbar. Der Browser zeigt die zweite Grafik erst dann an, wenn du mit der Maus den Bereich berührst.

 

Beispiel:

.bildwechsel { width:200px; height:50px; background:url("bild1.jpg"); }
.bildwechsel:hover { background:url("bild2.jpg"); }

 

Erklärung:

Das eben genannte Beispiel fügst du in dein Stylesheet ein. Die Angaben änderst du entsprechend passend auf deine Grafik ab. Auf der Website selbst erzeugt du anschließend ein einzelnes DIV. An dieser Stelle erscheint dann die Grafik.

Das folgende GIF zeigt dir dabei den erzeugten Effekt:

Bildwechsel bei Mouseover mit CSS
Mit CSS kannst du einen Bildwechsel bei Mouseover erzeugen (klicke auf die Grafik, um den Effekt zu sehen).

 

Variante 2: Mouseover mit CSS-Sprite

Den gleichen Effekt kannst du ebenfalls mit einem CSS-Sprite erzeugen. Der Vorteil hier ist, dass der Besucher nur eine Grafik laden muss. Das erhöht die Reaktionsgeschwindigkeit deiner Website und verringert die Ladezeiten.

 

Beispiel:

.bildwechsel { width:200px; height:50px; background:url("sprite.jpg") top right; }
.bildwechsel:hover { background:url("sprite.jpg") bottom right; }

 

Erklärung:

Das genannte Beispiel fügst du ebenso in dein Stylesheet ein. Auch hier erzeugst du auf der Website selbst ein einzelnes DIV, an dessen Stelle dann die Grafik erscheint.

 

Fazit

Die Variante vom Bildwechsel bei Mouseover mit CSS ist definitiv die bessere Alternative im Vergleich zur JavaScript Variante. Deine Website lädt so schneller und du bist nicht abhängig von einer JavaScript Unterstützung des Users.

 

 


Dir gefällt dieser Artikel?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.