Integration von Sprites
Mit etwas CSS und den zugehörigen Sprites bewaffnet lässt sich die Integration in die Internetseite leicht realisieren. Die Hauptarbeit besteht darin, die Rasterpositionen zur relativen Ausrichtung der Teilbilder zu ermitteln und die entsprechenden Werte im Stylesheet zu notieren.
Ist erst einmal das Sprite erstellt, so geht es an die Integration des Bildes in die Internetseite. Zu diesem Zweck müssen wir ein Cascading-Stylesheet erstellen, welches dafür sorgt, dass nur ein bestimmter Ausschnitt der gesamten Bilddatei im dafür vorgesehenen HTML-Element angezeigt wird. Als erstes muss das erstellte Sprite als Hintergrundbild eingebunden werden, was mit der CSS-Eigenschaft background-image erledigt werden kann. Trifft der Browser auf einen solchen Verweis, so wird die Bilddatei automatisch nachgeladen. Zur Festlegung des Bildausschnitts benötigt man zum Einen die Ausdehnung des Bildes (Größe des Bildausschnitts in Pixeln) und zum Anderen muss das Hintergrundbild im Anzeigeelement ausgerichtet bzw. positioniert werden.
Im auf diesen Absatz folgenden Code-Abschnitt wird ein entsprechendes Stylesheet angegeben, welches die Einzelbilder aus dem zuvor erstellten Sprite nutzt. Die erste Regel, welche für alle die Klassen b1 bis b4 nutzenden HTML-Elemente gilt, gibt die bei diesen Elementen als Hintergrund zu nutzende Bilddatei an. Alle weiteren Eigenschaften des ersten Blocks dienen lediglich der Formatierung – die Elemente solle links umflossen und mit einem horizontalen Abstand von zehn Pixeln zueinander dargestellt werden.
background-image:url("/pic/sprite.gif");
float:left;
display:inline;
margin:0 10px;
}
.b1 {
background-position:left top;
width:48px; height:36px;
}
.b2 {
background-position:left -42px;
width:103px; height:85px;
}
.b3 {
background-position:-48px top;
width:31px; height:23px;
}
.b4 {
background-position:-103px top;
width:97px; height:150px;
}
Mit den darauf folgenden Regeln wird für jedes einzelne Sprite-Bild die relative Position innerhalb des Anzeigebereichs und die Ausdehnung des Elements angegeben. Width und height gibt die Breite bzw. Höhe des Elements an. Hier stehen, aufgrund der Tatsache, dass alle Bilder unterschiedliche Rastergrößen besitzen, jeweils unterschiedliche Pixelwerte. Durch background-position wird die relative Ausrichtung des Hintergrund-Sprites gesetzt. Im ersten Wert wird die horizontale Position relativ zur linken, oberen Ecke des HTML-Elements festgelegt. Die hier angegebenen Werte enthalten meist ein negatives Vorzeichen, was bedeutet, dass das Bild auf der X-Achse nach links verschoben wird. Left ist hier gleichbedeutend mit 0, da im Falle von b2 keine Verschiebung nötig ist – der gewünschte Bildausschnitt beginnt dort.
Ähnlich funktioniert das auch mit der zweiten Positionsangabe. Hier wird der Bildausschnitt allerdings auf der Y-Achse verschoben und negative Werte bedeuten, dass der obere Bildrand um die angegebenen Pixelwerte nach oben verschoben wird. Auch hier existiert mit top ein Sonderfall – ebenfalls gleichbedeutend mit 0 –, der wiederum keine Verschiebung bewirkt. Da b1, b3 und b4 am oberen Rand des Sprites beginnen ist das auch nicht nötig. Nun folgt ein Stück HTML-Code, welches die oben definierten Klassen bei der Darstellung verwendet.
<div class="b2"> </div>
<div class="b3"> </div>
<div class="b4"> </div>
Hier werden beispielhaft DIV-Elemente zur Darstellung genutzt. Im Prinzip war es das bereits und der nächste Block zeigt die durch das Stylesheet und die HTML-Elementobjekte erzeugte Ausgabe.
Alternativ können die CSS-Regeln auch ergänzend zusammengestellt werden. Hierzu können der Übersichtlichkeit halber sinnigere Namen für die Klassen vergeben und Anzeigeelemente nacheinander die zutreffendenden Regeln zugewiesen werden. Der nächste Code-Block beinhaltet sowohl die CSS-Angaben als auch den HTML-Code zu deren Nutzung. In diesem Beispiel bekommt die Klasse für alle Bilder den Namen sprite und die einzelnen Teilbilder werden mit spriteBildX bezeichnet. Exemplarisch wird am Ende des Blocks nur ein einziges Bild in einem IMG-Element angezeigt, wobei in der SRC-Eigenschaft ein transparentes Bild angegeben ist, welches das eigentliche Hintergrundbild durchscheinen lässt.
.sprite {
background-image:url("/pic/sprite.gif");
}
.spriteBild1 { background-position:left top;
width:48px; height:36px;
}
.spriteBild2 {
background-position:left -42px;
width:103px; height:85px;
}
.spriteBild3 {
background-position:-48px top;
width:31px; height:23px;
}
.spriteBild4 {
background-position:-103px top;
width:97px; height:150px;
}
</style>
<img class="sprite spriteBild3" src="/pic/t.gif" />
Die zur Darstellung nötigen Regeln werden in der CLASS-Eigenschaft des Bildelements hintereinander angegeben und ergänzen sich – Regeln, die in beiden Styles angegeben sind werden dabei überschrieben. Im vorliegenden Fall werden erst die Style-Eigenschaften von sprite und danach die des Styles spriteBild3 gesetzt. Eine solche Vorgehensweise bietet sich insbesondere bei gleich großen Sprites (etwa bei Icons gleicher Rastergröße) an, da die Eigenschaften width und height nur einmal in der sprite-Regel angegeben werden müssten – was hier nicht sinnvoll ist, da die Bilder eben nicht gleicher Ausdehnung sind. Der folgende Block zeigt das Ergebnis dieser Kombination.
