css-Sprites

css-Sprites sind in vieler Hinsicht eine interessante Technik. Doch zuerst sollten wir einmal klären, was das überhaupt ist.

Wenn wir Grafik-Button mit einem Mouseover-Effekt versehen wollen, so brauchen wir dafür zwei Grafiken: eine für die normale Ansicht und eine für den Mouseover-Effekt. Wenn wir nun mit der Maus über so einen Button fahren, kann es zu einer unerwünschten Verzögerung kommen, d.h. der Mouseover-Button muss erst geladen werden, was als eine kleine Pause zwischen den Button zu sehen ist.

Bei einem css-Sprite werden nun beide Button zu einer Grafik vereint. Da jetzt normalerweise beide Button sichtbar wären, müssen wir den zweiten Button verstecken. Bei Mouseover muss dann der zweite Button in das Sichtfeld verschoben werden. Wie das nun funktioniert möchte ich euch zeigen.

Zunächst brauchen wir eine Grafik wie diese:

css-sprite

Ihr könnt diese Grafik zu Testzwecken gern verwenden.

Als nächtes verpacken wir die Grafik:

<div class = "button"></div>

Nun brauchen wir nur noch das dazugehörende css:

.button{
display:block;
width:149px;
height:51px;
background:url(bilder/button_sprite.png);
}

.button:hover{
background-position:0 50px;
}

Demo:



Wie wir sehen, reagiert beim Mouseover der Button sofort, denn die notwendige Grafik wurde ja bereits mitgeladen. Als positiv wird der Einsatz von css-Sprites auch im Hinblick auf die Performance gesehen, da ja nur eine Grafik anstatt zwei geladen werden muss.


« zurück