Mouseover mit einem einzigen Hintergrundbild (CSS Sprites)
06. Mai 2010
Googles neue Webseite nutzt aus Performance-Gründen CSS-Mouseover-Effekte, indem nicht mehrere Bilder geladen werden, sondern nur eins.
Googles neue Webseite nutzt aus Performancegründen CSS-Mouseover-Effekte, indem nicht mehrere Bilder geladen werden, sondern nur eins. In diesem Artikel zeige ich Ihnen, wie auch Sie diesen Effekt für Ihre Webseite nutzen können.
Im Folgenden sehen Sie das von Google für alle Hover-Effekte der Seite eingesetzte Bild.
Bis auf den IE 6 unterstützen inzwischen alle Browser CSS :hover auch auf DIV-Elementen. Es ist deshalb inzwischen üblich, Mouseover-Effekte nicht mehr über Javascript, sondern über CSS zu lösen. Die eleganteste Möglichkeit besteht darin, beim Überfahren das gleiche Bild einfach zu verschieben, sodass der Benutzer nicht von ruckligen Nachladeeffekten gestört wird.
Einfaches Beispiel eines CSS Mouseover-Effektes
Diese Schaltfläche hat nur ein Hintergrundbild, das beim Überfahren mit der Maus einfach um 20 Pixel nach oben geschoben wird.
So sieht das im Beispiel verwendete Hintergrundbild aus. Der graue und der rote Bereich sind jeweils 20px hoch. Horizontal wird das Bild gekachelt.
CSS, um das Hintergrundbild beim Überfahren zu verschieben
.button {color:black;background-image:url(bg-button.png)}
.button:hover {color:white;background-position:0 -20px} Link, dessen Hintergrund über CSS gesteuert wird
<a class="button" href="#">Schaltfläche</a>