Mouseover Buttons mit CSS ohne Nachladen

Verschiedene Zustände eines Buttons wie der Normalzustand und der Mousover-Zustand werden oftmals mit JavaScript realisiert: Wir haben zwei Bilder und je nach Zustand des Buttons wird durch JavaScript gesteuert eines der Bilder geladen.

Durch diese Lösung ergeben sich drei unschöne Dinge: Das Laden der Buttons dauert ein wenig, es ergibt sich eine kleine Ladepause; wir laden zwei Bilder, das sind unnötig viele HTTP-Anfragen an den Server und einige Nutzer haben JavaScript deaktiviert und die sehen gar nichts von unserer Mühe.

In diesem Tutorial möchte ich euch daher einen Trick zeigen, wie wir mit nur einem Bild und nur mit der Hilfe von CSS ohne JavaScript dasselbe Ergebnis bekommen und all die beschriebenen Probleme hinter uns lassen.

Das Prinzip

Das Prinzip dabei ist in dieser Illustration verdeutlicht:

Unser Bild:      Normaler Button:     Mouseover:

-------                                 -------
--ABC--                                 --ABC--
-------                                 -------
-------          XX-------XX          XX-------XX
--DEF--          XX--ABC--XX          XX--DEF--XX
-------          XX-------XX          XX-------XX
                   -------
                   --DEF--
                   -------

Links sehen wir unser Bild, dass wir als Hintergrund für den Button verwenden möchten. Im Normalzustand soll "ABC" auf dem Bild stehen, im Hover-Zustand soll "DEF" auf unserem Button stehen. Auf unserem Bild haben wir einfach beide Button-Zustände untereinander auf ein Bild gesetzt.

In der Mitte sehen wir schließlich unseren normalen Button. Der Trick ist dabei, dass der Button kleiner ist als das Bild. Es wird also nur die obere Seite mit dem "ABC" auf unserem Button sichtbar. Der Rest bleibt verborgen. Die Ränder unseres Buttons sind mit "XX" gekennzeichnet.

Im Mouseover Status verschieben wir nun das Bild nach oben, so dass die andere Seite des Bildes unsichtbar wird. Zwischen den mit "XX" gekennzeichneten Rändern ist nun das "DEF" sichbar und der obere Teil des Bildes verborgen.

Das CSS

Übersetzen wir diese Überlegungen in CSS erhalten wir:

#button {
  background: url("pic.png") no-repeat 0px 0px;
  height: 25px;
  width: 100px;
  padding: 0;
  margin: 0;
}

#button:hover {
  background-position: 0px -25px;
}

Zunächst definieren wir unseren Button, den wir hier "button" nennen mit einer Größe von 25 x 100 Pixeln. Als Hintergrundbild definieren wir das "pic.png" und geben als Hintergrund-Position "0px 0px" an. Das bedeutet, dass als Hintergrund der Ausschnitt von "pic.png" verwendet wird, der oben links ab den Koordinaten 0/0 zu sehen ist. Alles andere wird abgeschnitten. Und genau in dieser Ecke sollte das Bild für unseren Button sitzen, das wir als Normalzustand verwenden möchten.

Als nächstes definieren wir eine CSS-Regel für den Hover-Zustand, das heißt, wenn die Maus über den Button fährt. Hier benennen wir eine andere Background-Position und zwar "0px -25px". Damit wird beim Überfahren mit der Maus der Ausschnitt des Bildes angezeigt, der sich 25 Pixel unterhalb des oberen Bildausschnitts befindet. Und genau dort sollte das Bild für den Hover-Zustand auf unserem Bild platziert werden.

Natürlich sind dies nur Beispiele. Das Bild für den Ursprungsbutton kann genauso gut bei einer Position von "127px 27px" liegen und der Button eine andere Größe haben. Es ist nur darauf zu achten, das die Größen und Angaben zusammen passen.

Weitere Überlegungen

Dieses Vorgehen nennt man die Verwendung von CSS-Sprites. Theoretisch können wir nun auch andere Buttons oder sonstige Bilder unserer Website in ein einzelnes großes Bild packen und dann durch die Eigenschaften in background-position immer nur Ausschnitte davon beziehungsweise die Stelle des Bildes anzeigen, die wir gerade bei einem bestimmten Element sehen möchten.

Damit Laden wir nur einmal ein Bild herunter, dass dann in unserem Browser Cache ist und immer wieder verwendet werden kann. Diese eine Anfrage ist viel performanter als jedes mal eine Vielzahl von Bildern mit einer ebenso großen Anzahl an HTTP Requests herunterzuladen.

Noch performanter ist es natürlich, gleich ganz auf Bilder zu verzichten und Buttons nur mit reinem CSS zu designen. Daher sollte diese Methode nur verwendet werden, wenn wir wirklich ein Bild benötigen. Für Farbverläufe oder andere Designs, die sich auch einfach mit CSS realisieren lassen, sollten wir kein Bild verwenden.