Platz 1: CSS-Sprites
Die wenigsten Webseiten haben ein komplett statisches Design, also ein Design, das wirklich gänzlich auf grafische Effekte zur Verdeutlichung der Interaktion mit dem Besucher verzichtet. Man wird zwar nur noch selten auf die animierten Gifs der Neunziger stoßen, doch trotzdem: Animierte Flashwerbung und Rollover-Effekte - sei es auch nur die Änderung der Farbe beim Anwählen eines Links - sind Gang und Gäbe.
Über Flash-Werbung werde ich hier kein Wort mehr verlieren, doch Rollover-Effekte sind in der Tat ein nützliches
Instrument, um interaktive Elemente zu kennzeichnen. Einfachstes Beispiel ist ein Text-Link, der beim Überfahren
mit der Maus seine Farbe ändert, umrahmt wird o.ä: a:hover {color:#c00;}.
Etwas kompliziert wird das ganze allerdings, wenn Grafiken dynamisch ersetzt werden sollen: Die URL des neuen
Bildes muss übermittelt werden, zudem sollte idealerweise das Bild bereits beim Laden der Seite im Browsercache
abgelegt werden, um späteres Nachladen zu vermeiden. Eine gängige Methode ist hierbei, das gewünschte Element
mittels dem onMouseOver-Befehl mit einem Javascript zu verknüpfen, das dann die Bild-URLs ersetzt.
Das Hover-Bild wurde hierbei ebenfalls per Javascript beim Aufruf der Seite über den onLoad-Befehl
geladen.
Der Nachteil dieser Methode liegt offensichtlich darin, dass User, die Javascript deaktiviert haben, von dem
ganzen Spektakel nichts mitbekommen. Und hier kommen nun die CSS-Sprites ins Spiel.
CSS-Sprites - Grafische Rollover-Effekte ohne Javascript
Selten hat mich eine Technik so begeistert wie die CSS-Sprites.
Doch Moment - Sprites? Waren das nicht diese Bitmaps, die in alten Ego-Shootern wie Doom Objekte im Raum darstellen
sollten? Was hat das denn mit Webdesign zu tun?
Die Antwort ist einfach, denn beiden Techniken liegt ein ähnliches Prinzip zugrunde: ein "Master-Image",
das sämtliche benötigten Grafiken in einer Datei vereinigt und diese nach Bedarf anzeigt. Für das Webdesign bietet
das nun den Vorteil, dass der Browser beim Laden der Seite das gesamte Master-Image lädt, auch wenn dieses immer nur
teilweise angezeigt wird. Nun muss nur noch mittels CSS die background-position angepasst werden -
fertig!
Ganz so einfach ist es vielleicht nicht, doch über die genaue Vorgehensweise möchte ich hier keine Worte mehr verlieren, da der Artikel auf A List Apart das ganze bestens erklärt.
Übrigens: Die obige Beispielgrafik stammt aus dem Design meiner Seite netzgeWEBe.de, auf der man die Technik gleich in Aktion sehen kann.
Bewertung
| Platz 1 |
Praktischer Nutzen |
|
Diese Technik begeistert mich jedes Mal aufs Neue. Ein tiefer Griff in die CSS-Trickkiste und ein bißchen unkonventionelles Denken machen hier Javascript komplett überflüssig, und heraus kommt eine semantisch sinnvolle, benutzerfreundliche Möglichkeit für Rollover-Grafiken. |
|---|---|---|---|
| Originalität |
|
||
| Anspruch |
|
||
| Browserkompatibilität * |
|
||
| Summe | 18 |