CSS Sprites

Hover- bzw. Mouseovereffekte sieht man heute an jeder Ecke. Besonders bei Navigationen werden dazu häufig Hintergrundgrafiken eingesetzt, die beim Überfahren eines Links mit der Maus ausgetauscht werden. Allerdings wird dieser Effekt nur allzu oft viel zu umständlich realisiert.
Der Austausch der Grafiken wird oft über JavaScript bewirkt, was automatisch einiges mehr an Quellcode zur Folge hat. Zudem liegen meist zwei Grafiken pro Navigationspunkt vor, was einerseits einen Haufen an Dateien produziert, andererseits sogar unschöne, sichtbare Ladeverzögerungen der Bilder mit sich bringen kann. Gerade bei solchen Haken im Nachladen ist der schöne Effekt gleich dahin.

Abhilfe schafft da die Verwendung von Sprites, die, im Vergleich zu einem JavaScript-Mouseover, mit ihrer Einfachheit besticht. Für den Hover-Effekt wird pro Navigationspunkt nur eine Grafik benötigt. Theoretisch kann man sogar alle Navigationspunkte in einer Grafik unterbringen. Der Link des Navigationspunktes erhält eine ID, alles weitere wird schließlich über diese ID per CSS gesteuert.

Das CSS greift auf diese ID zu und vergibt somit Größe, Höhe und Hintergrundbild. Bei Letzterem ist die Positionierung der Grafik besonders wichtig, da diese später den Unterschied zum Hover macht. Der Mouseover-Effekt selbst wird mittels der Pseudoklasse ‘hover’ angelegt. Im Hintergrund befindet sich nach wie vor dieselbe Grafik, diesmal allerdings anders positioniert. So wird ein visueller Effekt erzielt, ohne eine neue Bilddatei laden zu müssen, da lediglich eine Grafik verschoben wird.

Im HTML muss demnach nur folgende Zeile geschrieben werden:
<a id="sprite_link" href="/"></a>

Das CSS dazu wird etwas umfangreicher, ist aber nicht besonders kompliziert:
#sprite_link {
     display: block;
     width: 300px;
     height: 75px;
     background: url(sprite.jpg) 0 0 no-repeat;
}
#sprite_link:hover {
     background: url(sprite.jpg) 0 -75px no-repeat;
}

Das wohl Wichtigste ist hier die Hintergrundpositionierung, die sich bei unserem oben gezeigten Beispiel um -75px verschiebt. Das Bild wird demnach nach oben verschoben. Durch das “Fenster” des Link-Tags scheint nur der gewünschte Teil des Bildes, der Rest wird verdeckt. Wie das Bild im Ganzen aussieht, sieht man bei einem Klick auf das Beispiel.

Ähnlich kann man auch bei gleichartigen Grafiken auf einer Webseite verfahren. Verwendet man beispielsweise einige Icons, so kann man diese alle in einer Datei zusammenführen und das Erscheinungsbild des Symbols durch die Positionierung eines Hintergrundbildes beeinflussen. Vorteil davon ist, dass die Anzahl an HTTP Requests enorm reduziert wird.
Ein hervorragendes Beispiel dafür sind die Sprites von Xing. Hier werden diese Grafiken in Perfektion eingesetzt und enthalten viele verschiedene Elemente.

Insgesamt gesehen kann eine solch zentrale Grafikdatei das Arbeiten enorm erleichtern und beschleunigen. JavaScript wird hier durch einfache Grafikarbeit abgelöst, was am Ende sogar zu weniger HTTP Requests führt. Alles in allem sind Sprites eine sehr empfehlenswerte Vorgehensweise für Hovereffekte und andere Websitegrafiken.