CSS Bild-Sprite-Technik

Bild-Sprites

Bild-Sprites sind Sammlungen einzelner Bilder.

Eine Webseite mit vielen Bildern kann lange zum Laden brauchen und mehrere Serveranfragen erzeugen.

Die Verwendung von Bild-Sprites reduziert die Anzahl der Serveranfragen und spart Bandbreite.

Bildzusammenfügung - Einfaches Beispiel

Anstatt drei separate Bilder zu verwenden, nutzen wir dieses einzelne Bild ("img_navsprites.gif"):

Mit CSS können wir nur den Teil des Bildes anzeigen, den wir benötigen.

Im folgenden Beispiel legt das CSS fest, dass ein Teil des Bildes "img_navsprites.gif" angezeigt wird:

Beispielanalyse:

• <img class="home" src="img_trans.gif.html" /> - da es nicht leer sein kann, definiert das src-Attribut nur ein kleines transparentes Bild. Das angezeigte Bild wird das Hintergrundbild sein, das wir in CSS angegeben haben.
• Breite: 46px; Höhe: 44px; - definiert den Teil des Bildes, den wir verwenden.
• background:url(img_navsprites.gif) 0 0; - Definiert das Hintergrundbild und seine Position (links 0px, oben 0px)

Dies ist die einfachste Möglichkeit, Image Sprites zu verwenden. Jetzt wollen wir Links und Hover-Effekte einsetzen.

Image Sprites - Erstellen einer Navigationsliste

Wir möchten das Sprite-Bild ("img_navsprites.gif") verwenden, um eine Navigationsliste zu erstellen.

Wir verwenden eine HTML-Liste, weil sie verlinkt werden kann und außerdem Hintergrundbilder unterstützt:

Beispielanalyse:

• #navlist{position:relative;} - Position wird auf relative gesetzt, um die absolute Positionierung im Inneren zu ermöglichen.
• #navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;} - margin und padding auf 0 gesetzt, Listenstil entfernt, alle Listenelemente werden absolut positioniert
• #navlist li, #navlist a{height:44px;display:block;} - Die Höhe aller Bilder beträgt 44px

Jetzt beginnen wir mit der Positionierung und Gestaltung jedes einzelnen Teils:

• #home{left:0px;width:46px;} - So wird ganz nach links positioniert, und die Bildbreite beträgt 46px.
• #home{background:url(img_navsprites.gif) 0 0;} - Definiert das Hintergrundbild und seine Position (links 0px, oben 0px)
• #prev{left:63px;width:43px;} - 63px nach rechts positioniert (46px Breite von #home + etwas zusätzlicher Platz zwischen den Elementen), Breite ist 43px.
• #prev{background:url('img_navsprites.gif') -47px 0;} - Definiert das Hintergrundbild 47px nach rechts (Breite von #home 46px + 1px Trennlinie)
• #next{left:129px;width:43px;}- 129px nach rechts positioniert (#prev 63px + Breite von #prev 43px + verbleibender Platz), Breite ist 43px.
• #next{background:url('img_navsprites.gif') no-repeat -91px 0;} - Definiert das Hintergrundbild 91px nach rechts (#home 46px + 1px Trennlinie + Breite von #prev 43px + 1px Trennlinie).

Bild-Sprites - Hover-Effekte

Jetzt möchten wir unserer Navigationsliste einen Hover-Effekt hinzufügen.

	Der :hover-Selektor wird verwendet, um den Effekt anzuzeigen, wenn die Maus über ein Element fährt. Tipp:Der :hover-Selektor kann auf alle Elemente angewendet werden.

Unser neues Bild ("img_navsprites_hover.gif") enthält drei Navigationsbilder und drei Bilder:

Da es sich um ein einzelnes Bild und nicht um 6 separate Bilddateien handelt, gibt es keine Ladeverzögerung, wenn der Benutzer über das Bild fährt.

Um den Hover-Effekt hinzuzufügen, müssen wir nur drei Codezeilen hinzufügen:

Beispielanalyse:

• Da das Listenelement einen Link enthält, können wir die :hover-Pseudoklasse verwenden.
• #home a:hover{background: transparent url(img_navsprites_hover.gif) 0 -45px;} - Für alle drei Hover-Bilder geben wir dieselbe Hintergrundposition an, nur dass jedes um weitere 45px nach unten verschoben wird.