Java & JavaScript


Home
Applets
Scripts
   Navigation:
 · Kontextmenü
 · Linkwechsler
   Dialogboxen:
 · Alert
 · Alert 2
 · Confirm
 · Prompt
   Animation:
 · Kreis
 · Kreis 2
 · Kreis 3
 · Drei Kreise
 · Spirale
 · Planetarium
 · Globus
   Grafik-Effekte:
 · Clipping
 · Clipping 2
 · Clipping 3
 · Alpha-Clipping
 · Fading
 · Wellenmuster
 · Wellenmuster 2
   Bildschirmschoner:
 · Proto
 · Marquee
 · Donut
 · Worm
 · Mondrian
 · Pacman
   Datum & Uhrzeit:
 · Countdown
 · Countup
 · Wochentag
 · Last Modified
   Fraktale:
 · Apfelmännchen
 · Apfelmännchen 2
 · Juliamenge
 · Juliamenge 2
 · C-Wert-Generator
   Mathematik:
 · Primzahlen
 · Primzahlen 2
   Verschiedenes:
 · Dynamic Popup
 · TextArea Counter
 · Warteschleife
 · Mausschreiber
Gäste
Kontakt

- JavaScript : Grafik-Effekte : Fading -


Ein Bild mit Hilfe von JavaScript und dem CSS Alpha-Filter ein- und ausblenden.

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)




© 2001-2004 Albert Kluge - Alle Rechte vorbehalten
Impressum | Datenschutz | Nutzung | eMail