---

---

---

---

---

Der MouseOver Effekt mit CSS

von Thomas Salvador, 10.03.2010

In "Der MouseOver Effekt" wurde der nach dem Javascript-Event onmouseover benannte Effekt vorgestellt und realisiert.

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" genutzt wurde.

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 ü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(http://brauchbar.de/images/bb-logo2.gif);
  width:399px;height:70px; }
img.einbild:hover {background-image: url(http://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

Hinweise

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

---

Kaffee- kasse: 1 EUR 3 EUR 5 EUR

---