Fade In – Fade Out

Fade in, und Fade out Effekte mit JavaScript sind mit dem Alpha Filter leicht gemacht. Bei MouseOver wird die Grafik langsam eingeblendet, bei MouseOut wieder andersherum.

Grundsätzlich ist dieser Effekt nur mit dem InternetExplorer
möglich. Das Script ermittelt das Element auf welches es angewendet
werden soll. Der Effekt an sich ist schnell erstellt. Einfach das
Skript einbinden, und die entsprechenden Eventhandler setzten.

Live Demo

<script
>
nereidFadeObjects = new Object();
nereidFadeTimers = new Object();

function nereidFade(object, destOp, rate,
delta){
if (!document.all)
return
if (object != "[object]"){

diff = destOp-object.filters.alpha.opacity;
direction = 1;
if (object.filters.alpha.opacity > destOp){
direction = -1;
}
delta=Math.min(direction*diff,delta);
object.filters.alpha.opacity+=direction*delta;

if (object.filters.alpha.opacity != destOp){
nereidFadeObjects[object.sourceIndex]=object;

nereidFadeTimers[object.sourceIndex]=
setTimeout("nereidFade
(nereidFadeObjects["+object.sourceIndex+"],
"+destOp+","+rate+","+delta+")",rate);
}
}

</script>

Das Skript
verändert den zugewiesenen opacity – Wert welcher dem
Alpha Filter angibt, wieviel Prozent des Elements sichtbar sein
sollen. Je geringer dieser Wert ist, desto weniger ist folglich
vom Bild zu sehen.
An die Funktion werden vier Werte übergeben.

function nereidFade(object, destOp,
rate, delta)


object steht für das Element, wie also ein Bild usw. Dieser
Wert ist standardmäßig this

destOp steht für den Endwert für den opacity-Wert.
Bis zu diesem Wert hin wird der Effekt durchgeführt. Folglich
ist der destOp-Wert bei MouseOver höher als bei MouseOut.

rate gibt die Zeit an, in der ein Wechsel von Fade-In zu
Fade-Out oder andersherum erfolgen soll. Je kleiner die Zahl ist,
desto schneller erfolgt der Effekt.

delta gibt die Schrittgröße an, um die der opacity-Wert
erhöht, bzw. verringert werden soll, je größer
dieser Wert, desto schneller ist der Effekt vollkommen.

Der Aufruf dieses Effektes erfolgt also mit den Eventhandlern "onmouseover"
und "onmouseout".

Der Aufruf bei einem einfache Bild sieht dann so aus:

<img src="../images/banner/150_100_1.gif" width="150"
height="100" onmouseover="nereidFade(this,100,25,1)"
style="filter: alpha(opacity=40);"
onmouseout="nereidFade(this,40,25,1)">

Der opacity-Wert im style-Attribut sollte sich mit dem Wert bei
onmouseout decken, da der Effekt ja sonst nicht flüssig
wäre.