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]"){

setTimeout("nereidFade("+object+","+destOp+","+rate+","+delta+")",0);
return;
}

clearTimeout(nereidFadeTimers[object.sourceIndex]);

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.

Bookmark setzen... These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Print
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Bloglines
  • MisterWong
  • MySpace
  • Reddit
  • SEOigg
  • Technorati
  • TwitThis
  • Y!GG
  • Google Bookmarks

Weiterführende Links: