CSS-Sprites
oder "Image Slicing with CSS"
Bitte aktivieren Sie Javascript.
Bei dieser Technik werden in eine einzige Grafik vielen kleine Bilder zusammengefasst
und für den User nur der aktuell relevante Ausschnitt (also ein kleines Bild) dargestellt.
Es wird in erster Linie die CSS-Eigenschaft background-position benutzt, um den relevanten Ausschnitt darzustellen.
Da es diese Eigenschaft bereits seit etwa zehn Jahren gibt, wird sie von allen aktuelleren Browsern zwischenzeitlich auch korrekt interpretiert
1).
Wird dabei auch Interaktion mit dem User gewünscht, kommt noch etwas Javascript zum Einsatz
2).
Ein grosser Vorteil ist auch das verschiedene Grafikformate benutzt werden können.
So lassen sie gif, jpeg und png-Grafiken als Ausgangsmaterial benutzen.
Gerade mit PNG-Dateien und deren transparenz-Funktionen lassen sich interessante Effekte erzielen.
Sprite als Grafikcontainer:
Der Trick viele kleine Bilder in eine einzige Datei zu stecken ist Jahrzehnte alt.
Es hatte anfangs den Vorteil, daß der Arbeitsspeicher optimaler und schneller genutzt wurde.
z.B. wurden im einem Jump`n`Run-Computerspiel die Einzelbilder eines Männchen sequenziell (hintereinander) im Arbeitsspeicher abgelegt.
Diese Einzelbilder konnten sehr einfach adressiert werden und schnell auf den Bildschirm gebracht werden.
Das Männchen rannte auch bei einem Ein-MHz-Computer mit 64K Arbeitsspeicher zügig über den Bildschirm.
Im Internetzeitalter hat diese Technik nicht an Wert verloren.
Eine große Datei ist deutlich schneller (auch bei DSL und Co.)
aus dem Internet geladen, als viele kleine Dateien.
Diesen Vorteil erkannten auch
Yahoo, AOL und Google vor Jahren.
Da diese Suchmaschinen-Anbieter ja viel Geld für ihre Datenleitungen, Datenspeicher und Rechenleistungen zahlen müssen, sind diese auch dankbar für schnellere, optimierter Internetseiten.
Beispiel: Rollover-Effekt
Bei diesem Beispiel wurde nur eine
Grafik-Datei benutzt, normalerweise wären es 17 Einzeldateien.
Es wird kein Javascript benutzt, sondern nur CSS und HTML.
Sprite als Throbber:
Ein Throbber ist eine kleine "Bitte warten..."-Animation; auch bekannt als Sanduhr oder drehendes Rad.
Dies begegnet Ihnen oft, wenn ein Betriebssystem hochfährt oder eine InternetSeite geladen wird.
Beispiel: Animation
Der
Grafikstreifen enthält alle Einzelbilder der Animation.
Bei einem kleinen HTML-Absatz wird ein Ausschnitt dieses Streifens dargestellt
und mit Javascript wird dieser Ausschnitt verschoben.
Es entsteht eine Animation.
Bei diesem Beispiel wurde nur eine Grafik-Datei benutzt, normalerweise wären 16 Einzeldateien oder eine GIF-Grafik nötig.
Sprites in Spielen:
Sprites lassen sich, wie anfangs erwähnt auch wurderbar in Spielen benutzen.
Beispiel: Tuxjagd
Das Spiel hat insgesamt
drei Grafiken:
Eine für den Hintergrund und zwei für den Pinguin Tux.
Mit etwas Javascript wird die Animation und die User-Interaktion gesteuert.
Es entsteht ein animiertes Computerspiel.
Punktestand: 0 Punkte
Schüsse: 0 Schüsse
Geschwindigkeit: 3
langsamer/leichter -
schneller/schwieriger
Spielanleitung: Klicken Sie auf den Pinguin und erhalten Sie dafür einen Punkt.
Es gibt keine Level, dafür können Sie das Spiel schneller/schwieriger und langsamer/leichter einstellen.
Sprites in 3D:
Es lassen sich auch interaktive 3D-Animationen erzeugen; diese aber bitte nicht mit
3D-Echtzeit-Animationen verwechseln.
Beispiel: MarbleBall
Die Animatiom hat insgesamt
eine Grafik.
Mit etwas Javascript wird die Animation und die User-Interaktion gesteuert.
Es entsteht eine interaktive 3D-Animation.
Ansicht: 2 von 4 HöhenAnsichten
Ansicht: höher - Ansicht: niedriger
Anleitung: Mit Ansicht: höher und niedriger können Sie ihren Blickwinkel verändern.
Es gibt vier Höheneinstellungen.
Randnotizen:
- Auch der Microsoft Internet Explorer schafft es mal oder "Die Steckdose sieht so komisch aus!":
Microsoft tut sich mit Konkurrenz bekanntlich schwer; dabei zählen international anerkannte Standards auch zur Konkurrenz.
Nachdem der (offene) BrowserKrieg zwischen Microsoft und Netscape in die Annalen einging
und Microsoft so manchen Gerichtsprozess mit der Konkurrenz, nationalen und internationalen Behörden auch verlor,
ist auf dem Gebiet "Zusammenarbeit" noch lange nicht Ruhe.
Ein kleine bildhafte Geschichte:
Stellen Sie sich vor jeder Stromanbieter hat seine eigenen Steckdosen und seine eigene Stromstärke.
Wenn Sie nun den Stromanbieter wechseln wollen, so müssen Sie
-sämtliche Steckdosen in Ihrem Haus austauschen,
-für jedes Gerät, von der Elektrozahnbrüste, über den Fernseher bis zur Gefriertruhe passende Stromadapter kaufen
-nur Geräte kaufen, die mit ihrem aktuellen Stromanbieter konform sind.
Sie gehen in ein Elektrofachgeschäft und die erste Frage ist nicht:
"Was wünschen Sie?",
sondern "Welchen Stromanbieter haben Sie?".
Nun werden Sie sich denken; das ist eine schöne Geschichte, hat aber mit der Realität wenig zu tun.
Stimmt - weil es nationale und internationale Standards gibt, die solche Dinge regeln.
Diese Standards sind öffentlich (frei verfügbar) und können jederzeit von Anbietern,
Produzenten und Verbrauchern eingesehen werden.
Für das Internet gibt es auch solche Standards, wenn Sie eine Internetadresse eingeben,
Dateien herrunterladen, Internetseiten betrachten, ...
Diese InternetStandards sind aber nur bedingt verbindlich
und Microsoft unterwandert diese immer wieder, setzt sie nicht korrekt um,
ignoriert diese komplett oder propagiert seine eigenen Standards.
Dies bremst die Entwicklung, neue Innovationen und das gute Zusammenspiel
zu Gunsten des Verbrauchers und auch der Produzenten.
Die Antwort warum Microsoft das macht bleibe ich Ihnen leider schuldig,
aber Krieg kann man nur schwer begründen.
- DHTML, AJAX, Web2.0 oder "Auch Buzzwörter eignen sich zum Streiten.":
Nachdem Netscape die BrowserScriptsprache JavaScript erfand und den Internetseiten Leben einhauchte,
brauchte man einen Begriff um die schöne neue Welt zu beschreiben.
Der Begriff DHTML wurde geboren.Gemeint war damit, das Internetseiten nicht einfach nur bunte Seiten sind,
sondern der Betrachter/User mit der HTML-Seite interagieren kann und kleine Animationen auf der HTML-Seite ablaufen.
z.B.: Es fallen Schneeflocken auf der Internetseite herrunter,
Menüs klappen auf oder Untermenüs werden "herausgefahren",
Bilder werden ein- und ausgeblendet,
bei Formularen erscheinen Hinweistexte aus Geisterhand...
Technisch gesehen ist dies ein Zusammenspiel aus Javascript, DOM, CSS und HTML.
Der Begriff DHTML konnte sich jedoch nicht so richtig durchsetzen
und wird zur Zeit als AJAX oder Web2.0-Technik durch´s Dorf getrieben.
HTML5 kann hier als grosser Nachfolger antretten - die Zukunft wird es zeigen1).
Verweise:
