Der MouseOver Effekt mit CSS

von Thomas Salvador.

In "Der MouseOver Effekt" wurde der nach dem Javascript-Event onmouseover benannte Effekt vorgestellt und realisiert. Er nutzt das Event-Attribut onmouseover, um beim Zeigen auf das Element JavaScript-Code auszuführen. Der CSS MouseOver-Effekt realisiert sozusagen eine CSS onmouseover Variante.

Dabei wurde auch gezeigt, dass es durch diese Vorgehensweise nicht notwendig ist, dass das zu wechselnde Objekt auch der Auslöser des Effektes ist. Dort wurde ein unabhängiges Bild über einen Textlink manipuliert.

Allerdings ist der übliche Fall genau der, wo auslösendes und zu änderndes Objekt gleich ist. Man möchte ja eben zeigen, dass man auf diesen Link zeigt.

Dies ist mit den dort vorgestellten Routinen auch möglich, aber umständlich.

Leichter ist es mit CSS, wo die Pseudo-Klasse :hover ausgenutzt wird, die schon in "Der HOVER-Effekt" Verwendung fand.

Der Source

Die Idee ist, das Bild mit CSS zu beschreiben und dabei zwei Angaben zu machen, einmal mit und einmal ohne :hover.

Eigentlich richtig ist es so:

<style type="text/css">
img.einbild { content: url(normal.gif);width:399px;height:70px; }
img.einbild:hover {content: url(aktiv.gif);width:399px;height:70px; }
</style>

was so genutzt werden würde:

<img class="einbild" alt="Ein Bild" />

Das Problem ist, dass diese Form von den Browsern nicht gut unterstützt wird. Bei nicht unterstützenden Browsern, funktioniert die Darstellung dieser CSS MouseOver-Variante überhaupt nicht.

Gut unterstützt ist ein Workaround, bei dem das Bild als Hintergrundbild gesetzt wird. Eigentlicher Inhalt ist dann ein transparentes Bild, zum Beispiel das blind-Pixel. Es lässt entsprechend den Hintergrund durchscheinen.

<style type="text/css">
img.einbild { background-image: url(normal.gif);width:399px;height:70px; }
img.einbild:hover { background-image: url(aktiv.gif);width:399px;height:70px; }
</style>

Nutzen Sie diese Definition in der Form:

<img src="blind.gif" width="399" height="70" class="einbild" alt="Ein Bild" />

Beispiel

<style type="text/css">
img.einbild {background-image: url(//brauchbar.de/images/bb-logo2.gif);
  width:399px;height:70px; }
img.einbild:hover {background-image: url(//brauchbar.de/images/bb-logo3.gif);
  width:399px;height:70px; }
</style>

<img src="blind.gif" width="399" height="70" class="einbild" alt="Ein Bild" />

liefert

Ein Bild

Hinweise

Der wesentliche Vorteil des CSS MouseOver-Effektes liegt darin, dass er ohne JavaScript auskommt, also insbesondere auch bei Nutzern funktioniert, die keine Scriptunterstützung haben. Die Seite wird dadurch zugänglicher.

Dies spricht deutlich für den MouseOver-Effekt in CSS, da MouseOver an sich eine Formatierung bzw. die Änderung einer Formatierung darstellt, also klar in den Aufgabenbereich der Style Sheets fällt.

Beachten Sie bitte, dass in dieser CSS MouseOver-Variante auslösendes und betroffenes Objekt generell gleich sind. Möchten Sie mit einem Objekt (Link, Bild, ...) ein anderes ändern, nutzen Sie die Javascript-Version.