In diesem Artikel der Reihe „Wie erstelle ich eine Website oder Webseite“ wird ein sog. Sprite vorgestellt. Mit Sprites ist man in der Lage Rollover-Effekte ohne Javascript zu realisieren. Dabei wird zuerst eine Grafik in Photoshop (oder anderem Bildbearbeitungsprogramm) angelegt, in der sowohl das Grundbild als auch das Rollover-Bild vorhanden ist (entweder untereinander oder übereinander). Zum Beispiel so:

Sprite - Verschieben von Hintergrundbildern durch CSS

Sprite – Verschieben von Hintergrundbildern durch CSS

Ich möchte dieses Sprite mit einer Navigation kombinieren, d.h. hinter den einzelnen Links soll nur eine Grafik erscheinen und nicht der Linktext. Darüberhinaus möchte ich mit einer zeitgemäßen Navigation arbeiten, also mit einer HTML-Liste.

Der Ausgangs-HTML-Quellcode ist dieser:

<div id="navcontainer">
<ul id="navlist">
<li><a href="#" id="Eins">Item one</a></li>
<li><a href="#" id="Zwei">Item two</a></li>
<li><a href="#" id="Drei">Item three</a></li>
<li><a href="#" id="Vier">Item four</a></li>
<li><a href="#" id="Fuenf">Item five</a></li>
</ul>
</div>

Die Liste sieht dann erstmal so aus:

 

 

Das Sprite-Objekt, welches jedem Link zugewiesen werden soll, ist folgendes:

Navigations-Sprite - Verschieben von Hintergrundbildern durch CSS

Navigations-Sprite – Verschieben von Hintergrundbildern durch CSS

Über CSS lässt sich nun folgendes tun:

  • dem Link in jedem Listenpunkt einen Ausschnitt des Hintergrundbild/ Sprite zuweisen
  • die Liste in die „horizontale“ bringen
  • den Text der Links außerhalb des Displays bringen (also verschwinden lassen)

Zuerst die wichtigsten CSS-Befehle (ohne Sprite); die Erklärungen sind dem Kommentar zu entnehmen:

#navcontainer ul
{
border: 0;
margin: 0;
padding: 0;
list-style-type: none;
}
#navcontainer ul li
{
display: block; 
float: left; /* Liste verläuft horizontal */
padding: 0;
margin: 0;
}
#navcontainer ul li a{
text-indent:-9999em; /*Linktext verschwindet durch negativen Texteinzug */
display:block; /* über Block lässt sich nun dem a eine Breite und Höhe geben */
width:100px;
height:90px;
margin-right:5px;
}
Jetzt der CSS-Teil mit der Sprite-Zuweisung
#navcontainer ul li a#Eins{
background-image: url(sprite.png);
background-position: 0px 0px;
}
#navcontainer a:hover#Eins{
background-position: 0px -90px;
}
#navcontainer ul li a#Zwei{
background-image: url(sprite.png);
background-position: -100px 0px;
}
#navcontainer a:hover#Zwei{
background-position: -100px -90px;
}
#navcontainer ul li a#Drei{
background-image: url(sprite.png);
background-position: -200px 0px;
}
#navcontainer a:hover#Drei{
background-position: -200px -90px;
}
#navcontainer ul li a#Vier{
background-image: url(sprite.png);
background-position: -300px 0px;
}
#navcontainer a:hover#Vier{
background-position: -300px -90px;
}
#navcontainer ul li a#Fuenf{
background-image: url(sprite.png);
background-position: -400px 0px;
}
#navcontainer a:hover#Fuenf{
background-position: -400px -90px;
}

Jeder einzelnen ID wird nun das Sprite mit entsprechender Position (X und Y) zugewiesen.
Im Hover-Zustand wird das ganze einfach nur nach oben verschoben (durch negative Werte).

Eine Vorschau gibt es hier.

Viel Spaß damit 😉

Und wer möchte kann hier die psd-Datei runterladen..

In Teil 18 von „wie erstelle ich eine Homepage“ lassen wir dann Text um ein Bild herum fliessen..