Test Index · Photo Borders · Table of sliced images - Rounded corners · Sliced images and manually linked · Overlap Images · Create a Watermark · Gif Png Transparency · Buttons-Image Links · Image Names · Image Theft · Lake Applet · Other applets · Slideshow1 · Slideshow2 · Slideshow3 · Galleries · DD Thumbnail Viewer · image map · xara thumbnail · Random Image · LOGO BRANDING · Animated Image · photo with sound

Lake: moving water on static image

ALERT!! Windows XP SP2 <<<< makes these Lake applets look like this Since Microsoft XP released Service Pack 2, the Lake.class applet will not work correctly! To avoid the problem, STOP USING the Lake.class file and begin using the newer lake.class file that is available here: Download lake.class In the instructions below, replace the Lake with lake! >> See what what a difference it makes here << (The lowercase letter and the newer class file really matter!)
Instructions included with these:	More moving water examples:
TEST 1: Original Lake and variations TEST 2: Liberty boat of sailors coming to shore (with intricate large overlay) NOTE: this page will take some time to load! Looking for a way to reflect an animated image?	2 More USS Rankin ship images (these have visual only no detail instructions) [Applet: Lake]

TEST 1: Lake (original)

This test sample is an updated version and several variations of KW's Tutorial #13 shown here: Tutorial List

Credits: David Griffiths wrote the applet and

Kevin Weilbacher modified the code

that goes with it to work in Trellix/CSB.

IMPORTANT: The Lake.class offered on Java Script Kit site will not work with this set of instructions. Here is the correct version:

Download Lake.class

(update: see Windows XP SP2 notice above before downloading. Recommend the other file!)

Download image here:

Download dusk.gif

If you have Windows XP and can only see a GRAY BOX instead of images:

Microsoft did not ship the Java Virtual Machine (needed for running the applets, not Javascript) with early copies of Windows XP. The program is free and easily installed and enabled. Download Java at :

http://java.sun.com/getjava/

Take a plain image:

And transform it into:

Important note: This tutorial was originally made with Lake.class not lake.class! The capital L matters!

This is a sample of David Griffith's original code:

</applet>

NOTE: if you are NOT using CSB or TRELLIX to build your site:

1. Adjust your image size as discussed in step 1 below

2. Use the code ABOVE instead of the code shown in step 2, just changing the image size and name.

3. FTP your image and class file to your site.

4. Publish.

1. Adjust image size: Use a photo program to check pixel size. Width stays the same. Height of image increased: multiply by 1.9 Ex: height is 199 199 x 1.9 = 378.1 = rounded to 380 pixels Use your calculated height in the inserted HTML code
CSB User: Insert > HTML is same as Trellix Webgem! 2. Insert the code: into Webgem (Insert > HTML) CSB User: still use ^GEMDIR in code! <applet code="Lake" codebase=^GEMDIR width=392 height=380> <param name="image" value="^GEMDIR/dusk.gif"> <param name="href" value="http://www.samisite.com"> </applet> NOTE: Items in red are changed to match yours (not using CSB or Trellix to build your site? read this)	CSB User: Files for this component is same as Gem Files! 3. Insert both files into Gem files (Webcomponent) Make sure capitalization is same as you used in the code (step 2)! This step eliminates the need to FTP your files to your site! 4. Publish!
NOTE: if using frames, the link will load in current frame unless you add: <param name="target" value="_top"> (added to variation 2) or to open in a new window, add: <param name="target" value="_blank"> (added to variation 3)

VARIATION 1: add a border

Add items in blue for a tight border around image:

<center><table border=5 cellspacing=0 cellpadding=0><tr><td>

</applet></td></tr></table></center>

NOTE: Items in red are changed to match yours

VARIATION 2: smaller image overlay

This would be great for a logo or text- overlay must be gif with transparency

Add items in blue for a tight border around image

& item in red allows you to add an image on top of the original picture

& item in light blue breaks frame on link:

<center><table border=7 cellspacing=0 cellpadding=0><tr><td>

<param name="overlay" value="^GEMDIR/boat.gif">

</applet></td></tr></table></center>

NOTE: Items in red are changed to match yours

sailboat001.gif image is 53x100 pixels and automatically centers on overlay

VARIATION 3: large image overlay

Use for a view through (trees, window, stateroom window on boat, etc)

overlay image must be gif with transparency

item in red allows you to add an image on top of the original picture

& item in light blue opens into a new window on link:

<param name="overlay" value="^GEMDIR/seagrapes.gif">

</applet>

NOTE: Items in red are changed to match yours

seagrapes.gif image is 392 x 395 pixels and automatically centers on overlay

overlay image: The seagrape leaves were manually cut out of another image, placed into a transparent image which was expanded longer than the overall applet so all edges would be covered, other wise top edge of dusk would show above seagrapes. Done through the trial and error method tweaking until the final image was satisfactory.)

SEAGRAPES IMAGE

Enjoy!

REFERENCE AND COMPARISON: