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="id144.htm" TARGET="_top" TITLE="Slideshow3">Slideshow3</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.samisite.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.samisite.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.samisite.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.samisite.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.samisite.com"> <param name="overlay" value="HTMLobj-157/sailboat001.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>boat.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.samisite.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> sailboat001.gif image is 53x100 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.samisite.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.samisite.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">sailboat.gif (Samantha Conway)  single frame/non-animated</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.samisite.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= 963 ><NOBR><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> This sample was made for USSRankin website and used with permission.</div> <bR> <bR> <bR> <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> <bR> </NOBR></tD> </tR> </TABLE></div> <script type="text/javascript" src="removeline.js"></script> </td> </tr></table></body>