First, you can start with any image you want. One you create is fine but a scanned picture will be just fine too. Before you get started, download this zip file with everything you will need to understand what is going on.

Unzip the files into a temp directory (I use a, aa, aaa and so on to name my temporary file folders so as not to loose track of them) the readme file is there only as a copyright notice....so you may want to look at it. With all of the files unzipped in the same folder, you can open the lake.html file. If nothing is wrong (you are not "Java challenged" or the like) the page should load and the applet should run in just a moment.

Once the applet is running...I would like you to open the same lake.html document again in notepad. Here is the specific code that we are looking at.

By looking at the code above and the files in the zip, you can probably figure out most of what you need to know to create the effect on your own page. But we will go through them all one at a time.

• applet code="lake"
  This is referring to the lake.class file that is in the zip. Make sure it is in the same directory as the others for this applet to work as it is written here.
  
• param name="image"
  Is referring to the type of operational information that is required. Other param names might be Text, XOffset, YOffset etc. We will not need to do any modification of this tag, other than its value in the next step.
• value="newodds.jpg"
  The type of operational data was defined as 'image', so now the name or 'value' needs to be defined. You will see that I have named the picture in the example as "newodds.jpg" You of course will change this as you require to use your own pictures, just like any img src= tag.
• width=500 height=190
  This is the important part for making this applet look right. The width will be the same as the image you use. For instance....I am using an image (newodds.jpg) that is 500pixels in width. So, the width of the applet should be set to 500.
  
  The height of the newodds.jpg is however NOT 190 pixels. It is actually 100 px. Here is the trick. Take the height of your image x2 and subtract 10. Here is the formula for the newodds.jpg as you see it;
  100 x 2 = 200 - 10 = 190, so the height definition of the lake applet needs to be 190.

That is really all there is to it. Just make sure they are in the same file and copy the coding as I have it in the lake.html file. I have added 'cut here marks' to make it easy to get the right code. Just paste the code into your html file where you want it to be displayed in the page.