Sample 04 uses an overlay. To create it, the areas of the image showing water have been deleted and the file saved as .PNG (able to use transparency). This image overlays the main image, creating the impression, that only the water moves.

The file names "lake.html" and "lake.js" correspond with the file names in the sample that comes with the download of the script at JavaScript: lake. The following explanatory notes also refer to these files and show how to integrate the script from the HTML-page and set the parameters in the downloaded JavaScript lake.js.

lake.html - the page

The first step always is to reference the script from the HEAD section of your page:

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

The sample assumes that the script is located in the same directory as your page, otherwise the path has to be adjusted.

The second step is to insert a div-container into the body of your page at the position you want the image to be displayed. It is important to set the IDENTITY, in this case "lake" (id="lake"). It is on you to choose an identity, we will later set it as an parameter in the scriptfile. The div-container may be styled with CSS.

In this sample the image used by the script is already integrated statically in the webpage. Doing so, visitors having disabled JavaScript will at the least see the image.
For visitors having enabled JavaScript the static content of the div-container is of no relevance because the script replaces the content with the image set in the scriptfile.

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

That´s all as far as the webpage is concerned.

lake.js - the scriptfile

Now we adjust the parameters in the downoaded scriptfile "lake.js" to fit our needs. The sample shown above uses the following setting:

//*****parameters to set*****
 
var divid="lake";
    //The parameter "divid" points to the div-container to display the image.
 
var imagea='image.jpg';
    //The path to your image.
 
var pwidth=400;
    //Set this to the width of your image in pixel.
 
var pheight=267;
    //Set this to the height of your image in pixel.
 
var wavetop=180;
    //"wavetop" defines where to start the waves
    //measured from the top of your image (in pixel).
 
var wavebot=pheight;
    //"wavebot" defines the bottom end of the waves
    //measured from the top of your image (in pixel).
    //Usually this is the bottom of your image and you will do fine with the default of "pheight".
 
    //If you want your waves to end above the bottom end of your image set this to a
    //value (eg: var wavebot="220";).
 
var reverse=0;
    //"reverse" defines if the set part of your images gets rippled (0)
    //or if the above part gets mirrored down (1).
    //The sample above moves the given part, therefore: reverse=0;
 
var opaz=100;
    //If you use a second image to shimmer through the waves,
    //"opaz" defines the transparency.
    //The values are from 100 (opaque) to 0 (transparent).
 
var underlay=0;
    //If you use a second image to shimmer through the waves,
    //set this to the path to your image (eg: var underlay="image2.jpg").
    //Otherwise set this to 0.
 
var overlay="overlay.png";
    //If you use a partially transparent overlay,
     //set this to the path to your image (eg: var overlay="image2.png").
     //Otherwise set this to 0.
    //The sample above uses an overlay called "overlay.png".
 
var uwidth=pwidth;
    //"uwidth" allows to set a different width for the optional
    //underlay (in pixel).
    //Usually you will do fine with the default setting.
 
var uheight=wavebot-wavetop;
    //"uheight" allows to set a different height for the optional
     //underlay (in pixel).
    //Usually you will do fine with the default setting.
 
var steps=15;
   //"steps" defines the height of one wave in pixel.
 
var range=1;
    //"range" defines the maximum excursion of a wave.
    //A value of 10 means that the maximum way to the left and
    //to the right is 10 pixel.
 
    //If you have set "reverse" to 1 to mirror down the upper part of
    //your image, the displayed image gets clipped automatically at both sides
    //by the value you set for "range" to prevent the background from been seen.
 
var tim=110;
    //"tim" defines the timeout between to moves in milliseconds.
    //Setting this too low may cause errors (stack overflow).
 
var autostart=1;
    //Having set "autostart" to 1 the script starts at pageload.
    //If you want to start the script by link, set "autostart" to 0 and
    //integrate a link in your page:
     //eg: <a href="javascript:firstmove()">start now!</a>
 
//*****nothing more to do, have fun :) 

That´s all. The effect you achieve depends beside the choice of the image a lot from the values you set here and you should take the time to experiment with different values. Often a small change creates a large impact.