CSS
Diese Seite drucken Hier können Sie uns eine Emaiil schreiben zurück Zur Übersicht vorwärts Links | Archiv   Letzte Änderungen 21.08.2019
     
Graufilter + rückwärts

Jeder kennt ihn, den Microsoft Filter gray(): Um die Grafiken bei Mausberührung ergrauen zu lassen.

A:hover .grau {
FILTER: gray()
}

<img src="fnlogo_schatten.gif" width="84" height="84" class="grau" border="1" alt="Illustration">

Das Ganze geht aber auch rückwärts, so dass die Bilder erst bei Berührung in vollem Glanz erstrahlen.

In der Theorie ja, in der Praxis aber nur selten. Grund: von den derzeitigen Browsern beherrscht nur Mozilla/Netscape das "hovern" korrekt. Alle anderen sollten mit den kommenden Versionen nachziehen.

Live-Demo

Zuerst erstellen wir die beiden Style Sheet Klassen .active und .inactive:

.active {filter: chroma();}
.inactive {filter: gray();}

Die Klasse .active wird später mit JavaScript bei Mausberührung zugewiesen. Der Microsoft-Filter chroma() sorgt eigentlich dafür, dass eine Farbe des Bildes transparent wird. Hier wird er ohne Parameter aufgerufen und hebt nur den Filter gray() auf.

In der Klasse .inactive wird über den Grau-Filter angegeben, dass alle Bilder oder Seitenelemente dieser Klasse grau sind und nicht in den eigentlichen Farben angezeigt werden.

Mit Javascript werden ebenfalls die Funktionen aktiv() und inaktiv() erstellt. Sie weisen dem Element die entsprechende Style Sheet Klasse - .active oder .inactive - zu:

<script language="javascript">
function aktiv() { event.srcElement.className='active'; }
function inaktiv() { event.srcElement.className='inactive'; }
</script>

Und hier das Bild, das per onmouseover und onmouseout die JavaScript-Funktionen aufruft. Es wird per default der Klasse "inactive" zugewiesen, die JavaScript-Funktion aktiv() kehrt das Ganze ins Gegenteil um.

<A HREF="#"><IMG CLASS="inactive" SRC="bild1.gif" BORDER="0" onmouseover="aktiv()" onmouseout="inaktiv()"></A>

(nro)