Hovereffekte mittels CSS-Sprites

Hovereffekte werden gerne von Webdesignern genutzt. Mit ihnen ist es möglich, Farben oder Grafiken zu ändern, wenn man mit der Maus über das entsprechende Element drüberfährt. So werden Hovereffekte z.B. gerne bei Navigationsmenüs verwendet. Jeder Menüpunkt ist mit einer Hintergrundgrafik versehen. Bewegt man die Maus über einen Menüpunkt, so eine andere Hintergrundgrafik nachgeladen und der Menüpunkt wird somit optisch anders dargestellt.

ECHT VITAL VITAMIN C - 1 Dose mit 100 g Pulver

Werbung

So weit so gut. Meist wird dies durch verschiedene Hintergrundgrafiken realisiert, welche bei Bedarf einfach vom Browser nachgeladen werden. Dies hat u.U. unschöne Verzögerungseffekte zur Folge.

Ein Alternative bieten hier CSS-Sprites an. Diese ermöglichen es, verschiedene Hintergrundbilder anzuzeigen, obwohl nur ein Bild geladen wird. Der Trick besteht darin, dass dieses Bild aus mehreren nebeneinander (oder auch untereinander) angeordneten Einzelbildern besteht. Je nach Zustand wird der eine oder andere Teilbereich des Bildes angezeigt.

Das Hintergrundbild sieht dann so aus:

Wobei der dunkelblaue Bereich im Normalzustand des Links angezeigt wird, der hellblaue bein darüberfahren mit der Maus und der graue beim Anklicken.

Ich habe hier ein kleines CSS-Sprites Demo erstellt.

So geht’s:

Zuerst braucht man eine Navigation. Diese besteht der Einfachheit halber aus drei Links:

<div id="navi">
	<a href="#">Menuepunkt 1</a>
	<a href="#">Menuepunkt 2</a>
	<a href="#">Menuepunkt 3</a>
</div>

Als nächstes werden die Links im Bereich navi mittels CSS formatiert. Es wird für jeden der drei Zustände eines Links, also normal, hover und active das Erscheinungsbild festgelegt.
Die “Zauberei” liegt darin, dass man das Hintergrundbild so einbindet, dass lediglich der entsprechende Teilbereich angezeigt wird. Für die Zustände hover und active wird nun lediglich die Position des Hintergrundbildes verändert.

<style>
/* Hier wird der Hintergrind für jedes Navielement definiert*/
#navi a {
	width:150px;
	height:20px;
	margin:2px; 
	padding:5px;
	color:#ffffff;
	font-size: 14px;
	font-family:Verdana;
	font-weight:bold;
	display:block;
	background: url("background.jpg") 0 0 no-repeat;
	text-decoration:none;
}
/* Für hover und active wird nun lediglich die 
** Schriftfarbe geändert und der Hintergrund verschoben
*/
#navi a:hover {	
	color: #404040;
	background-position: 0 -30px;
}
#navi a:active {
	color:#ffffff;
	background-position: 0 -60px;
}
</style>

Schreibe einen Kommentar