CSS Tipps (1) – Hover Buttons mit Grafik

Dies ist nur ein kleiner Kniff, wie man bei mit CSS in Verbindung mit Hintergrundbildern realisierten Hover-Buttons ein lästiges “Aufflackern” (Nachladen der Grafik für den Hover-Zustand des Buttons) beim Ersten Aufruf einer Seite verhindern kann.

Anfangs habe ich solche Schaltflächen einfach so umgesetzt, dass halt für den Hover-Zustand eine weitere Grafik angegeben wurde, die erst dann geladen wurde, wenn man den Button zum ersten Mal mit dem Mauszeiger berührte.
Der Sekundenbruchteil den es dauerte, bis der zweite Zustand geladen war, wirkte meiner Meinung nach lästig und unprofessionell.
Nun, die Lösung ist so einfach, dass ich gleich hätte darauf kommen können (vielen ist dies bestimmt auch nicht neu, aber manchmal sieht man den Wald vor Bäumen nicht). Man legt einfach die beiden (bei Bedarf auch mehr) Zustände in einer einzigen Grafik ab, und schiebt den sichtbaren Bereich der Grafik um die entsprechende Anzahl Pixel beim Hover hinauf. So wird die Grafik quasi vorgeladen, und das lästige Aufflackern entfällt.

Funktionieren tut das ganz einfach nach dem Prinzip:

Button Zustände in einer einzelnen Grafik

.hover_button a
{
background: url("css_hover.jpg") 0px 0px no-repeat;
}

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

Natürlich ist es völlig wurst ob man die Grafik in X oder Y verschiebt (je nachdem wie man die Grafik ablegen möchte).
Ich denke das prinzip ist klar