Lake Applet

<body topmargin=0 leftmargin=0 marginheight=0 marginwidth=0> <table cellpadding=0 cellspacing=0 border=0><tr> <td valign="top" height=50 BGCOLOR="#660099" TEXT="#080000"> <div> <TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="725" BORDERCOLORLIGHT="#C0C0C0" BORDERCOLORDARK="#808080" FRAME="VOID" RULES="NONE" ALIGN="LEFT" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=CENTER HEIGHT= 33 ><NOBR><div> <B>Sami's Site: CSB - Trellix Support and Tests</B></div> </NOBR></tD> <tD VALIGN=CENTER WIDTH="71"><div> <A HREF="id139.htm" TARGET="_top" TITLE="Image Theft"><IMG SRC="640070e0.png" border=0 width="7" height="14" ALT="previous" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></A>  <IMG BORDER="0" SRC="1x1.gif" HEIGHT="14" ALIGN="BOTTOM" HSPACE="0" VSPACE="0" WIDTH="14">  <A HREF="id109.htm" TARGET="_top" TITLE="Other applets"><IMG SRC="642070e0.png" border=0 width="7" height="14" ALT="next" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></A></div> </tD> <tD VALIGN=CENTER><NOBR><div> <DIV style="TEXT-ALIGN: center"> <STYLE type=text/css> #rollbutton a { color: #C0DCC0; font-size:12px; font-weight: bold; text-decoration: none; border:2px outset #D3D3D3; background-color:#680098; display: block; width: 85px; height: 19px; padding: 0px; } #rollbutton a:hover { background-color: #C0DCC0; color:#680098; padding-left: 3px; border:2px inset #D3D3D3; } </STYLE> <DIV id=rollbutton> <A href="http://www.samisite.com" title="Samisite.com Home Page" target="_top" onfocus="this.blur()">HOME</A> <A href="http://www.forum.samisite.com" title="Visit the Samisite Webmaster Community Forum" target="_top" onfocus="this.blur()">FORUM</A></DIV> </DIV></div> </NOBR></tD> </tR> </TABLE></div> <bR> <div>  </div> <div>                             <FONT SIZE="1" COLOR="#CCCC99" FACE="Arial" >                                           </FONT></div> <div> </div> </td> </tr><tr> <td valign="top" height=430 BGCOLOR="#DDDDDD" TEXT="#080000"> <div> <STYLE>  </STYLE><A HREF="index.htm" TARGET="_top" TITLE="Test Index">Test Index</A><FONT SIZE="1" COLOR="#330066" FACE="Symbol" >   ·   </FONT><A HREF="id93.htm" TARGET="_top" TITLE="Photo Borders">Photo Borders</A><FONT SIZE="1" COLOR="#330066" FACE="Symbol" >   ·   </FONT><A HREF="id125.htm" TARGET="_top" TITLE="Table of sliced images Rounded corners">Table of sliced images - Rounded corners</A><FONT SIZE="1" COLOR="#330066" FACE="Symbol" >   ·   </FONT><A HREF="sliceandlink.htm" TARGET="_top" TITLE="Sliced images and manually linked">Sliced images and manually linked</A><FONT SIZE="1" COLOR="#330066" FACE="Symbol" >   ·   </FONT><A HREF="id129.htm" TARGET="_top" TITLE="Overlap Images">Overlap Images</A><FONT SIZE="1" COLOR="#330066" FACE="Symbol" >   ·   </FONT><A HREF="id128.htm" TARGET="_top" TITLE="Create a Watermark">Create a Watermark</A><FONT SIZE="1" COLOR="#330066" FACE="Symbol" >   ·   </FONT><A HREF="id35.htm" TARGET="_top" TITLE="Gif Png Transparency">Gif Png Transparency</A><FONT SIZE="1" COLOR="#330066" FACE="Symbol" >   ·   </FONT><A HREF="id138.htm" TARGET="_top" TITLE="ButtonsImage Links">Buttons-Image Links</A><FONT SIZE="1" COLOR="#330066" FACE="Symbol" >   ·   </FONT><A HREF="id136.htm" TARGET="_top" TITLE="Image Names">Image Names</A><FONT SIZE="1" COLOR="#330066" FACE="Symbol" >   ·   </FONT><A HREF="id139.htm" TARGET="_top" TITLE="Image Theft">Image Theft</A><FONT SIZE="1" COLOR="#330066" FACE="Symbol" >   ·   </FONT><B>Lake Applet</B><FONT SIZE="1" COLOR="#330066" FACE="Symbol" >   ·   </FONT><A HREF="id109.htm" TARGET="_top" TITLE="Other applets">Other applets</A><FONT SIZE="1" COLOR="#330066" FACE="Symbol" >   ·   </FONT><A HREF="id94.htm" TARGET="_top" TITLE="Slideshow1">Slideshow1</A><FONT SIZE="1" COLOR="#330066" FACE="Symbol" >   ·   </FONT><A HREF="id127.htm" TARGET="_top" TITLE="Slideshow2">Slideshow2</A><FONT SIZE="1" COLOR="#330066" FACE="Symbol" >   ·   </FONT><A HREF="id88.htm" TARGET="_top" TITLE="Galleries">Galleries</A><FONT SIZE="1" COLOR="#330066" FACE="Symbol" >   ·   </FONT><A HREF="id141.htm" TARGET="_top" TITLE="DD Thumbnail Viewer">DD Thumbnail Viewer</A><FONT SIZE="1" COLOR="#330066" FACE="Symbol" >   ·   </FONT><A HREF="imagemap.htm" TARGET="_top" TITLE="image map">image map</A><FONT SIZE="1" COLOR="#330066" FACE="Symbol" >   ·   </FONT><A HREF="id113.htm" TARGET="_top" TITLE="xara thumbnail">xara thumbnail</A><FONT SIZE="1" COLOR="#330066" FACE="Symbol" >   ·   </FONT><A HREF="id114.htm" TARGET="_top" TITLE="Random Image">Random Image</A><FONT SIZE="1" COLOR="#330066" FACE="Symbol" >   ·   </FONT><A HREF="id131.htm" TARGET="_top" TITLE="LOGO BRANDING">LOGO BRANDING</A><FONT SIZE="1" COLOR="#330066" FACE="Symbol" >   ·   </FONT><A HREF="id126.htm" TARGET="_top" TITLE="Animated Image">Animated Image</A><FONT SIZE="1" COLOR="#330066" FACE="Symbol" >   ·   </FONT><A HREF="id132.htm" TARGET="_top" TITLE="photo with sound">photo with sound</A></div> <bR> <bR> <div> <B>Lake:  moving water on static image</B></div> <div> <B> <script type="text/javascript" src="ieupdate.js"></script>  </B></div> <DIV ALIGN="LEFT"></DIV> <div> <B> <TABLE BORDER="2" CELLPADDING="2" CELLSPACING="1" WIDTH="741" BORDERCOLORLIGHT="#9999CC" BORDERCOLORDARK="#9999CC" FRAME="BOX" RULES="COLS" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=TOP COLSPAN=2 BGCOLOR=#9999CC HEIGHT= 342 WIDTH="725"><div> <FONT SIZE="4" COLOR="#330066" FACE="Arial" ><B><IMG SRC="57a26560.jpg" border=0 width="294" height="342" ALIGN="LEFT" HSPACE="5" VSPACE="0"></B></FONT><FONT SIZE="4" COLOR="#6600CC" FACE="Arial" ><I><B> </B></I></FONT><I><B>ALERT!!   </B></I><I><B>Windows XP SP2 </B></I></div> <div> <B><<<<  makes these Lake applets look like this</B></div> <div> Since Microsoft XP released Service Pack 2, the <B>Lake.class</B> applet will not work correctly! </div> <bR> <div> <B>To avoid the problem, STOP USING the</B></div> <div> <B>Lake.class</B><B> </B><FONT SIZE="4" COLOR="#000099" FACE="Arial" ><B>file and begin using the newer</B></FONT></div> <div> <B>lake.class</B><FONT SIZE="4" COLOR="#FFCC33" FACE="Arial" ><B> </B></FONT><FONT SIZE="4" COLOR="#000099" FACE="Arial" ><B>file that is available here:</B></FONT></div> <div>  <a href="HTMLobj-1403/lake.class"><u>Download lake.class</u> </a>  </div> <bR> <div> <B>In the instructions below, replace the</B><FONT SIZE="3" COLOR="#FFFFFF" FACE="Arial" ><B> </B><B>L</B></FONT><B>ake with </B><FONT SIZE="3" COLOR="#00FF00" FACE="Arial" ><B>l</B></FONT><B>ake!</B></div> <bR> <div> <FONT SIZE="3" COLOR="#FFFFFF" FACE="Arial" ><B>>></B></FONT><B> </B><A HREF="newlake.htm" TARGET="_top" TITLE="Newer lake.class applet"><B>See what what a difference it makes here</B></A><B> </B><FONT SIZE="3" COLOR="#FFFFFF" FACE="Arial" ><B><<</B></FONT></div> <div> (The lowercase letter and the newer class file really matter!)</div> </tD> </tR> <tR> <tD VALIGN=TOP HEIGHT= 48 ><NOBR><bR> <div> <I><B>Instructions included with these:</B></I></div> </NOBR></tD> <tD VALIGN=TOP><NOBR><bR> <div> <I><B>More moving water examples: </B></I></div> </NOBR></tD> </tR> <tR> <tD VALIGN=TOP HEIGHT= 127 ><NOBR><div> <B>TEST 1:</B><FONT SIZE="3" COLOR="#330066" FACE="Arial" ><B> Original Lake and variations</B></FONT></div> <div> <A HREF="#liberty" TITLE="Lake Applet"><B>TEST 2:</B></A><FONT SIZE="3" COLOR="#330066" FACE="Arial" ><B> Liberty boat of sailors coming to shore</B></FONT></div> <div> <B>(with intricate large overlay)</B></div> <bR> <DIV ALIGN="LEFT"></DIV> <div> <B>NOTE: this page will take some time to load!</B></div> <div> <A HREF="id109.htm" TARGET="_top" TITLE="Other applets"><B>Looking for a way to reflect an animated image?</B></A></div> </NOBR></tD> <tD VALIGN=TOP><NOBR><div> <A HREF="id96.htm" TARGET="_top" TITLE="USS Rankin"><B><IMG BORDER="0" SRC="Symb075c00b700f066003300.png" HEIGHT="16" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">2 </B></A><A HREF="id96.htm" TARGET="_top" TITLE="USS Rankin"><B>More USS Ra</B></A><A HREF="id96.htm" TARGET="_top" TITLE="USS Rankin"><B>nkin ship images</B></A></div> <bR> <DIV ALIGN="LEFT"></DIV> <div> <I>(these have visual only no detail instructions)</I></div> <bR> <div> <B>[Applet:  Lake]</B></div> </NOBR></tD> </tR> </TABLE></B></div> <div> <B> </B><B>  </B></div> <bR> <div> <TABLE BORDER="0" CELLPADDING="2" CELLSPACING="1" WIDTH="718" BORDERCOLORLIGHT="#C0C0C0" BORDERCOLORDARK="#808080" FRAME="VOID" RULES="NONE" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=TOP HEIGHT= 760 WIDTH="302"><div> <B>TEST 1: Lake</B><B> </B><FONT SIZE="4" COLOR="#330066" FACE="Arial" ><B> (original)  </B></FONT><FONT SIZE="3" COLOR="#330066" FACE="Arial" ><B> </B></FONT></div> <bR> <div> This test sample is an updated version and several variations of KW's Tutorial #13 shown here:  <A HREF="http://www.kwsupport.com/csb/tutorials.htm" title="THE BEST CSB TUTORIAL SITE GOING!" target="_Blank" TARGET="_top" TITLE="http://www.kwsupport.com/csb/tutorials.h">Tutorial List</A></div> <bR> <DIV ALIGN="LEFT"></DIV> <div> <I><B>Credits:</B></I><I> David Griffiths wrote the applet and </I></div> <div> <I>Kevin Weilbacher modified the code </I></div> <div> <I>that goes with it to work in Trellix/CSB.</I></div> <bR> <bR> <div> IMPORTANT: The<FONT SIZE="3" COLOR="#000000" FACE="Arial" > <B>Lake.class</B> </FONT>offered on <FONT SIZE="2" COLOR="#000000" FACE="Arial" >Java Script Kit</FONT> site will <B>not</B> work with this set of instructions.  <FONT SIZE="3" COLOR="#000000" FACE="Arial" >Here is the correct version:</FONT></div> <DIV ALIGN="LEFT"></DIV> <div>  <a href="HTMLobj-159/Lake.class"><u>Download Lake.class</u> </a>  </div> <div> (update: see Windows XP SP2 notice above before downloading. Recommend the other file!)</div> <bR> <DIV ALIGN="LEFT"></DIV> <div> <B>Download image here:  </B></div> <div>  <a href="HTMLobj-158/dusk.gif"><u>Download dusk.gif</u> </a>  </div> <bR> <bR> <bR> <bR> <div> <TABLE BORDER="4" CELLPADDING="3" CELLSPACING="3" WIDTH="289" BORDERCOLORLIGHT="#C0C0C0" BORDERCOLORDARK="#808080" FRAME="BOX" RULES="ALL" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=TOP BGCOLOR=#888888 HEIGHT= 214 WIDTH="267"><div> <B>If you have Windows XP and can only see a </B><FONT SIZE="2" COLOR="#DDDDDD" FACE="Verdana" ><B>GRAY BOX</B></FONT><B> instead of images:</B><FONT SIZE="2" COLOR="#6600CC" FACE="Verdana" ><B> </B></FONT></div> <bR> <div> 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 : </div> <bR> <div> <A HREF="http://java.sun.com/getjava/" TARGET="_top" TITLE="http://java.sun.com/getjava/"><B>http://java.sun.com/getjava/</B></A></div> </tD> </tR> </TABLE></div> <bR> </tD> <tD VALIGN=TOP><NOBR><div> <B>Take a plain image:</B></div> <div> <IMG SRC="23688c70.gif" border=0 width="392" height="199" ALT="dusk" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></div> <bR> <div> <B>And transform it into:</B></div> <div>  <applet code="lake" codebase=HTMLobj-150 width=392 height=380> <param name="image" value="HTMLobj-150/dusk.gif"> <param name="href" value="http://www.lambertusa.com"> </applet>  </div> </NOBR></tD> </tR> </TABLE></div> <div> <FONT SIZE="3" COLOR="#000000" FACE="Arial" > <A NAME="instruct"><IMG BORDER="0" SRC="1x1.gif" HEIGHT="1" ALIGN="bottom" WIDTH="1" HSPACE="0" VSPACE="0" ></A></FONT>Important note:  This tutorial was originally made with <B>Lake.class</B> not <B>lake.class</B>!  The capital L matters! </div> <bR> <bR> <div>  <A NAME="origcode"><IMG BORDER="0" SRC="1x1.gif" HEIGHT="1" ALIGN="bottom" WIDTH="1" HSPACE="0" VSPACE="0" ></A></div> <div> <TABLE BORDER="2" CELLPADDING="2" CELLSPACING="3" WIDTH="650" BORDERCOLORLIGHT="#CC0066" BORDERCOLORDARK="#CC0000" FRAME="BOX" RULES="NONE" HSPACE="0" VSPACE="0" BGCOLOR=#660099 > <tR> <tD VALIGN=TOP BGCOLOR=#C0C0C0 HEIGHT= 208 ><NOBR><div> <B>This is a sample of David Griffith's original code:</B></div> <div> <applet code=Lake.class id=Lake width=392 height=380 ></div> <div> <param name=image value="dusk.gif"></div> <div> <param name=href value="http://www.javascriptkit.com"></div> <div> </applet></div> <bR> <div> <I><B>NOTE: </B></I><FONT SIZE="4" COLOR="#6600CC" FACE="Arial" ><I><B> if you are NOT using CSB or TRELLIX to build your site:</B></I></FONT></div> <div> <B>1. Adjust your image size as discussed in step 1 below</B></div> <div> <B>2. Use the code ABOVE instead of the code shown in step 2, just changing the image size and name.</B></div> <div> <B>3. FTP your image and class file to your site.  </B></div> <div> <B>4. Publish.</B></div> </NOBR></tD> </tR> </TABLE></div> <bR> <bR> <div> <TABLE BORDER="2" CELLPADDING="2" CELLSPACING="1" WIDTH="750" BORDERCOLORLIGHT="#C0C0C0" BORDERCOLORDARK="#808080" FRAME="BOX" RULES="ALL" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=TOP COLSPAN=2 HEIGHT= 94 ><NOBR><div> <B>1. </B> <B>Adjust image size:  </B></div> <div> Use a photo program to check pixel size.  Width stays the same.</div> <div> Height of image increased: <B>multiply by 1.9</B>     Ex: height is 199   199 x 1.9 = 378.1 = rounded to 380 pixels</div> <div>      </div> <div> Use your calculated height in the inserted HTML code</div> </NOBR></tD> </tR> <tR> <tD VALIGN=TOP HEIGHT= 499 ><NOBR><div> <B>CSB User: Insert > HTML is same as Trellix Webgem!</B></div> <div> <IMG SRC="0944f360.png" border=0 width="335" height="310" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></div> <div> <B>2. Insert the code: </B><FONT SIZE="1" COLOR="#000000" FACE="Arial" >into Webgem </FONT><FONT SIZE="1" COLOR="#663366" FACE="Arial" >(Insert > HTML)</FONT></div> <div> <B>CSB User: still use ^GEMDIR in code! </B></div> <bR> <div> <applet code=<B>"Lake" codebase=^GEMDIR</B> width=<FONT SIZE="2" COLOR="#CC0000" FACE="Arial" >392</FONT> height=<FONT SIZE="2" COLOR="#CC0000" FACE="Arial" >380</FONT>> </div> <div> <param name=<B>"image" value="^GEMDIR/</B><FONT SIZE="2" COLOR="#CC0000" FACE="Arial" >dusk.gif</FONT>"> </div> <div> <param name="href" value="<FONT SIZE="2" COLOR="#CC0000" FACE="Arial" >http://www.lambertusa.com</FONT>"> </div> <div> </applet></div> <DIV ALIGN="LEFT"></DIV> <div> NOTE: Items in red are changed to match yours</div> <div> (not using CSB or Trellix to build your site?  <A HREF="#origcode" TITLE="Lake Applet">read this</A>)</div> </NOBR></tD> <tD VALIGN=TOP WIDTH="333"><div> <B>CSB User: Files for this component is same as Gem Files!</B></div> <div> <IMG SRC="0950f590.png" border=0 width="271" height="345" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></div> <div> <B>3. Insert both files</B> <FONT SIZE="1" COLOR="#000000" FACE="Arial" >into Gem files </FONT><FONT SIZE="1" COLOR="#663366" FACE="Arial" >(Webcomponent)</FONT></div> <div> <B>Make sure capitalization is same as you used in the code (step 2)!   </B><FONT SIZE="2" COLOR="#990000" FACE="Arial" ><B>This step eliminates the need to FTP your files to your site!  </B></FONT></div> <bR> <div> <B>4. Publish!</B></div> </tD> </tR> <tR> <tD VALIGN=TOP COLSPAN=2 BGCOLOR=#AAAAAA HEIGHT= 100 ><NOBR><div> <B>NOTE: </B> if using frames, the link will load in current frame unless you add:</div> <div> <param name="target" value="_top">      <FONT SIZE="3" COLOR="#330099" FACE="Arial" >(added to variation 2)</FONT></div> <bR> <div> or  <FONT SIZE="3" COLOR="#330099" FACE="Arial" >to open in a new window, add:</FONT></div> <div> <param name="target" value="_blank">     <FONT SIZE="3" COLOR="#330099" FACE="Arial" >(added to variation 3)</FONT></div> </NOBR></tD> </tR> </TABLE></div> <bR> <div> <B>VARIATION 1: add a border</B></div> <div> <TABLE BORDER="2" CELLPADDING="2" CELLSPACING="1" WIDTH="523" BORDERCOLORLIGHT="#C0C0C0" BORDERCOLORDARK="#808080" FRAME="BOX" RULES="ALL" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=TOP HEIGHT= 245 ><NOBR><bR> <div>  <center><table border=5 cellspacing=0 cellpadding=0><tr><td> <applet code="lake" codebase=HTMLobj-156 width=392 height=380> <param name="image" value="HTMLobj-156/dusk.gif"> <param name="href" value="http://www.lambertusa.com"> </applet> </td></tr></table></center>  </div> <bR> </NOBR></tD> </tR> <tR> <tD VALIGN=TOP HEIGHT= 174 ><NOBR><div> <B>Add items in blue for a tight border around image:</B></div> <bR> <div> <B><center><table border=5 cellspacing=0 cellpadding=0><tr><td></B></div> <div> <applet code=<B>"Lake" codebase=^GEMDIR</B> width=<FONT SIZE="3" COLOR="#CC0000" FACE="Arial" >392</FONT> height=<FONT SIZE="3" COLOR="#CC0000" FACE="Arial" >380</FONT>> </div> <div> <param name=<B>"image" value="^GEMDIR/</B><FONT SIZE="3" COLOR="#CC0000" FACE="Arial" >dusk.gif</FONT>"> </div> <div> <param name="href" value="<FONT SIZE="3" COLOR="#CC0000" FACE="Arial" >http://www.lambertusa.com</FONT>"> </div> <div> <B></applet></td></tr></table></center></B></div> <bR> <DIV ALIGN="LEFT"></DIV> <div> NOTE: Items in red are changed to match yours</div> </NOBR></tD> </tR> </TABLE></div> <bR> <div> <B>VARIATION 2: smaller image overlay</B></div> <div> <TABLE BORDER="2" CELLPADDING="2" CELLSPACING="1" WIDTH="538" BORDERCOLORLIGHT="#C0C0C0" BORDERCOLORDARK="#808080" FRAME="BOX" RULES="ALL" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=TOP HEIGHT= 261 ><NOBR><div> <B><IMG BORDER="0" SRC="Symb075c00b700c800009900.png" HEIGHT="13" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">This would be great for a logo or text- overlay must be gif with transparency </B></div> <bR> <div>  <center><table border=5 cellspacing=0 cellpadding=0><tr><td> <applet code="lake" codebase=HTMLobj-157 width=392 height=380> <param name="image" value="HTMLobj-157/dusk.gif"> <param name="href" value="http://www.lambertusa.com"> <param name="overlay" value="HTMLobj-157/grumpy.gif"> <param name="target" value="_top"> </applet> </td></tr></table></center>  </div> <bR> </NOBR></tD> </tR> <tR> <tD VALIGN=TOP HEIGHT= 285 ><NOBR><div> <B>Add items in blue for a tight border around image </B></div> <div> <B>& item in red allows you to add an image on top of the original picture</B></div> <div> <B>& item in light blue breaks frame on link:</B></div> <bR> <div> <B><center><table border=7 cellspacing=0 cellpadding=0><tr><td></B></div> <div> <applet code=<B>"Lake" codebase=^GEMDIR</B> width=<FONT SIZE="3" COLOR="#CC0000" FACE="Arial" >392</FONT> height=<FONT SIZE="3" COLOR="#CC0000" FACE="Arial" >380</FONT>> </div> <div> <param name=<B>"image" value="^GEMDIR/</B><FONT SIZE="3" COLOR="#CC0000" FACE="Arial" >dusk.gif</FONT>"> </div> <div> <B><param name="overlay" value="^GEMDIR/</B><FONT SIZE="3" COLOR="#CC0000" FACE="Arial" ><B>grumpy.gif</B></FONT><B>"></B></div> <div> <param name="target" value="_top">  </div> <div> <param name="href" value="<FONT SIZE="3" COLOR="#CC0000" FACE="Arial" >http://www.lambertusa.com</FONT>"> </div> <div> <B></applet></td></tr></table></center></B></div> <bR> <DIV ALIGN="LEFT"></DIV> <div> NOTE: Items in red are changed to match yours</div> <bR> <div> grumpy.gif image is 100 x 95 pixels and automatically centers on overlay</div> </NOBR></tD> </tR> </TABLE></div> <bR> <bR> <div> <B>VARIATION 3: large image overlay</B></div> <div> <TABLE BORDER="2" CELLPADDING="2" CELLSPACING="1" WIDTH="538" BORDERCOLORLIGHT="#C0C0C0" BORDERCOLORDARK="#808080" FRAME="BOX" RULES="ALL" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=TOP HEIGHT= 285 ><NOBR><div> <B><IMG BORDER="0" SRC="Symb075c00b700c800009900.png" HEIGHT="13" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">Use for a view through (trees, window, stateroom window on boat, etc) </B></div> <div> <B><IMG BORDER="0" SRC="Symb075c00b700c800009900.png" HEIGHT="13" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">overlay image must be </B><FONT SIZE="3" COLOR="#990000" FACE="Arial" ><B>gif </B></FONT><B>with transparency </B><FONT SIZE="2" COLOR="#000000" FACE="Arial" > </FONT></div> <bR> <div>  <applet code="lake" codebase=HTMLobj-161 width=392 height=380> <param name="image" value="HTMLobj-161/dusk.gif"> <param name="overlay" value="HTMLobj-161/seagrapes.gif"> <param name="target" value="_blank"> <param name="href" value="http://www.lambertusa.com"> </applet>  </div> <bR> </NOBR></tD> </tR> <tR> <tD VALIGN=TOP HEIGHT= 371 WIDTH="526"><div> <B>item in red allows you to add an image on top of the original picture</B></div> <div> <B>& item in light blue opens into a new window on link:</B></div> <bR> <div> <applet code=<B>"Lake" codebase=^GEMDIR</B> width=<FONT SIZE="3" COLOR="#CC0000" FACE="Arial" >392</FONT> height=<FONT SIZE="3" COLOR="#CC0000" FACE="Arial" >380</FONT>> </div> <div> <param name=<B>"image" value="^GEMDIR/</B><FONT SIZE="3" COLOR="#CC0000" FACE="Arial" >dusk.gif</FONT>"> </div> <div> <param name="target" value="_blank">  </div> <div> <param name="href" value="<FONT SIZE="3" COLOR="#CC0000" FACE="Arial" >http://www.lambertusa.com</FONT>"> </div> <div> <B><param name="overlay" value="^GEMDIR/</B><FONT SIZE="3" COLOR="#CC0000" FACE="Arial" ><B>seagrapes.gif</B></FONT><B>"></B></div> <div> </applet></div> <DIV ALIGN="LEFT"></DIV> <div> NOTE: Items in red are changed to match yours</div> <bR> <div> seagrapes.gif image is 392 x <B>395</B> pixels and automatically centers on overlay</div> <bR> <div> <FONT SIZE="3" COLOR="#330099" FACE="Arial" ><B>overlay image:</B></FONT><FONT SIZE="3" COLOR="#000000" FACE="Arial" ><B>  </B></FONT>The seagrape leaves were manually cut out of another image, placed into a transparent image which <B>was expanded longer</B> 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.)</div> <div>  <STYLE type=text/css> #rollbutton a { color: #330066; font-size: 9px; font-family: verdana; font-weight:bold; text-decoration: none; border:2px outset white; background-color:#9966CC; display: block; width: 120px; height: 20px; padding: 5px 5px; margin: 15px; } #rollbutton a:hover { background-color: #9999FF; color:#FFFFFF; padding-left:3px; border:2px inset light gray; } </STYLE> <DIV id=rollbutton> <DIV><A href="javascript:void(0)" ONCLICK="open('id100.htm','miniwin','toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=01,width=510,height=510')" title="This is the original seagrapes image" onfocus="this.blur()"><center>SEAGRAPES IMAGE</center></A> </DIV> </DIV>  </div> </tD> </tR> </TABLE></div> <div> <B>Enjoy!</B></div> <bR> <bR> <div> <TABLE BORDER="2" CELLPADDING="2" CELLSPACING="1" WIDTH="668" BORDERCOLORLIGHT="#C0C0C0" BORDERCOLORDARK="#808080" FRAME="BOX" RULES="ALL" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=TOP BGCOLOR=#FFFFFF HEIGHT= 20 WIDTH="656"><div> <B>REFERENCE AND COMPARISON:</B></div> </tD> </tR> <tR> <tD VALIGN=TOP HEIGHT= 75 ><NOBR><div> <FONT SIZE="3" COLOR="#000000" FACE="Arial" ><B><IMG BORDER="0" SRC="Symb075c00b700f000000000.png" HEIGHT="16" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">Image source:  </B></FONT>dusk.gif (<FONT SIZE="2" COLOR="#000000" FACE="Arial" >Javascript Kit with DG's code below)</FONT></div> <div> <B>NOT AVAILABLE FOR DOWNLOAD: (for example only)</B></div> <div> <IMG BORDER="0" SRC="Symb075c00b700c800000000.png" HEIGHT="13" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">grumpy.gif (Samantha Conway) - used in various forms on <A HREF="http://www.lambertusa.com" title="Lambert Corporation - Concrete is our Specialty" TARGET="_top" TITLE="http://www.lambertusa.com" title="Lamber">Lambert</A> website</div> <div> <IMG BORDER="0" SRC="Symb075c00b700c800000000.png" HEIGHT="13" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">seagrapes.gif  (Samantha Conway) - photo taken in the Keys and trimmed using Paint Shop Pro</div> </NOBR></tD> </tR> <tR> <tD VALIGN=TOP HEIGHT= 161 WIDTH="656"><div> <B><IMG BORDER="0" SRC="Symb075c00b700f00000cc00.png" HEIGHT="16" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">This is a sample of David Griffith's code:</B></div> <div> <applet code=Lake.class id=Lake width=392 height=380 ></div> <div> <param name=image value="dusk.gif"></div> <div> <param name=href value="http://www.javascriptkit.com"></div> <div> </applet></div> <bR> <div> <B>NOTE:  if you are NOT using CSB or TRELLIX to build your site, use his code, and FTP your image and class file to your site!</B></div> </tD> </tR> <tR> <tD VALIGN=TOP HEIGHT= 104 ><NOBR><div> <B><IMG BORDER="0" SRC="Symb075c00b700f000000000.png" HEIGHT="16" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">This is what the code looks like with KW's modifications for use in CSB/Trellix:</B></div> <div> <applet code=<B>"Lake" codebase=^GEMDIR</B> width=392 height=380> </div> <div> <param name=<B>"image" value="^GEMDIR/</B>dusk.gif"> </div> <div> <param name=<B>"href" </B>value="http://www.lambertusa.com"> </div> <div> </applet></div> </NOBR></tD> </tR> </TABLE></div> <bR> <bR> <div> <FONT SIZE="3" COLOR="#000000" FACE="Arial" > <A NAME="liberty"><IMG BORDER="0" SRC="1x1.gif" HEIGHT="1" ALIGN="bottom" WIDTH="1" HSPACE="0" VSPACE="0" ></A></FONT><B>Test 2:</B><B> another large image overlay</B></div> <div> <B>Use any photo and add/replace water!</B></div> <bR> <div> <B>"Liberty"</B></div> <div> <TABLE BORDER="0" CELLPADDING="2" CELLSPACING="1" WIDTH="723" BORDERCOLORLIGHT="#C0C0C0" BORDERCOLORDARK="#808080" FRAME="VOID" RULES="NONE" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=TOP HEIGHT= 3800 WIDTH="717"><div>  </div> <div> Just the background (top) of image and water:</div> <div>  <center><table border=7 cellspacing=0 cellpadding=0><tr><td> <applet code="lake" codebase=HTMLobj-522 width=512 height=320> <param name="image" value="HTMLobj-522/liberty1og.jpg"> <param name="href" value="http://www.ussrankin.org/"> <param name="target" value="_blank"> </applet></td></tr></table></center>  </div> <div>  </div> <bR> <div> Full image with boat overlay:</div> <div>  <center><table border=7 cellspacing=0 cellpadding=0><tr><td> <applet code="lake" codebase=HTMLobj-495 width=512 height=320> <param name="image" value="HTMLobj-495/liberty1og.jpg"> <param name="overlay" value="HTMLobj-495/liberty2ocm400tf.gif"> <param name="href" value="http://www.ussrankin.org/"> <param name="target" value="_blank"> </applet></td></tr></table></center>  </div> <bR> <bR> <div> And to really feel like you are on the boat taking you to shore, <B>add a rocking motion</B>.</div> <div> Hope you don't get seasick.  </div> <bR> <div> <B>The applet will not allow control the height of the swells.</B></div> <div> (There is another applet that allows the waves to be adjusted, but not the rocking motion)</div> <div> This technique would work better on a stormy shot with waves.</div> <bR> <div>  <center><table border=7 cellspacing=0 cellpadding=0><tr><td> <applet code="lake" codebase=HTMLobj-497 width=512 height=280> <param name="image" value="HTMLobj-497/liberty1og.jpg"> <param name="overlay" value="HTMLobj-497/liberty2ocm400.gif"> <param name="rock" value="on"> <param name="href" value="http://www.ussrankin.org/"> <param name="target" value="_blank"> </applet></td></tr></table></center>  </div> <bR> <div> Click either animated images to go to the site dedicated to USS Rankin (AKA-103)</div> <bR> <div> <B>Here's the original photo used with permission for this tutorial:</B></div> <div> <IMG SRC="1f0015e0.jpg" border=0 width="513" height="350" ALT="original liberty photo with scratches and wear" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></div> <bR> <bR> <bR> <div> <B>HOW IT WAS DONE:</B></div> <bR> <div> <IMG BORDER="0" SRC="Symb075c00b700dc00000000.png" HEIGHT="15" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">Clean/restore your photo if damaged.  Note the original shot I made the sample from has damage.  Before the project, clean the image to the best of your ability.</div> <div> <IMG BORDER="0" SRC="Symb075c00b700dc00000000.png" HEIGHT="15" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">JPG and gif images work the best for this technique so if your image is a tif, bmp, etc File Save As to convert to a jpg.  If possible, optimize your image quality so the image is compressed but clear, this makes the image as small as you can make it before we start the project. (note: some photo programs refer to optimize as make the image web-ready)</div> <div> <IMG BORDER="0" SRC="Symb075c00b700dc00000000.png" HEIGHT="15" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">Make 2 duplicate copies.  We will be changing the photo so put the original someplace that you can not mistake it for the project images.</div> <div> <B><IMG BORDER="0" SRC="Symb075c00b700dc00000000.png" HEIGHT="15" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">Image 1:</B> Take the full photo and cut it off (crop it) at the new water line.  Even if your image has no water line, where ever you cut horizontally will create a waters edge.</div> <DIV ALIGN="LEFT"></DIV> <div> <IMG SRC="20201a70.jpg" border=0 width="513" height="167" ALT="liberty crop top" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></div> <div> <IMG BORDER="0" SRC="Symb075c00b700dc00000000.png" HEIGHT="15" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">Our Image1 is not ready to make water yet.  Anything that will overlap from the background image to the  foreground image must be taken out.  In this example, the metal frame showing above can not stay in Image 1.  It must be removed, and any area that it covers must be filled.</div> <DIV ALIGN="LEFT"></DIV> <div> <IMG SRC="20100a30.jpg" border=0 width="512" height="163" ALT="liberty crop top - replace pixels" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></div> <div> <IMG BORDER="0" SRC="Symb075c00b700dc00000000.png" HEIGHT="15" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">The metal frame has been removed and the image now has a complete scene.  </div> <div> <IMG BORDER="0" SRC="Symb075c00b700dc00000000.png" HEIGHT="15" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">Because the original image was strong in the foreground, but the background had such weak tones, I adjusted the colors to provide a better reflection in the water.  Image 1should be saved only in a jpg format and is now  complete.</div> <bR> <div> <B><IMG BORDER="0" SRC="Symb075c00b700dc00000000.png" HEIGHT="15" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">Image2:  Leave the photo full size.</B>   Since we need transparency on this image, File Save As to make it a gif (the applet does not recognize png). This step is just opposite from Image 1.  This time you will remove all parts of the image that are not going to be in the foreground overlay.  (At least this time you only remove, no replacing!)</div> <DIV ALIGN="LEFT"></DIV> <div> <TABLE BORDER="2" CELLPADDING="0" CELLSPACING="0" WIDTH="522" BORDERCOLORLIGHT="#C0C0C0" BORDERCOLORDARK="#808080" FRAME="BOX" RULES="ALL" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=TOP HEIGHT= 331 ><NOBR><div> <IMG SRC="20400450.gif" border=0 width="512" height="325" ALT="liberty clear background - keep foreground image only" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></div> </NOBR></tD> </tR> </TABLE></div> <bR> <div> <IMG BORDER="0" SRC="Symb075c00b700dc00000000.png" HEIGHT="15" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">You are ready for the application onto the Image 1.  Note.  You may not be done with this image.  It may need some tweaking before you are satisfied with the result.</div> <div> Follow the same <A HREF="#instruct" TITLE="Lake Applet">instructions</A> as shown in the LAKE example above, modify the HTML code to fit your image dimensions, load the Lake.class and images into an Insert HTML (webgem in Trellix) and publish your page. Study it for problems.</div> <bR> <div> <B><IMG BORDER="0" SRC="Symb075c00b700dc00000000.png" HEIGHT="15" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">When I overlaid this image I found 2 things wrong:</B></div> <div> <B>1. </B>the overlay image came up to high on the mountain.  I made the image CANVAS larger (not the picture).  For purposes of this web page, I added a slight border so you can see the full size of the expanded image.  The area at the top is actually empty canvas but shows up better on this demo if colored.  By adding extra space at the top of the photo, the boat will hit the the background image approximately the same height as the original photo.  This is not an exact science and must be adjusted according to the photo you are using. It took me two tries to get it the way I wanted.</div> <DIV ALIGN="LEFT"></DIV> <div> <IMG SRC="20904940.gif" border=0 width="516" height="404" ALT="liberty forefround expanded" ALIGN="BOTTOM" HSPACE="0" VSPACE="0">   </div> <div> <FONT SIZE="2" COLOR="#000000" FACE="Arial" >I filled in the space with the color that represents transparent. </FONT>(need help with transparency, check out <A HREF="id35.htm" TARGET="_top" TITLE="Gif Png Transparency">this tutorial</A>)</div> <div> <B>2. </B>The edges on the boat seemed to rough, jagged when placed as an overlay.  I went back to the now expanded photograph and cleaned/recolored pixels so they would not be shiny against the background areas.  The resulting tweaks are shown below, the image was saved to a new name each time I adjusted:  <FONT SIZE="1" COLOR="#000000" FACE="Arial" >(hard to see difference unless laid against the background image)</FONT></div> <DIV ALIGN="LEFT"></DIV> <div> <TABLE BORDER="2" CELLPADDING="0" CELLSPACING="0" WIDTH="522" BORDERCOLORLIGHT="#C0C0C0" BORDERCOLORDARK="#808080" FRAME="BOX" RULES="ALL" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=TOP HEIGHT= 406 ><NOBR><div> <IMG SRC="20300900.gif" border=0 width="512" height="400" ALT="liberty foreground expanded and filled" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></div> </NOBR></tD> </tR> </TABLE></div> <div>      </div> <div> <IMG BORDER="0" SRC="Symb075c00b700dc00000000.png" HEIGHT="15" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">I double clicked my inserted HTML code placeholder (I use the original pic as mine) changed the code to the new picture name, added the new tweaked image to the webcomponent and republished.  </div> <div> This step may be done a few times to get the image where, and how you want it.  Personal choice.</div> <div> Depends on how picky you are and how difficult the background/foreground image is to work with.</div> </tD> </tR> <tR> <tD VALIGN=TOP HEIGHT= 553 ><NOBR><bR> <div> <TABLE BORDER="2" CELLPADDING="0" CELLSPACING="0" WIDTH="681" BORDERCOLORLIGHT="#C0C0C0" BORDERCOLORDARK="#808080" FRAME="BOX" RULES="COLS" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=TOP COLSPAN=5 HEIGHT= 20 WIDTH="675"><div> <B>Liberty Image Specifications</B></div> </tD> </tR> <tR> <tD VALIGN=TOP BGCOLOR=#BBBBBB HEIGHT= 20 WIDTH="152"><IMG BORDER="0" SRC="1x1.gif" HEIGHT="20" ALIGN="bottom" WIDTH="152" HSPACE="0" VSPACE="0"></tD> <tD VALIGN=TOP BGCOLOR=#BBBBBB><NOBR><div> <B>Orig photo:  </B></div> </NOBR></tD> <tD VALIGN=TOP BGCOLOR=#BBBBBB><NOBR><div> <B>Image 1:  top</B></div> </NOBR></tD> <tD VALIGN=TOP BGCOLOR=#BBBBBB><NOBR><div> <B>water dimension:</B></div> </NOBR></tD> <tD VALIGN=TOP BGCOLOR=#BBBBBB><NOBR><div> <B>Image 2: foreground</B></div> </NOBR></tD> </tR> <tR> <tD VALIGN=TOP BGCOLOR=#BBBBBB HEIGHT= 20 WIDTH="152"><div> <B>width:</B></div> </tD> <tD VALIGN=TOP BGCOLOR=#FFFFFF WIDTH="98"><div>  512</div> </tD> <tD VALIGN=TOP BGCOLOR=#FFFFFF WIDTH="112"><div> 512</div> </tD> <tD VALIGN=TOP BGCOLOR=#FFFFFF WIDTH="140"><div> 512</div> </tD> <tD VALIGN=TOP BGCOLOR=#FFFFFF WIDTH="165"><div> 512</div> </tD> </tR> <tR> <tD VALIGN=TOP BGCOLOR=#BBBBBB HEIGHT= 22 WIDTH="152"><div> <B>height:</B></div> </tD> <tD VALIGN=TOP BGCOLOR=#FFFFFF WIDTH="98"><div>  350</div> </tD> <tD VALIGN=TOP BGCOLOR=#FFFFFF WIDTH="112"><div> 163</div> </tD> <tD VALIGN=TOP BGCOLOR=#FFFFFF WIDTH="140"><div>  <FONT SIZE="3" COLOR="#000000" FACE="Arial" >320</FONT> <FONT SIZE="3" COLOR="#000000" FACE="Arial" ><B>*</B></FONT></div> </tD> <tD VALIGN=TOP BGCOLOR=#FFFFFF WIDTH="165"><div> 400 <FONT SIZE="1" COLOR="#000000" FACE="Arial" >(expanded)</FONT></div> </tD> </tR> <tR> <tD VALIGN=TOP BGCOLOR=#BBBBBB HEIGHT= 20 WIDTH="152"><div> <B>size:</B></div> </tD> <tD VALIGN=TOP BGCOLOR=#FFFFFF WIDTH="98"><div>  51 KB</div> </tD> <tD VALIGN=TOP BGCOLOR=#FFFFFF WIDTH="112"><div> 17</div> </tD> <tD VALIGN=TOP BGCOLOR=#FFFFFF WIDTH="140"><div> -</div> </tD> <tD VALIGN=TOP BGCOLOR=#FFFFFF WIDTH="165"><div> 60</div> </tD> </tR> <tR> <tD VALIGN=TOP BGCOLOR=#BBBBBB HEIGHT= 20 WIDTH="152"><div> <B>jpg/gif:</B></div> </tD> <tD VALIGN=TOP BGCOLOR=#FFFFFF WIDTH="98"><div> jpg</div> </tD> <tD VALIGN=TOP BGCOLOR=#FFFFFF WIDTH="112"><div> jpg</div> </tD> <tD VALIGN=TOP BGCOLOR=#FFFFFF WIDTH="140"><div> applet</div> </tD> <tD VALIGN=TOP BGCOLOR=#FFFFFF WIDTH="165"><div> gif</div> </tD> </tR> <tR> <tD VALIGN=TOP BGCOLOR=#BBBBBB HEIGHT= 20 ><NOBR><div> <B>solid/transparent:</B></div> </NOBR></tD> <tD VALIGN=TOP BGCOLOR=#FFFFFF WIDTH="98"><div> solid</div> </tD> <tD VALIGN=TOP BGCOLOR=#FFFFFF WIDTH="112"><div> solid</div> </tD> <tD VALIGN=TOP BGCOLOR=#FFFFFF WIDTH="140"><div> -</div> </tD> <tD VALIGN=TOP BGCOLOR=#FFFFFF WIDTH="165"><div> transparent</div> </tD> </tR> </TABLE></div> <div> <B>*</B><FONT SIZE="1" COLOR="#000000" FACE="Arial" >Note: the calculation for how large the water is basically 163 x 1.9= 310</FONT></div> <div> But this can be adjusted to have more water by adding a few pixels (I added 10 for a bit more water)  </div> <bR> <div> <TABLE BORDER="2" CELLPADDING="2" CELLSPACING="1" WIDTH="601" BORDERCOLORLIGHT="#C0C0C0" BORDERCOLORDARK="#808080" FRAME="BOX" RULES="ALL" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=TOP HEIGHT= 247 WIDTH="589"><div> <B>Final code used for the Liberty:</B></div> <div> <center><table border=7 cellspacing=0 cellpadding=0><tr><td></div> <div> <applet code="Lake" codebase=^GEMDIR width=<FONT SIZE="3" COLOR="#990000" FACE="Arial" >512</FONT> height=<FONT SIZE="3" COLOR="#990000" FACE="Arial" >320</FONT>> </div> <div> <param name="image" value="^GEMDIR/<FONT SIZE="3" COLOR="#990000" FACE="Arial" >liberty1og.jpg</FONT>"> </div> <div> <param name="overlay" value="^GEMDIR/<FONT SIZE="3" COLOR="#990000" FACE="Arial" >liberty2ocm400tf.gif</FONT>"></div> <div> <param name="href" value="<FONT SIZE="3" COLOR="#990000" FACE="Arial" >http://www.ussrankin.org/</FONT>"> </div> <div> <param name="target" value="_blank"></div> <div> </applet></td></tr></table></center></div> <bR> <div> For rocking motion, add before </applet>:   <param name="rock" value="on"></div> <div> (Also, applet size was adjusted to the following: w= 512, h=<FONT SIZE="2" COLOR="#0000FF" FACE="Arial" ><B>280</B></FONT> because the swells push the overlay image causing a gray edge to appear.  This is trial and error till you get the result you want.) </div> </tD> </tR> </TABLE></div> <bR> <div> <A HREF="id96.htm" TARGET="_top" TITLE="USS Rankin"><B>other USSRankin images</B></A></div> <div> <B>(not as dramatic as the liberty boat, but the second is pretty good)</B></div> </NOBR></tD> </tR> </TABLE></div> <script type="text/javascript" src="removeline.js"></script> </td> </tr></table></body>