CSS Sprites Tutorial – Flackerfreie CSS Hover Buttons ohne Javascript Preload

Für Menüs, Links oder Buttons bei denen sich das Hintergrundbild beim überfahren (hovern) der Maus ändern soll, ist es üblich das Hintergrundbild einfach mit CSS auszutauschen.

CSS Code:

.link a
{
display:block;
width:50px;
height:10px;
background:url(./img/bild-off.gif);}
 
.link a:hover
{background:url(./img/bild-on.gif);}

Nachteil:
Das Bild wird erst geladen wenn man mit der Maus über den Link fährt. Wenn das Bild dann noch etwas mehr kB hat kann es sein, dass es zu einer minimalen Verzögerung kommt, dadurch “flackert” das Hintergrundbild kurz.

Eine Möglichkeit wäre das Bild mit Javascript im Hintergrund vor zu laden (preload), aber ich vertrete den Standpunkt, wenn man kein Javascript benötigt und es Alternativen – vor allem mit reinem CSS gibt, sollte man diese auch nutzen.

Die Alternative – CSS Sprites

Das ganze ist so genial wie simpel. Man speichert nicht mehrere Grafikdateien einzeln ab sondern eine größere Datei, in der alle Ansichten des Buttons dargestellt werden. Mit CSS verschiebt man dann einfach den Hintergrund.

Ein Beispiel:

Für meinen Twitter und Facebook Button habe ich eine Grafik erstellt, die beide Ansichten enthält. Einmal die Grau hinterlegte und die bunte “Hover” Grafik.

Hier die einzelne Datei:

Hier der CSS Code:

.addtwitter
{display:block;
width:35px;
height:35px;
background:url(../images/addtwitter.gif) no-repeat;
}
 
 
.addtwitter:hover
{background-position:-35px;}

Dadurch, dass ich das Hintergrundbild nicht wiederhole (no-repeat) habe ich nur die Möglichkeit das Hintergrundbild nach links oder rechts zu verschieben. Wenn ich diesen Wert nicht angeben würde, könnte ich das Bild beliebig verschieben und vor allem: Mit einem Bild, alle Buttons der Website stylen.

Vorteile:

• Kein “flackern” beim Hovern der Elemente
• Weniger HTTP Anfragen

• Wenn richtig optimiert, weniger Datentransfer

  Xing nutzt diese Technik übrigens für seine Icons und Buttons, hier ein Bild: