Bilderwechsel via CSS Sprites

Wie man den unschönen Hover-Effekt behebt wurde bereits in dem Artikel Preload bei Hover-Images vorgestellt. Hier wird nun die sogenannte CSS Sprites Technik dargestellt welche bestimmte Vorteile gegenüber der aufgezeigten hat.

Vorteile von CSS Sprites:

• kein unschöner "missing image" Hover-Effekt
• Bilder werden schneller geladen
• kein MouseOver-Code notwendig
• kein Einsatz von JavaScript benötigt

Wozu sind CSS Sprites geeignet?

Neben den oben erwähnten Vorteilen und dem verhindern des unschönen Hover-Effekt, der in dem Artikel Preload bei Hover-Images erklärt wird, bieten CSS Sprites die Möglichkeit mehrere Zustände z. B. eines Navigations Buttons schnell und einfach darzustellen. Durch das Einbinden eines Gesamtbildes anstatt mehreren einzel Bildern wird der HTTP request und somit die Ladezeit der Webseite verringert. Außerdem sparen Sie durch CSS Sprites an Speicherplatz.

Wie werden CSS Sprites eingesetzt?

Unser Beispiel Bild hat die eigentliche Größe von 100 x 200 px.

Das gewünschte Bild wird in einem DIV-Container über eine CSS ID aufgerufen. In der CSS ID rufen wir das Bild aber lediglich in der Größe 100 x 100 px auf um nur das obere Bild darzustellen.

Jetzt kommt der eigentliche Trick in #tinami:hover wird über background-position das untere Bild um um 100 px nach oben gerückt. Der erste Wert gibt die x-Achsen und der zweite Wert die Y-Achsen Verschiebung an.

 

XHTML Part:

<div id="tinami"></div>

CSS Part:

#tinami {
    width: 100px;
    height: 100px;
    background: url('images/tinami.png');
}

#tinami:hover {
    background-position: 0 100px;
}

Fertig! Und so sieht das fertige CSS Sprites Bild aus:

 

Tags: Tipps und Tricks

Erstellt am 09.10.2009 von Matthias Stegmeier in Tipps und Tricks

Nach oben

Nach oben

Nach oben