Rollover ohne Zeitverzögerung mit Hybrid-Buttons

Diese Hybrid-Buttons aus Grafik und CSS sind schneller zu erstellen und zu laden als die üblichen grafischen Buttons, da man nur eine einzige Grafik für die unbeschriftete Buttonfläche zu erstellen und zu laden braucht, statt separater Grafiken für jeden Button. Ein- und dasselbe Bild dient als Hintergrund für alle Buttons auf der Seite. Die Beschriftung der Buttons besteht einfach aus CSS-formatierten Text.

Das Problem mit Preloads

Eins der wenigen Probleme mit solchen Hybrid-Buttons aus Grafik und CSS ist die Einschränkung bei Rollover-Effekten. Die einfachste Möglichkeit zum Einsatz dieser Technik besteht darin, die Rollover-Effekte auf den CSS-formatierten Text zu beschränken und dasselbe Bild der Buttonfläche für alle Rollover-Zustände zu verwenden. Damit erhält man schnelle und saubere Rollover-Effekte, aber die kreativen Möglichkeiten sind dadurch etwas eingeschränkt.

Man kann auch unterschiedliche Buttongrafiken erstellen und die CSS-Regeln so einrichten, dass das Hintergrundbild für die einzelnen Rollover-Zustände wechselt. Dies ermöglicht größere Flexibilität in Sachen Design, doch gilt es dafür eine Verzögerung bei der Anzeige der alternativen Buttongrafiken einzukalkulieren, da der Browser die Grafikdateien erst laden muss, wenn er sie zum ersten Mal benutzt (es sei denn, man greift auf das Preloading der alternativen Buttongrafiken zurück) werden.

Die Techniken zum Preloading von Grafiken sind wohlbekannt und allgemein akzeptiert. Das Preloading der Grafiken verlängert allerdings die Ladezeit der Seite, so dass diese erst verspätet im Browser des Besuchers angezeigt wird. Gerade diese ersten Sekunden sind für den Besucher aber entscheidend, und alles, was das Laden der ersten Seite beschleunigt, trägt zur Verbesserung der wahrgenommenen Geschwindigkeit und Usability der Website bei. Die Verwendung von Hybrid-Buttons aus Grafik und CSS reduziert die erforderliche Zeit für das Preloading von Grafiken – noch besser wäre es allerdings, wenn man auf Preloads vollständig verzichten könnte.

Page: 1 2 3

ZDNet.de Redaktion

Recent Posts

Studie: Ein Drittel aller E-Mails an Unternehmen sind unerwünscht

Der Cybersecurity Report von Hornetsecurity stuft 2,3 Prozent der Inhalte gar als bösartig ein. Die…

2 Tagen ago

HubPhish: Phishing-Kampagne zielt auf europäische Unternehmen

Die Hintermänner haben es auf Zugangsdaten zu Microsoft Azure abgesehen. Die Kampagne ist bis mindestens…

3 Tagen ago

1. Januar 2025: Umstieg auf E-Rechnung im B2B-Geschäftsverkehr

Cloud-Plattform für elektronische Beschaffungsprozesse mit automatisierter Abwicklung elektronischer Rechnungen.

3 Tagen ago

Google schließt schwerwiegende Sicherheitslücken in Chrome 131

Mindestens eine Schwachstelle erlaubt eine Remotecodeausführung. Dem Entdecker zahlt Google eine besonders hohe Belohnung von…

3 Tagen ago

Erreichbarkeit im Weihnachtsurlaub weiterhin hoch

Nur rund die Hälfte schaltet während der Feiertage komplett vom Job ab. Die anderen sind…

4 Tagen ago

Hacker missbrauchen Google Calendar zum Angriff auf Postfächer

Security-Experten von Check Point sind einer neuen Angriffsart auf die Spur gekommen, die E-Mail-Schutzmaßnahmen umgehen…

5 Tagen ago