CSS-Rollover - CSS

Hallo Tutorianer!

Da im CSS-Forum in letzter Zeit immer wieder die Frage auftaucht, wie sich denn mit "reinem" CSS, also ohne den Einsatz von Javascript, ein Rollover-Effekt (= Grafiktausch) für Links realisieren lässt, möchte ich in diesem Tutorial zwei mögliche Techniken vorstellen.

Anmerkung: Die für diesen Workshop verwendeten Grafiken sind von mir bewusst "einfach" gehalten (der Effekt mit der wechselnden Rahmenfarbe würde in der Praxis selbstverständlich ohne Grafiken umgesetzt werden), denn hier geht es ja vordergründig um die CSS-Technik.

CSS-Rollover mit background-image

Die drei "Zustände" sind in einzelnen Grafiken enthalten, die über die URI der background-image-Eigenschaft aufgerufen werden:

Name: bg_normal.png
Hits: 1554
Größe: 252 Bytes

Name: bg_normal.png
Hits: 1554
Größe: 252 Bytes

(bg_normal.png)

Name: bg_hover.png
Hits: 1330
Größe: 249 Bytes

(bg_hover.png)

Name: bg_active.png
Hits: 1322
Größe: 248 Bytes

(bg_active.png)

1.1 HTML-Code:

            
                    Code:
                  
                   	<ul id="nav1">
    <li><a href="#" id="current">link 1</a></li>
    <li><a href="#">link 2</a></li>
    <li><a href="#">link 3</a></li>
</ul>

1.2 CSS-Code:

            
                    Code:
                  
                   	/* Globale Einstellungen */

ul {
margin: 0;
padding: 0;
list-style: none;
}

a {
text-decoration: none;
text-align: center;
display: block; /* verleiht dem Inline-Element "Block-Level-Charakteristika" */
margin: 3px 0 0 0;
font: bold .8em verdana, sans-serif;
color: #000;
}

/* CSS-Rollover mit background-image */

ul#nav1 li a:link, ul#nav1 li a:visited {
width: 150px; /* Grafik-Breite */
line-height: 25px; /* Grafik-Höhe */
background-image: url(bg_normal.png); /* Pfad zum Hintergrundbild */
}

ul#nav1 li a:hover {
background-image: url(bg_hover.png); /* Pfad zum Hintergrundbild */
}

ul#nav1 li a:active, ul#nav1 li a#current {
background-image: url(bg_active.png); /* Pfad zum Hintergrundbild */
}

An dieser Stelle möchte ich darauf hinweisen, dass diese Technik gegenüber der nachfolgenden Methode einen kleinen "Schönheitsfehler" besitzt, der sich auf dem lokalen System / Server nicht bemerkbar macht, sondern erst zum Vorschein kommt, wenn die Seite vom Webserver aufgerufen wird: Beim allerersten Überfahren eines Links flackert sein Hintergrundbild kurzzeitig auf, da sich die Hover-Grafik bis zu diesem Zeitpunkt noch nicht im Browsercache befand, und erst durch den auslösenden "Hover"-Event vom Browser angefordert und in seinem Cache abgelegt wird.

Wer dennoch in seiner Website diese Methode zum Grafiktausch anwenden möchte, dem empfehle ich, die Hover-Grafik beim Seitenaufruf "vorzuladen" - sei es mit einem entsprechenden Javascript, oder mit Hilfe eines HTML-Elements, das für jede vorzuladende Bilddatei ein <img>-Tag enthält, und mit der CSS-Deklaration display:none oder visibility:hidden in der Seitendarstellung "unterdrückt" wird.

CSS-Rollover mit background-position

Die drei "Zustände" sind in einem Hintergrundbild vereint, dessen Werte für seine Hintergrundposition entsprechend gesetzt werden, und es auf diese Weise in diesem Beispiel in der Vertikalen "verschoben" wird:

Name: bg.png
Hits: 1488
Größe: 421 Bytes

Name: bg.png
Hits: 1488
Größe: 421 Bytes

(bg.png)

2.1 HTML-Code:

            
                    Code:
                  
                   	<ul id="nav2">
    <li><a href="#" id="current">link 1</a></li>
    <li><a href="#">link 2</a></li>
    <li><a href="#">link 3</a></li>
</ul>

2.2 CSS-Code:

            
                    Code:
                  
                   	/* Globale Einstellungen */

ul {
margin: 0;
padding: 0;
list-style: none;
}

a {
text-decoration: none;
text-align: center;
display: block; /* verleiht dem Inline-Element "Block-Level-Charakteristika" */
margin: 3px 0 0 0;
font: bold .8em verdana, sans-serif;
color: #000;
}

/* CSS-Rollover mit background-position */

ul#nav2 li a:link, ul#nav2 li a:visited {
width: 150px; /* Grafik-Breite */
line-height: 25px; /* Button-Höhe */
background-image: url(bg.png); /* Pfad zum Hintergrundbild */
background-position: left top; /* Hintergrundposition links - oben */
}

ul#nav2 li a:hover {
background-position: left center; /* Hintergrundposition links - mittig */
}

ul#nav2 li a:active, ul#nav2 li a#current {
background-position: left bottom; /* Hintergrundposition links - unten */
}

Das komplette Beispiel (HTML-Dokument incl. Stylesheet und Grafiken) hänge ich hier als ZIP-Datei an.

Gruß
Maik

[edit 13.10.2007]

Fortsetzung folgt:

CSS-Rollover - Teil 2