Fading mit JavaScript und dem CSS Alpha-Filter

Mit der CSS-Anweisung "filter:Alpha(opacity=a, finishopacity=b, style=c)" kann ein Bild mit dem Hintergrund verschmolzen werden. Mit JavaScript wird dann der Fading-Effekt erzeugt.

Leider werden CSS-Filter nur vom Internet Explorer verstanden.

Demo:

Der Quelltext:

<html>
  <head>
    <script language="javascript">
      var oc=0;

      function fadeIn() {
        image.style.filter="Alpha(opacity="+oc+", finishopacity=0, style=2)"
        if(oc!=100) setTimeout('oc++;fadeIn()',40);
        else setTimeout('fadeOut()',5000);
      }

      function fadeOut() {
        image.style.filter="Alpha(opacity="+oc+", finishopacity=0, style=2)"
        if(oc!=0) setTimeout('oc--;fadeOut()',40);
        else setTimeout('fadeIn()',1000);
      }
    </script>
  </head>

  <body onload="fadeIn()">
    <p id="image" style="width:220;filter:Alpha(opacity=0,finishopacity=0,style=2)">
      <img src="familie.jpg" width="220" height="260">
    </p>
  </body>
</html>

Der verwendete CSS Alpha-Filter besitzt drei Standart-Parameter:

opacity - Grad der Verschmelzung (am Rand, wenn style gleich 2 oder 3). Werte 0-100.
finishopacity - Grad der Verschmelzung (in der Mitte, wenn style gleich 2 oder 3). Werte 0-100.
style - Form der Verschmelzung: 0=gleichförmig, 1=linear, 2=kreisförmig, 3=rechteckig.

Wurde style=1 gewählt, kann ein individuelles (lineares) Verschmelzungsmuster erstellt werden. Dazu sind statt opacity und finishopacity die Parameter startx, starty, finishx und finishy anzugeben.

Download Fading.zip (mit Bild ca. 15 kb)