Make your own free website on
Click here to visit our sponsor
Please Visit Our Sponsors

Java Applet - Lake
With Overlay Tutorial
Original Artwork By
*NOTE* If you do not know how to make transparent images
or are new to Applets this is probably not one to try first.

Still want to try one? OK great. Hopefully I can explain this. :o)
The overlay effect uses one more line of code and one more image:
<param name="overlay" value="nameofyourpicture.gif">
Is the extra line of code and this is the one that must be transparent
in places where you want the Lake effect to show thru. Also of course
this second one must be a .gif (.jpg's can not be transparent). So we will
have the normal image like always for a Lake applet and the partially
transparent overlay gif. First make two copies of the image you are going
to use. The first one we need to simply chop off the bottom just above
the shore line (the part where the water will show through).
Look at mine used for this tutorial:
The original picture with bottom chopped off
The second copy will have to be a .gif so if it is a .jpg you will need to
convert it to a .gif (256 colors). Now make transparent the top of the
image and also all of the parts you want the Lake effect to show thru.
To see what i mean go look at mine used for this tutorial:
The overlay (copy of first image but now transparent)
Notice the parts around the trees are transparent and so is the top just
above where the waterline will be and that I did not chop off the top it is
still there just is transparent. Ok now the only tricky part, if you did
nothing else and tried using these 2 images you will find they do not line
up vertically to look like one picture. How come? Well, thats the #1 question
I get asked by far and is where lots get stuck. Basically same reason as you
must reduce the height="" in the normal Lake applet. But on the Overlay Lake
effect the height in the HTML code you leave equal to the height of the first
picture. Ok you say? Don't care why, just how to fix it so it will line up?
Ok, here is the trick: Simply chop off some off the top of the overlay gif
it's transparent anyway and by doing so will line up the 2 pictures so that
no grey shows in between. How much to chop off the top? Well, that always
depends on the height of the picture. Cut off a little off the top (of the overlay)
and test it, if not enough chop off a little more. Once they line up save both of
the images and upload them to the web. Below is the code that i used in the
example and a couple of comments. Good Luck. :o)

<center><table border=5 cellspacing=0 cellpadding=0><tr><td>
<applet code="Lake" width="236" height="300" alt="*">
<param name="image" value="mount.jpg">
<param name="overlay" value="overlay.gif">

Change "mount.jpg" to the name of your own picture.
The width of the applet = the width of your picture.
The height of the applet = the height of your picture (the first picture
with bottom chopped off not the height of the overlay image)
Change "overlay.gif" to the name of your own overlay picture.
The table command is not needed but draws a nice frame around it.
Still stuck?
Visit Our Frequently Asked Questions Help Page
It has 30 of the most commonly asked questions that we get.

More information and documentation can
be found at the Author's Homepage:
Java Applet Code by David Griffith
DG logo

Please feel free to link us if you get this working,
so others may find the help pages.
Or maybe sign our guestbook letting us know where to visit.
Feel free to use the logo below (right click with mouse to save)

java logo

Suggest Us To A Friend
Suggest This URL To A Friend
Lake Applet - #2
from help page
Lake Applet - #3
with Rock Parameter
Lake Applet - #4
with Overlay Tutorial
Directions & Code For Lake Applet More Applets
Copyright 1996 - 2001