Rollover ohne Zeitverzögerung mit Hybrid-Buttons

Listing A ist der CSS-Code eines Beispiels dieser Rollover-Technik ohne Preloads für Hybrid-Buttons aus Grafik und CSS. In diesem Fall ist der Button-Text als unsortierte Liste ausgeführt und die drei übereinander liegenden Buttons sind in einem div-Element mit der ID menu enthalten.

Hier der HTML-Code für die drei Buttons:

Man beachte im Beispiel-Code, dass die Regel für div#menu li die Höhe und Breite der Button-Box festlegt sowie die Startkoordinaten für Hintergrundbild und Text. Die Festlegung der Zeilenhöhe (line-hight) entsprechend der Höhe der Box stellt sicher, dass der Text vertikal zentriert ist. Das Attribut background-position bestimmt die Position der oberen linken Ecke des Hintergrundbildes relativ zur linken oberen Ecke der Box. Ein Wert von 0px 0px bringt die beiden linken oberen Ecken von Grafik und Box zur Deckung.

In der Regel div#menu li sorgt die Eigenschaft display: block in Kombination mit width: 100% und height: 100% dafür, dass der gesamte Bereich der Box anklickbar ist und nicht nur der Text.

In den Regeln für die einzelnen Button-Zustände (link-Pseudo-Klassen) wie zum Beispiel div#menu lia:link sorgen schließlich die Eigenschaften color und font-weight für die Text-Rollover-Effekte, während die Eigenschaften background-image und background-position für den Wechsel des Hintergrundbildes sorgen. Die Einstellung von background-position: 0px -30px für den Hover-Status verschiebt die Hintergrundgrafik um 30 Pixel nach oben, so dass der obere Button verschwindet und der mittlere (hellere) Button in der Button-Box sichtbar ist. Auf ähnliche Weise führt die Einstellung von background-position: 0px -60px für den Aktiv-Status dazu, dass die Hintergrundgrafik noch weiter nach oben verschoben wird, so dass nur der unterste (gedrückte) Button sichtbar ist. Die Angabe des background-image muss in jeder Regel wiederholt werden.

Diese Technik ermöglicht die plastische Darstellung traditioneller Grafik-Buttons, jedoch mit der Geschwindigkeit von CSS-Text-Buttons. Erreicht wird dies durch Hybrid-Buttons aus Grafik und CSS. Damit erzielt man uneingeschränkte grafische Rollover-Effekte ohne Verzögerungen oder Preloads von Grafiken.