Das erste Beispiel zeigt die "übliche" Verwendung des Scripts. Für einen Bereich eines Bildes wird eine Wellenbewegung simuliert.

Die Bezeichnungen "lake.html" und "lake.js" entsprechen den Dateinamen in dem Beispiel, das im Download des Scripts hier Javascript: Lake enthalten ist. Die nachfolgenden Erklärungen beziehen sich auf die Dateien im Beispiel und erläutern nur die Einbindung in eine Webseite und die Konfiguration des heruntergeladenen Scripts lake.js.

lake.html - die Webseite

Der erste Schritt zur Verwendung ist jeweils die Einbindung des Scripts in die Webseite. Dazu wird es im HEAD-Bereich der Seite verlinkt:

<script language="JavaScript" type="text/javascript" src="lake.js"></script>

Das Beispiel geht davon aus, dass das Script im selben Verzeichnis liegt wie die Webseite.
Anderfalls ist der Pfad entsprechend anzupassen.

Im zweiten Schritt wird im BODY-Bereich der Seite an der gewünschten Stelle ein DIV-Container eingefügt, der das Bild enthalten wird. Wichtig dabei ist die IDENTITY, in diesem Fall "lake" (id="lake"). Sie kann frei gewählt werden, im Script werden wir sie dann als Parameter setzen. Der Container kann beliebig positioniert und formatiert werden.
In diesem Beispiel ist bereits jetzt das Bild eingebunden, mit dem das Script dann arbeitet. Das hat den Vorteil, dass Besuchern mit deaktiviertem JavaScript zumindest das Bild angezeigt wird.
Für Besucher mit aktiviertem JavaScript hat der statische Inhalt des DIV-Containers keine Relevanz, da er beim Laden der Seite vom Script ersetzt wird.

<div id="lake" style="margin:25px;">
  <img src="image.jpg" style="width:400px;height:267px;" />
</div>

Damit sind in der Seite selbst alle nötigen Vorbereitungen getroffen.

lake.js - die Scriptdatei

//*****parameters to set*****
 
var divid="lake";
    //Der Parameter "divid" teilt dem Script mit, in welchem
    //DIV-Container das Bild dargestellt werden soll.
 
var imagea='image.jpg';
    //Hier setzen wir den Pfad zum Bild.
 
var pwidth=400;
    //"pwidth" Ist die Breite des Bildes in Pixel.
 
var pheight=267;
    //"pheight" Ist die Höhe des Bildes in Pixel.
 
var wavetop=108;
    //"wavetop" legt fest, wo die Wellen beginnen sollen,
    //ausgehend vom oberen Bildrand (in Pixel)
 
var wavebot=pheight;
    //"wavebot" legt fest, wo die Wellen enden, ausgehend vom oberen Bildrand (in Pixel).
    //Üblicherweise ist das der untere Bildrand und der Wert "pheight" kann belassen werden.
    //Sollen die Wellen vor dem unteren Bildrand enden, dann ist hier wie bei "wavetop" der
    //Abstand vom oberen Bildrand in Pixel anzugeben. z.B.: var wavebot="220";
 
var reverse=0;
    //"reverse" legt fest, ob der angegebene Teil des Bildes bewegt wird (0)
    //oder ob der darüberliegende Teil des Bildes als Reflexion
    //heruntergespiegelt werden soll (1).
    //In diesem Beispiel bewegen wir den angegebenen Teil des Bildes, also: reverse=0;
 
var opaz=100;
    //Wenn ein zweites Bild verwendet wird, das durch die Wellen durchschimmert,
    //dann kann hier die entsprechende Transparenz festgelegt werden.
    //Die möglichen Werte reichen von 100 (undurchsichtig) bis 0 (transparent).
 
var underlay=0;
    //Wird ein zweites Bild verwendet, das durch die Wellen durchschimmert,
    //dann wird hier der entsprechende Pfad angegeben (z.B.: var underlay="image2.jpg").
    //Andernfalls bleibt der Parameter auf 0.
 
var overlay=0;
    //Wird das erste Bild mit einem teilweise transparenten Bild überblendet,
     //dann wird hier der entsprechende Pfad angegeben (z.B.: var overlay="image2.png").
     //Andernfalls bleibt der Parameter auf 0.
 
var uwidth=pwidth;
    //Mit "uwidth" kann für das "unterblendete" Bild eine
    //abweichende Breite (in Pixel) festgelegt werden.
    //In der Regel kann der default-Wert belassen werden.
 
var uheight=wavebot-wavetop;
    //Mit "uheight" kann für das "unterblendete" Bild eine
    //abweichende Höhe (in Pixel) festgelegt werden.
     //In der Regel kann der default-Wert belassen werden.
 
var steps=30;
   //Die Variable "steps" legt die Höhe einer "Welle" in Pixel fest.
 
var range=2;
    //"range" legt fest, um wieviele Pixel eine Welle seitlich ausschwingt.
    //Ein Wert von 10 bedeutet z.B., dass jede Welle maximal 10 Pixel
    //nach links und 10 Pixel nach rechts auslenkt.
 
    //Stellt man den Parameter "reverse" auf 1 um den oberen Bereich eines Bildes 
    //nach unten zu spiegeln, dann wird das Bild links und rechts automatisch um den 
    //Wert "range" beschnitten, um das Durchscheinen des Hintergrundes zu vermeiden.
 
var tim=90;
    //"tim" definiert das Timeout zwischen zwei Bewegungen in Tausendstelsekunden.
    //Setzt man den Wert zu niedrig, dann kann das zu Problemen bei der Verarbeitung
    //der Befehle führen (stack-overflow).
 
var autostart=1;
    //Ist "autostart" auf 1, dann startet das Script automatisch mit dem Laden der Seite.
    //Will man es manuell starten, dann setzt man "autostart" auf 0 und bindet
    //in der Seite einen entsprechenden Link ein:
    //z.B.: <a href="javascript:firstmove()">los jetzt!</a>
 
//*****nothing more to do, have fun :)