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 : Wellenmuster 2 -


Ein Wellenmuster auf einem Bild mit JavaScript und dem CSS-Filter Wave.

Leider werden CSS-Filter nur vom Internet Explorer verstanden.


Demo:  Mouseover ↓


Der Quelltext:

<html>
  <head>
    <script language="javascript">
      var fr=77*2;

      function start() {
        image.style.filter="Wave(add=1, freq="+fr+", light=0, phase=1, strength=15)"

        if(fr!=77*3) setTimeout('fr++;start()',100);
        else fr=77*2;
      }
    </script>
  </head>

  <body>
    <p id="image" style="width:340" onmouseover="start()">
      <img src="kugeln.jpg" width="340" height="231">
    </p>
  </body>
</html>


Die Start- und Stopp-Frequenzen (hier 154=77*2 und 231=77*3) korrespondieren mit der Objekthöhe (hier 231).
Die width-Angabe für das Bild ist zwingend, sonst funktioniert's nicht.

Der verwendete CSS-Filter Wave besitzt vier Standart-Parameter:

freq - bestimmt die Wellenfrequenz, also die Anzahl der Wellen bezüglich der Höhe des Objekts.
light - definiert die Lichtstärke. Werte von 0-100.
phase - bestimmt wie steil die Wellenberge sind. Die Werte 0-100 entsprechen 0-360.
strength - bestimmt die Intensität des Filters. Werte von 0-255.

sowie optional:

add - bezieht das Ausgangsbild mit ein oder nicht (1 oder 0).


Download  Wellenmuster_2.zip (mit Bild ca. 11 kb)




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