USING THE LAKE APPLET
The Lake Applet takes an image, flips and mirrors it below and then "ripples" the bottom half to make it look like water.


  1. Download the class file for the applet here. Read the agreement, then click on "AGREE" to download a zip file from the applet's developer. Open the zip file with your winzip program and extract the "Lake.class" file. Do not be concerned that you cannot read this file. It is the script for the applet. You will need to upload this class file to the file manager on the server where your page is stored. Notice that the name of the file, "Lake.class", begins with a capital L. Be sure you name it that way since that is the way it is referred to in the applet's script.
  2. Choose an image. It should be one that looks like it might be the shore of a lake. It needs to have a fairly straight bottom line. If your image already has a bit of water on it at the bottom, you might want to crop that off since it will not ripple on the water that appears in the top half of the applet. You will need to upload this image file to your server's file manager also.This is the image used in the above example.
  3. Put the following code into your HTML document at the point where you want the applet to appear:
    <CENTER>
    <applet code=Lake.class
    id=Lake
    width=300 height=174>
    <param name=image
    value="ocean.jpg">
    </applet> </CENTER>

    Substitute the name of your image file for "ocean.jpg" .
    Change the width and the height to correspond to your own image. (width is in pixels) The width will be the true width of the image, the height will be 2 times (the image height) minus 10. Example:
    height of image used above is 92. So 92 x 2=184 ..... and 184-10=174
    (Note that you may have to play with that minus 10 a bit to get the bottom edge just right)



Additions you may make to the Lake Applet:
  1. image: already described above.
  2. as a hyperlink: you can make the applet a hyperlink by inserting this line of code before </applet>:
    <param name="href"
    value="http://____________">
     (insert the URL for your link in the blank)
  3. overlay: if you want a static picture to overlay the moving image of the lake. .
    insert this line of code:
    <param name="overlay"
    value="boat.gif">
    substitute "boat.gif" for what ever image you want to use. It is a good idea to use a transparent .GIF for this so that you will not hide so much of the rippling animation. You will have to size the image to be overlayed so that it will fit. And don't forget to upload this image to your server's file manager also.
    Here is the applet with a transparent image of a boat used as an overlay:
       



Credit for the Lake Applet should be given to:
David Griffiths
use this URL if you want to link to his site:
http://www.demon.co.uk/davidg



more advanced extras
or go to:
[ HOME , lesson 1 , lesson 2 , lesson 3
extras , advanced extras , colors , graduation ]



visit Ladybug's Garden, my personal pages