This tutorial brought to you by Eros Applets

You wanna learn how to make lake applets, eh? Well, you've come to the right place. After you complete "Lake Applet " tutorial, not only will you know how to make your own lake applets, you'll also go home with your very own code file and a free photo image to boot. Without further ado, let's get cracking!

Down and dirty, this is all you do: Download lake.class, a graphic, type in this:

<table border="5"><tr><td>
<applet code="lake.class" width="300" height="256">
<param name="image" value="swans3.jpg">

and it looks like this:

What's that?? You want more details?? Well, ok. If you insist...
Here's a list of what you'll need before you start:

  1. The lake.class file. This is the magical code file that David Griffiths invented. To download it now, right click lake.class and save it to your hard disk. In Netscape I believe you hit right click, then "save link as" and in IE, right click and "save target as." Don't save lake.class as a text file - use "class document" or "all files." If your system gives you trouble saving the lake.class - for example, it only allows a 3 digit extension of lake.cla instead of the full lake.class - you'll need to down load the lake.zip file instead. Click this lake.zip and try saving that. The lake.zip file contains the lake.class file and the sample graphic (swans3.jpg). You'll then need to unzip (extract) the files somewhere on your hard drive and then upload it to your web page server. Upload the file into the same directory as the html file that the applet will be placed on. Example: You have a directory called applets and you want to put an applet on a page in that directory called applets1.html. You should upload the lake.class file into that applets directory for the applet to work. If you cannot do that, or if you have an Angelfire or Homestead site (Angelfire automatically puts html files in one directory and all others - including lake.class - into the IMAGES directory, with Homestead placing the files in the FILES directory), then you will need to use code-base, which I will explain a little later.
  2. You'll need a graphic. Any graphic with a jpg or gif format should work, and I am supplying one for you to use. It's the one used for this tutorial and feel free to use it on your own home page. You can save it by clicking swans3.jpg. The lake.zip file will also contain the graphic in addition to the lake.class file.
  3. For this tutorial it won't be necessary, but if you plan on making your own applets, you'll need a viewer program that lets you view the width and height of the graphic that you are using. Netscape gives the dimensions of graphics in the title bar when they are displayed in a window. Also, many free viewer programs are available and a good place to check out is Tucows.com.
  4. And last of course is the few lines of code to paste onto your page. Here it is again:

<table border="5"><tr><td>
<applet code="lake.class" width="300" height="256">
<param name="image" value="swans3.jpg">

Ok, let's pick apart this sucker and make some sense of it.

The first line:
<table border="5"><tr><td>, and the last line </td></tr></table> are table codes that are used for making the frame border around the applet. This isn't necessary for the applet to work, so if you decide that you don't want a border, either delete the tags or change the table border="5" to "0."

The second line:
<applet code="lake.class" width="300" height="256"> All you need to be concerned with are the width and height tags. Applet code="lake.class" just tells the computer that you want to run that code. Width="300" is the actual width of the graphic that you are using, and it's a good idea to always use the exact width in that part of the code or it could cause some distortion. Now the height is just a tad different. The general rule of thumb with lake applets is to take the height of the graphic, double that, and then subract 10 to 20 pixels from that for the "height" to be used in the code. The swans3.jpg is 138 pixels high, so double that is 276 and subtract 20 gives you a height of 256 to be used in the code. The number you subtract can vary but should be at least 10 pixels or you'll see an ugly gap at the bottom.

The third line:
<param name="image" value="swans3.jpg"> All you need to worry about is the "swans3.jpg" part. If you use another image instead of swans3.jpg, simply substitute swans3.jpg with that image file name. Normally your images will be in the same directory as your html files, but if by chance you have your images in a separate directory, such as "photos" you'll need to include that directory name. It would then look like this: <param name="image" value="photos/swans3.jpg">.

The fourth line:
</applet> This is the closing tag for the applet.
</td></tr></table> These are the closing tags for the table which makes the frame border. Note: placing </applet></td></tr></table> on the same line eliminates the small gap that may appear at the right or on the bottom between the applet and the frame border. (Thanks Gus!)

Well, that's about it. Think ya can do it? I know you can. {:-). Once you get through the first couple, they are a piece of cake and a lot of fun to do. You can also experiment with different looks by adjusting the table borders and cellspacing, and adjusting the height in the code to suit your needs.

Ok, let's summarize, then I will briefly talk about codebase for Angelfire sites.

  • Download the lake.class file and upload it to your server into the directory that will be holding the html file of the applet.
  • Make sure the lake.class gets renamed exactly to lake.class if your uploading changes it.
  • Use the graphic here or a jpg or gif of your own. Get the width and height.
  • Type in the code. Using your graphic, change the swans3.jpg to whatever you called it.
  • Using your own graphic, adjust the width, height, and file name accordingly. Make the height in the code twice the height of the graphic minus 10-20 pixels.


Special note to Geocities site owners: When using the Geo Editor and you try to preview your applet, it will not display. You'll probably get a message something like "cannot find lake.class." That's a Geo quirk, but if you uploaded the lake.class file properly, you should see your applet after you save the file and then view it. Thanks to Shelley for reminding me about that. {:-)

*Angelfire UPDATE*
Angelfire has changed their policy of placing all image files into the "images" directory, including the lake.class. You should now be able to create lake applets using the above tutorial. I will leave the "special" tutorial in place below for other web hosts that this may apply to.

Angelfire site owners... you still here? Your situation is a tad different. Angelfire does not give you a choice where to put your files. All html files go in the main directory and every other file, including lake.class, will automatically go into the images directory. To get around that, you need to use codebase in your code. Here is the code again for the above tutorial:

<table border="5"><tr><td>
<applet code="lake.class" width="300" height="256">
<param name="image" value="swans3.jpg">

Below is an example of the code including codebase:

<table border="5"><tr><td>
<applet codebase="images/" code="lake.class" width="300" height="256">
<param name="image" value="images/swans3.jpg">

See the differences? Note the changes in lines 2 and 3 and apply them to your site.

Follow the above Angelfire instructions EXCEPT substitute IMAGES with FILES. An example of a Homestead lake applet would look like this:

<table border="5"><tr><td>
<applet codebase="files/" code="lake.class" width="300" height="256">
<param name="image" value="files/swans3.jpg">

WHEWWWWWW..... I think that's it!

I hope this little class helps you out. It is really not as complicated as it may appear, but I tried to cover all aspects of the code so you would know what the hey you are typing into your page. If you need further help, visit our Lake Applet Forum where our experts are awating your questions.

IMPORTANT NOTE: Please re-read this page carefully before emailing me. Also, be specific. Make sure you include the page address you are trying to put the lake applet on. Sending me a "It doesn't work" message with no page address or specifics kind of makes it tough to see what you did wrong. Click Here to send me an email. Thanks

This tutorial is entirely in my words (can't ya tell by my babble? haha), but if you like this, feel free to copy it and use it on your page to help your visitors, or if you wish, link this page on your site. There are no obligations at all. I do hope though that once you get your lake applets on your page that you will consider joining my Web Ring, "The Ring of Lake Applets."

If you "graduated" from Lake Applets and feel creative, take my Lake Applets Overlay course and learn how to create lakes using the very cool 3-D overlay effect.

Want another opinion or wanna learn even more? Click HERE to visit the Lake Applet Tutorials and Tips Page, brought to you by the members of "The Ring of Lake Applets."

Eros applets tutorials