Rollover-Bild per CSS ohne Verwendung von JavaScript

Oft sieht man Seiten, die Rollover-Bilder verwenden – doch sind die meist per JavaScript realisiert. Doch das geht auch einfacher mit CSS.

Die JavaScript-Methode

Allerdings darf man sich das nicht genau so vorstellen wie bei JavaScript. Mit JavaScript sieht ein Rollover so aus:

• Bild wird per <img ... /> eingebunden und bekommt zwei Attribute: onmouseover und onmouseout.
• Wenn die Maus im Browser über das Bild fährt, wird der JavaScript-Code in onmouseover ausgeführt – normalerweise steht dort drin, dass die Quelle (src="...") des Bildes geändert werden soll.
• Im Code von onmouseout steht dann, dass das Bild wieder auf die ursprüngliche Quelle zurückgesetzt werden soll.

Nachteile der JavaScript-Methode

1. Browser, die kein JavaScript können oder es nicht aktiviert haben, können den Bilderwechsel nicht darstellen.

Die CSS-Methode

In CSS sieht das ganze ein bisschen anders aus. Dort gibt es kein onmouseover, lediglich die Pseudoklasse :hover. Und in CSS kann man auch nicht einfach so die Attribute von HTML-Elementen ändern. Also muss man sich anders behelfen:

• Der wesentliche Unterschied zur JavaScript-Methode ist, dass kein Bild direkt eingebunden wird. In den Quelltext wird an der Stelle, an der das Bild erscheinen soll, etwas in der Form geschrieben: <div id="rolloverbild"></div>
• Nun wird in der CSS-Datei folgendes geschrieben:

  #rolloverbild {
      background-image:       url(./bild.jpg);
      width:                  100px;  /* Die Höhen- und Breiten- */
      height:                 100px;  /* Maße des Bildes...      */
  }

• Nun wird das Bild schon korrekt angezeigt. Lediglich das Rollover fehlt noch. Das kommt nun:

  #rolloverbild:hover {
      background-image:        url(./bild2.jpg);
  }

• ...und schon ist das CSS-Rollover fertig. Allerdings gibt es auch...

Nachteile von CSS-Rollovers

Es gibt leider auch Nachteile bei dieser Methode:

1. Der Internet-Explorer kann in keiner Version :hover auf nicht-<a>-Elemente anwenden. Das schließt also diese Methode für den IE aus, es sei denn, man nimmt tatsächlich ein a-Element, deklariert es als Block-Element und gibt ihm einen :hover-Effekt.
2. Da kein img-Element verwendet wird, kann kein alt-Attribut angegeben werden. Dies ist für Textbrowser und Screenreader aber sehr wichtig, wenn das Bild für das Verständnis des Textes sehr wichtig ist. Abhilfe schafft folgendes: In das div wird zusätzlich noch das Bild als img hineingeschrieben (mit Alt-Attribut) und per CSS als nicht darzustellen deklariert, mit #rolloverbild img { display: none; }.

Hier ein Beispiel für ein CSS-Rollover-Bild: