Lake JAVA Script
This is one of my favorite scripts. The effect is simply stunning, and although it has been around for years, it is still largely undiscovered and you will not find it on very many pages. The code is simple and loads very fast. Click Here to download.
Instructions
NOTE about Preview: one slight limitation - this appear to be a "web only" applet. I have only had success by placing this applet at the root of my website - including all the JAVA files. I have not gotten it to work from my hard drive. Also, the only way I can get the FrontPage preview to work is by making the
"codebase" statement point to the root of my website and I must be connected !!
The method, is that you actually have an image that is replicated as a mirror image immediately below. This forms two halves. Here is sample code of the HTML file from my own website:
<applet code="Lake.class" align="right" border="10" codebase="http://www.infocellar.com/" width="250" height="350">
<param name="image" value="http://www.infocellar.com/courthouse.jpg">
</applet>
Width and Height
The top half is you original image, and the bottom half is the mirror image, which shimmers like a lake. Therefore, in order to get a total image which approximates a square in dimensions - the top image should be about twice as wide as it is tall. This can vary, of course, but do not choose a square image as your source - this will result in a very tall lake image - twice as tall as the original image.
Width = actual Width of image
Height = (2 x actual height) - (5 to 10% actual height)
So for the courthouse.jpg example, the image itself is 250x181. Therefore, the dimensions in the HTML code are:
Width = 250
Height = (2x181) = 362 - 12
The 5 to 10% Reduction in Height - the image undulates, and shrinks, stretches, shrinks, stretches, etc. If you set the parameters of height to be exactly twice the height of the image (which may seem proper, but it has a problem), it will show a border along the bottom each time it shrinks. Therefore, calculate the height of the image as: 2 x Original image minus 15 pixels (approx). That will cure the effect of the white strip appearing at the bottom, rythmically. However, since the actual bottom of the image is below where the image bottom actually shows on the web page, of you try to place this java image side-by-side with another image (non-lake image) of the same size, they will not line up exactly. To get around this, set the Vertical alignment of each (using properties if you are using FrontPage) - to "Top"
Using a "Shore"
The sample above is actually a courthouse with a grass field in front of it - I
added the "shore". Since the bottom half is supposed to approximate a body of water, the best images to use as the source, are pictures that are taken from the water, of the shore. This can be a snapshot of the beach taken from the water, or a pool snapshit taken from within the pool. Typicall the bottom part of the original image will have water - you need to remove the water using an image editor, leaving only the shore and the area behind the shore (see the included picture, "sunset-256x138.jpg".
NOTE: if your picture has no water or shore - you can actually copy and paste a shore from another pic and blend it in with Photoshop.
Putting the Lake on Your Site
Now, you should copy all Lake JAVA files, including the image, to the "root" of your website - preferably to the root folder of a website (although it will "usually" work in a subfolder). You only need to edit one file . . . sample.htm, and then copy that code anywhere into any html file on your website.