Kategorien
Webdesign

Graufilter rückwärts

Jeder kennt ihn, den Microsoft Filter gray(): Er wird nämlich bei Dr. Web benutzt, um die Grafiken bei Mausberührung ergrauen zu lassen. Das Ganze geht aber auch rückwärts, so dass die Bilder erst bei Berührung in vollem Glanz erstrahlen. In der Theorie ja,…

Jeder kennt ihn, den Microsoft Filter gray(): Er wird nämlich bei Dr. Web benutzt, um die Grafiken bei Mausberührung ergrauen zu lassen. 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>

2 Antworten auf „Graufilter rückwärts“

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.