neidl.net logo
Neidl Reinhard | Telefon: 09480 - 93 85 39

Valid HTML 4.01 Transitional

 

  • --- Neidl Reinhard ---
  •  
  • Information:
  • Über Reinhard Neidl
  • E-Mail an Reinhard
  • Impressum
  • Technik
  • CSS-Sprites
  • NetTools
  • PHP-Handbuch
  • Fotostrecken
  • Indien
  • Jamaika
  • Fotoshow
  • Drei Generationen
  • 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 interpretiert1).
    Wird dabei auch Interaktion mit dem User gewünscht, kommt noch etwas Javascript zum Einsatz2).
    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.
    Tux geht-Grafikstreifen
    Tux wurde getroffen-Grafikstreifen
    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:

    Verweise: