Overlap Images

<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="sliceandlink.htm" TARGET="_top" TITLE="Sliced images and manually linked"><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="id128.htm" TARGET="_top" TITLE="Create a Watermark"><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> </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><B>Overlap Images</B><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><A HREF="id33.htm" TARGET="_top" TITLE="Lake Applet">Lake Applet</A><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> <div> <B>Overlap Images</B></div> <div>  <script language="JavaScript1.2"> /* Disable right click script II (on images)- By Dynamicdrive.com For full source, Terms of service, and 100s DTHML scripts Visit http://www.dynamicdrive.com */ var clickmessage="Please do not take the images!" function disableclick(e) { if (document.all) { if (event.button==2||event.button==3) { if (event.srcElement.tagName=="IMG"){ alert(clickmessage); return false; } } } else if (document.layers) { if (e.which == 3) { alert(clickmessage); return false; } } else if (document.getElementById){ if (e.which==3&&e.target.tagName=="IMG"){ alert(clickmessage) return false } } } function associateimages(){ for(i=0;i<document.images.length;i++) document.images[i].onmousedown=disableclick; } if (document.all) document.onmousedown=disableclick else if (document.getElementById) document.onmouseup=disableclick else if (document.layers) associateimages() </script>   <META HTTP-EQUIV="imagetoolbar" CONTENT="no">  <FONT SIZE="3" COLOR="#FFFFFF" FACE="Arial" > <style> .highlighttext{ background-color:yellow; font-weight:bold; color: #6600CC; } </style> <script language="Javascript">  </script>  </FONT></div> <bR> <div> <TABLE BORDER="0" CELLPADDING="5" CELLSPACING="1" WIDTH="713" BORDERCOLORLIGHT="#C0C0C0" BORDERCOLORDARK="#808080" FRAME="VOID" RULES="NONE" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=TOP HEIGHT= 468 WIDTH="335"><div> <B>Tables allow you to overlap images for dramatic effects.  The image to the right is a</B></div> <div> <B>3 layered table creating a look of a matted frame.</B></div> <bR> <div> The outside table is a simple one column one row table made in CSB, set to 344 pixels wide with a white background color.</div> <bR> <div> The second and third tables are made using HTML code that is placed into the center of the white table using insert > HTML (webgem in Trellix).  </div> <bR> <div> The second table has an image background, a small blue square (automatically tiles to fill the table).  The third table has no border, and its background is the jumping image.</div> <bR> <div> <B>The code for the layered image is </B><A HREF="#layered" TITLE="Overlap Images"><B>below</B></A><B>.</B></div> <bR> <div> <A HREF="http://rjskon.com/pic_frame/" TARGET="_blank" TITLE="http://rjskon.com/pic_frame/">Richard's layered image</A> in a table shows a another example of overlapping images.</div> <bR> <div> <B>If you would like this image effect, </B><B>combined with text or </B><FONT SIZE="2" COLOR="#6600CC" FACE="Arial" ><B>with mouseover links</B></FONT><B> that change color and to CAPS on rollover, then visit my  </B><A HREF="http://www.samisite.com/backgrounds/id16.htm" TARGET="_top" TITLE="http://www.samisite.com/backgrounds/id16"><B>background section</B></A><B> and see </B><B>Example 4!</B></div> </tD> <tD VALIGN=TOP><NOBR><div> <TABLE BORDER="1" CELLPADDING="7" CELLSPACING="2" WIDTH="352" BORDERCOLORLIGHT="#C0C0C0" BORDERCOLORDARK="#808080" FRAME="BOX" RULES="ALL" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=TOP BGCOLOR=#FFFFFF HEIGHT= 26 WIDTH="330"><div>  <table border="2" bordercolordark="#000080" bordercolor="#000080" bordercolorlight="#000080" cellpadding="1" cellspacing="1" width="330" height="410"> <tr> <td align="center" background="HTMLobj-1226/dkseablueparchment.jpg" valign="Middle" width="330" height="410"> <table background="HTMLobj-1226/baypjumpweave.jpg" border="0" cellpadding="6" cellspacing="2" width="244" height="323"> <p align=center> <tr> <tD VALIGN=TOP HEIGHT= 112 ><NOBR><div> </NOBR> </td> </tr> </table> </p> </td> </tr> </table>  </div> </tD> </tR> </TABLE></div> <bR> </NOBR></tD> </tR> </TABLE></div> <bR> <bR> <div> <TABLE BORDER="2" CELLPADDING="2" CELLSPACING="1" WIDTH="734" BORDERCOLORLIGHT="#990000" BORDERCOLORDARK="#808080" FRAME="BOX" RULES="ALL" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=TOP BGCOLOR=#FFFFFF HEIGHT= 75 WIDTH="722"><div> <B>If you want two images to truly overlap, separate photo editing software (like Paint Shop Pro, Photoshop, Photosuite, etc) is necessary.  Create the blended photo then insert into webpage.</B></div> <div> sample photo is shown below uses transparency setting</div> <div> If assistance needed with transparency, see this <A HREF="id35.htm" TARGET="_top" TITLE="Gif Png Transparency">page</A>)</div> </tD> </tR> </TABLE></div> <bR> <DIV ALIGN="LEFT"></DIV> <div> <B> <A NAME="overlap"><IMG BORDER="0" SRC="1x1.gif" HEIGHT="1" ALIGN="bottom" WIDTH="1" HSPACE="0" VSPACE="0" ></A></B><FONT SIZE="3" COLOR="#000000" FACE="Arial" ><B>Overlapping image made in separate photo editing software: Paint Shop Pro</B></FONT></div> <bR> <div> <B><IMG SRC="4c9581a0.png" border=0 width="600" height="538" ALT="overlay made in photo program - grainy image was made like that in original publication" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></B></div> <div>  <A NAME="layered"><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="1" WIDTH="720" BORDERCOLORLIGHT="#C0C0C0" BORDERCOLORDARK="#808080" FRAME="BOX" RULES="ALL" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=TOP BGCOLOR=#FFFBF0 HEIGHT= 1451 WIDTH="708"><div> <B>  Capture code here:  press Select All then COPY the contents</B></div> <div> <B>Place code into an insert > HTML (webgem in Trellix)</B></div> <div> <B>MUST change each gEMDIR to GEMDIR before using code!</B></div> <div> <B> <form name="code4b"> <a class="highlighttext" href="javascript:HighlightAll('code4b.select1')">Select All</a><br> <textarea name="select1" rows=10 cols=80 > <table border="2" bordercolordark="#000080" bordercolor="#000080" bordercolorlight="#000080" cellpadding="1" cellspacing="1" width="330" height="410"> <tr> <td align="center" background="^gEMDIR/dkseablueparchment.jpg" valign="Middle" width="330" height="410"> <p align=center> <table background="^gEMDIR/baypjumpweave.jpg" border="0" cellpadding="6" cellspacing="2" width="244" height="323"> <tr> <tD VALIGN=TOP HEIGHT= 112 > <NOBR> <div> </NOBR> </td> </tr> </table> </p> </td> </tr> </table> </textarea> </form>  </B></div> <div> <B>I have made notes in codes below and it will effect functionality!</B></div> <div> <B>Use the Select All choice above to copy code!</B></div> <bR> <div> <B>Two steps:</B></div> <div> <B>1) Make a table in CSB.  Set the cell spacing to 1 and the padding to 4.</B></div> <div> <TABLE BORDER="0" CELLPADDING="2" CELLSPACING="1" WIDTH="681" BORDERCOLORLIGHT="#C0C0C0" BORDERCOLORDARK="#808080" FRAME="VOID" RULES="NONE" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=TOP HEIGHT= 294 ><NOBR><div> <IMG SRC="4dd93130.png" border=0 width="403" height="275" ALT="1st layer setting1, the outside borders" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></div> </NOBR></tD> <tD VALIGN=TOP WIDTH="257"><bR> <div> MY SETTINGS FOR THE TRIPLE TABLE</div> <bR> <div> FIRST(outer) LAYER</div> <bR> <bR> <bR> <bR> <bR> <bR> <bR> <bR> <bR> <div> <B>Note:  the cell padding will determine how wide the outermost fill color will be.</B></div> <div> <B>I used 4 so the outer fill is quite thin.</B></div> </tD> </tR> <tR> <tD VALIGN=TOP HEIGHT= 279 ><NOBR><div> <IMG SRC="4de90110.png" border=0 width="400" height="273" ALT="1st layer setting1, the first layer color - white" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></div> </NOBR></tD> <tD VALIGN=TOP WIDTH="257"><bR> <bR> <div> <B>The Table background color for the outermost fill is set here.   I chose WHITE as my color. </B></div> </tD> </tR> </TABLE></div> <bR> <div> <B>2) Place this script which makes the </B><FONT SIZE="2" COLOR="#009900" FACE="Arial" ><B>second</B></FONT><B> and </B><FONT SIZE="2" COLOR="#3300FF" FACE="Arial" ><B>third</B></FONT><B> layers into an Insert > HTML  (webgem in Trellix)</B></div> <div> <B>inside the first layer table made in step 1.</B></div> <bR> <div> <B>Center the webgem.  </B></div> <div> <B>Include the images for the </B><FONT SIZE="2" COLOR="#009900" FACE="Arial" ><B>2nd</B></FONT><B> and </B><FONT SIZE="2" COLOR="#3300FF" FACE="Arial" ><B>3rd</B></FONT><B> layers in the webcomponent.</B></div> <bR> <div> <B>Change </B><FONT SIZE="2" COLOR="#009900" FACE="Arial" ><B>GREEN</B></FONT><FONT SIZE="2" COLOR="#3300FF" FACE="Arial" ><B> </B></FONT><B>items to the colors of the 2nd layer border (I used blue tones</B><FONT SIZE="2" COLOR="#009900" FACE="Arial" ><B> #000080</B></FONT><B>)</B></div> <div> <B>Change </B><FONT SIZE="2" COLOR="#009900" FACE="Arial" ><B>GREEN</B></FONT><FONT SIZE="2" COLOR="#3300FF" FACE="Arial" ><B> </B></FONT><B>items to your image name and size for the 2nd Layer. Set table and image to same size.</B></div> <div> <B>Note:</B>  The blue background image is only a small block, but setting the image size stretches it to fill the large table.</div> <div> You have to know the innermost image size (my horse picture) that is used in the 3rd layer to calculate the 2nd layer.</div> <div> I defined the table as 330x409 so the blue border would be 43 pixels wider on each side than the inside image (horse):</div> <div> <FONT SIZE="2" COLOR="#009900" FACE="Arial" >2nd table calculation:</FONT> take the 3rd table image (inside image) <FONT SIZE="2" COLOR="#3300FF" FACE="Arial" >244</FONT> wide+ 43 left side + 43 right side = <FONT SIZE="2" COLOR="#009900" FACE="Arial" ><B>330 wide </B></FONT> </div> <div> <FONT SIZE="2" COLOR="#009900" FACE="Arial" >2nd table calculation:</FONT> take the 3rd table image (inside image) <FONT SIZE="2" COLOR="#3300FF" FACE="Arial" >323</FONT> wide+ 43 top side + 43 bottom side = <FONT SIZE="2" COLOR="#009900" FACE="Arial" ><B>409 high</B></FONT>  </div> <bR> <div> <FONT SIZE="2" COLOR="#000000" FACE="Arial" ><B>Change </B></FONT><B>BLUE </B><FONT SIZE="2" COLOR="#000000" FACE="Arial" ><B>items to your image name and size for the 3rd Layer.  </B></FONT>(Note: my horse image is <B>244 </B>x <B>323</B>)</div> <bR> <div> <table border="2" bordercolordark="<FONT SIZE="2" COLOR="#009900" FACE="Arial" ><B>#000080</B></FONT>" bordercolor="<FONT SIZE="2" COLOR="#009900" FACE="Arial" ><B>#000080</B></FONT>" bordercolorlight="<FONT SIZE="2" COLOR="#009900" FACE="Arial" ><B>#000080</B></FONT>" cellpadding="1" cellspacing="1"  width="<FONT SIZE="2" COLOR="#009900" FACE="Arial" ><B>330</B></FONT>" height="<FONT SIZE="2" COLOR="#009900" FACE="Arial" ><B>409</B></FONT>"></div> <div> <tr></div> <div> <td align="center" background="<B>^GEMDIR/</B><FONT SIZE="2" COLOR="#009900" FACE="Arial" ><B>dkseablueparchment.jpg</B></FONT>" valign="Middle" width="<FONT SIZE="2" COLOR="#009900" FACE="Arial" ><B>330</B></FONT>" height="<FONT SIZE="2" COLOR="#009900" FACE="Arial" ><B>409</B></FONT>"></div> <div> <p align=center></div> <bR> <div> <table background="<B>^GEMDIR/</B><FONT SIZE="2" COLOR="#3300FF" FACE="Arial" >baypjumpweave.jpg</FONT>" border="0" cellpadding="6" cellspacing="2" width="<FONT SIZE="2" COLOR="#3300FF" FACE="Arial" >244</FONT>" height="<FONT SIZE="2" COLOR="#6600FF" FACE="Arial" >323</FONT>"></div> <div> <tr></div> <div> <tD  VALIGN=TOP HEIGHT= 112 ></div> <div> <NOBR></div> <div> <div></div> <div> </NOBR></div> <div> </td></div> <div> </tr></div> <div> </table></div> <div> </p></div> <div> </td></div> <div> </tr></div> <div> </table></div> </tD> </tR> </TABLE></div> <bR> </td> </tr></table></body>