Rollover ohne Zeitverzögerung mit Hybrid-Buttons

Eine innovative Technik, mit der man alternative Buttongrafiken für die einzelnen Rollover-Zustände einsetzen kann, ohne irgendwelche Grafikdateien im Voraus laden zu müssen, ist in einem Artikel auf der Website des tschechischen Web-Designers Petr Stanicek beschrieben.

Abbildung A

Um einen typischen Button-Rollover-Effekt zu erzielen, würde man normalerweise drei separate Grafiken erstellen, wie Abbildung A zeigt: eine für den Normalzustand, eine für den Moment, in dem der Mauszeiger auf dem Link steht, und eine für den aktivierten Zustand des Buttons. Die Grafikdatei für den Button im Normalzustand würde schon beim Laden der Seite mitgeladen werden, aber die beiden anderen Grafiken müsste man separat im Voraus laden, damit sie im Browser-Cache vorhanden sind, wenn der Besucher auf den Button zeigt oder klickt.

Abbildung B

Der Trick bei der Rollover-Technik ohne Preload besteht darin, alle drei Buttongrafiken in einer einzigen Grafikdatei zusammenzuführen, wie Abbildung B zeigt. Dann gibt man in den CSS-Regeln statt unterschiedlicher Hintergrundbilder einfach einen Offset für die Position des gemeinsamen Bildes an. Die kombinierte Grafikdatei wird automatisch während des Ladens der Seite mitgeladen, so dass sich Preloads erübrigen. Und auch Zeitverzögerungen dadurch, dass der Browser für den Rollover-Effekt auf eine andere Datei zugreifen muss, entfallen.

Mit der Kombination aus einer übergroßen Grafik und dem Offset für das Hintergrundbild lässt sich für jeden Button-Zustand ein anderer Teil der Grafik anzeigen, anstatt zwischen mehreren Grafikdateien zu wechseln. Die Größe der CSS-Box um den Button-Text legt fest, wie viel der Hintergrundgrafik im Browser zu sehen ist. Der Teil der Grafik außerhalb der Box wird abgeschnitten und bleibt unsichtbar. Ergebnis: Es wird immer nur einer der drei Buttons angezeigt.

Damit diese Technik funktioniert, muss man die exakte horizontale und vertikale Größe des Buttons kennen und diese Angaben präzise bei der Erstellung der Grafikdatei und der CSS-Regeln für die Buttons berücksichtigen.