CSS-Rollover ohne Javascript (Mouseover, Preload) mit vier Zuständen (normal, hover, active, current)

Beispiel

Quellcode

  <ul>
   <li><a class="img1" href="#"></a></li>
   <li><a class="img2 current" href="#"></a></li>
   <li><a class="img3" href="#"></a></li>
  </ul>

Stylesheet

  ul {width:400px;height:86px;margin:0;padding:0;}

  ul li {float:left;margin:0;padding:3px;}

  ul li a {display:block;background:0 0 no-repeat #DDD;width:120px;height:80px;margin:0;padding:0;}

  ul li a.img1 {background-image:url(i/grafik1.jpg);}
  ul li a.img2 {background-image:url(i/grafik2.jpg);}
  ul li a.img3 {background-image:url(i/grafik3.jpg);}

  ul li a:hover {background-position:0 -80px;}
  ul li a:active {background-position:0 -160px;}
  ul li a.current {cursor:default;background-position:0 -240px;}

  /* für IE <= 6 */
  ul li a.current:hover {background-position:0 -240px;}

Erläuterungen

Funktionsweise
Beim überfahren eines Links mit der Maus wird die ihm zugewiesene Hintergundgrafik verschoben. Dadurch entsteht der Eindruck eines Bildwechsels, obwohl es sich um ein und dieselbe Grafik handelt.
Vorteile
Es wird kein Javascript verwendet. Sobald die Grafik einmal geladen ist, steht sie allen vier Zuständen zur Verfügung. Dadurch werden „Blinker“, also „Aussetzer“, verhindert, die beim Nachladen von Grafiken auftreten können, wenn der Benutzer mit der Maus über den Link fährt.
Aufbau
Jeder Link wird per display:block; als Blockelement dargestellt und bekommt eine feste Breite width:120px; und Höhe height:80px; zugewiesen. Außerdem wird der Hintergrund samt Position der Grafik (left:0, top:0), Wiederholung (keine) und Farbe festgelegt: background:0 0 no-repeat #DDD;.
Hintergrundgrafik
Die Hintergrundgrafik mit Beschreibung Die eigentliche Höhe der Grafik beträgt 320 Pixel. Sie unterteilt in vier Abschnitte, die den vier Zuständen entsprechen: normal, hover, active und current. Daraus ergibt sich die Höhe des Links (s. Funktionsweise) von 80 Pixeln pro Zustand.

Per CSS-Klasse kann jedem Link eine eigene Hintergrundgrafik zugewiesen werden: class="img1".

Bewegt man die Maus über den Link (a:hover) wird die Grafik um 80 Pixel nach oben verschoben und es wird die zweite „Zeile“ der Grafik (hover) angezeigt.

Klickt man auf den Link (a:active) wird die Grafik um 160 Pixel verschoben und die dritte „Zeile“ der Grafik erscheint (active).

Die vierte „Zeile“ wird durch die CSS-Klasse a.current aufgerufen. Wie bei den vorigen Zuständen wird auch hier die Grafik nach oben verschoben, allerdings um 240 Pixel. Außerdem ist in dieser Klasse dem Cursor die Eigenschaft default zugewiesen, sodass der Browser ihn als Pfeil und nicht als Hand darstellt (wie es bei Links ja sonst der Fall ist). Dies erweckt den Eindruck es handle sich (z.B. in einer Galerie) um das aktuelle (ausgewählte) Bild. Selbstverständlich bleibt es ein Link!