Photo Borders

<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="index.htm" TARGET="_top" TITLE="Test Index"><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="id125.htm" TARGET="_top" TITLE="Table of sliced images Rounded corners"><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><B>Photo Borders</B><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><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> <bR> <div> <FONT SIZE="5" COLOR="#330066" FACE="Arial" ><B>Put a border around your photo</B></FONT> <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">  </div> <bR> <div> <B><IMG BORDER="0" SRC="Symb075c00b700f099006600.png" HEIGHT="16" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">CSB/Trellix HTML tables samples shown first.     </B></div> <div> <B><IMG BORDER="0" SRC="Symb075c00b700f099006600.png" HEIGHT="16" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">Borders made with</B><A HREF="#psp" TITLE="Photo Borders"><B> Photo programs</B></A><B>.  </B><FONT SIZE="2" COLOR="#6600CC" FACE="Arial" ><B>These Simple techniques can be done in MOST photo programs!</B></FONT></div> <div> <B><IMG BORDER="0" SRC="Symb075c00b700f099006600.png" HEIGHT="16" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">Add a </B><A HREF="#drop" TITLE="Photo Borders"><B>Drop Shadow</B></A><B> to the image.</B></div> <div> <B><IMG BORDER="0" SRC="Symb075c00b700f099006600.png" HEIGHT="16" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">Border made with layered </B><A HREF="#html" TITLE="Photo Borders"><B>HTML</B></A><B> TABLES to frame the image in a web page.</B></div> <bR> <DIV ALIGN="LEFT"></DIV> <div> <B> <TABLE BORDER="2" CELLPADDING="2" CELLSPACING="1" WIDTH="716" BORDERCOLORLIGHT="#9999CC" BORDERCOLORDARK="#9999CC" FRAME="BOX" RULES="ALL" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=TOP BGCOLOR=#EEEEEE HEIGHT= 194 WIDTH="704"><div> <B>WEBPAGE IMAGES:</B></div> <div> <B>1) Always remember to limit the image size for the web!</B> <FONT SIZE="3" COLOR="#000000" FACE="Arial" > </FONT>Check the size of your finished image.  Images should be "optimized so that they load faster.  Images should be between 1kb and 60kb in size (smaller is good as long as the quality remains!).  When you insert images that are not optimized, the webpage will load VERY SLOWLY!  Most Photo programs have a compression/optimize/make ready for website feature.  Try your HELP section in the program.  </div> <div> Consider <A HREF="http://www.irfanview.com" TARGET="_blank" TITLE="http://www.irfanview.com">Irfanview</A> as a quick remedy-photo viewer with some great features and good compression. </div> <div> <B>2) Don't expect the image "resize" feature to optimze your image!</B> If you load a 2mb image into the webpage and use the resize feature to make the image smaller on the webpage, your visitor still has to wait for 2mb to load.  Work on your photo before it makes it to your webpage!</div> <div> <B>3) Don't take images that are not yours unless it is posted that you can do so!</B></div> </tD> </tR> </TABLE></B></div> <bR> <div> <B>[CLARIFICATION:  </B><FONT SIZE="2" COLOR="#660099" FACE="Arial" ><B>Transparent image:</B></FONT><B> could be gif or png   </B><FONT SIZE="2" COLOR="#660099" FACE="Arial" ><B>Non-Transparent image:</B></FONT><B> could be gif, jpg, png, tif, bmp, etc.]</B></div> <bR> <bR> <div> <B>SIMPLEST IMAGE BORDERS</B></div> <div> These images were placed into the page using Insert > HTML so borders could be added.</div> <div> <TABLE BORDER="2" CELLPADDING="2" CELLSPACING="1" WIDTH="736" BORDERCOLORLIGHT="#9999CC" BORDERCOLORDARK="#9999CC" FRAME="BOX" RULES="ALL" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=TOP HEIGHT= 134 WIDTH="724"><div>  <img src="HTMLobj-1288/SnakeFace2.jpg">  </div> <div> <B>Code for use in CSB:</B>  <img src="^GEMDIR/SnakeFace2.jpg"></div> <div> Regular HTML: <img src="SnakeFace2.jpg"></div> </tD> </tR> <tR> <tD VALIGN=TOP HEIGHT= 135 WIDTH="724"><div>  <img src="HTMLobj-1289/SnakeFace2.jpg" border=1>  </div> <div> <B>Code for use in CSB: </B> <img src="^GEMDIR/SnakeFace2.jpg" border=1></div> <div> Regular HTML: <img src="SnakeFace2.jpg" border=<B>1</B>></div> </tD> </tR> <tR> <tD VALIGN=TOP HEIGHT= 134 WIDTH="724"><div>  <img src="HTMLobj-1290/SnakeFace2.jpg" border=5>  </div> <div> <B>Code for use in CSB:</B>  <img src="^GEMDIR/SnakeFace2.jpg" border=5></div> <div> Regular HTML: <img src="SnakeFace2.jpg"  border=<B>5</B>></div> </tD> </tR> <tR> <tD VALIGN=TOP HEIGHT= 161 ><NOBR><div>  <img src="HTMLobj-1291/SnakeFace2.jpg" border=10 style="border-color=#6600CC; border-style:inset" >  </div> <div> <B>Code for use in CSB:</B>  <img src="^GEMDIR/SnakeFace2.jpg" border=10  style="border-color=#6600CC; border-style:inset" ></div> <bR> <div> Regular HTML: <img src="SnakeFace2.jpg" border=<B>10</B>  style="border-color=<FONT SIZE="2" COLOR="#660099" FACE="Arial" ><B>#</B><B>6600CC</B></FONT>; border-style:<B>inset</B>" ></div> <div> (Scroll down to Sample 6 below for more style samples!)</div> </NOBR></tD> </tR> </TABLE></div> <bR> <bR> <div> <B> <TABLE BORDER="2" CELLPADDING="2" CELLSPACING="2" WIDTH="748" BORDERCOLORLIGHT="#C0C0C0" BORDERCOLORDARK="#808080" FRAME="VOID" RULES="ALL" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=TOP HEIGHT= 117 WIDTH="142"><div> <TABLE BORDER="1" CELLPADDING="2" CELLSPACING="1" WIDTH="87" BORDERCOLORLIGHT="#808080" BORDERCOLORDARK="#808080" FRAME="BOX" RULES="ALL" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=TOP HEIGHT= 79 ><NOBR><div> <IMG SRC="0af4a490.png" border=0 width="74" height="73" ALT="spaz" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></div> </NOBR></tD> </tR> </TABLE></div> <bR> </tD> <tD VALIGN=TOP><NOBR><div> <B>SAMPLE 1:</B></div> <div> This is a simple transparent gif placed into a CSB made table.</div> <bR> <div> Table settings:     Shadow is <B>same</B> as highlight color    Vertical alignment is Middle</div> <div> Cell spacing: 1      Cell padding: 2     Table border width: 1</div> </NOBR></tD> </tR> <tR> <tD VALIGN=TOP HEIGHT= 121 WIDTH="142"><div> <TABLE BORDER="3" CELLPADDING="2" CELLSPACING="1" WIDTH="91" BORDERCOLORLIGHT="#808080" BORDERCOLORDARK="#808080" FRAME="BOX" RULES="ALL" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=TOP HEIGHT= 79 ><NOBR><div> <IMG SRC="0af4a490.png" border=0 width="74" height="73" ALT="spaz" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></div> </NOBR></tD> </tR> </TABLE></div> <bR> </tD> <tD VALIGN=TOP><NOBR><div> <B>SAMPLE 2:</B></div> <div> Same simple transparent gif placed into a CSB made table.</div> <bR> <div> Table settings:     Shadow is <B>same</B> as highlight color    Vertical alignment is Middle</div> <div> Cell spacing: 1      Cell padding: 2     Table border width: 3</div> </NOBR></tD> </tR> <tR> <tD VALIGN=TOP HEIGHT= 490 ><NOBR><div> <TABLE BORDER="5" CELLPADDING="0" CELLSPACING="1" WIDTH="95" BORDERCOLORLIGHT="#808080" BORDERCOLORDARK="#000099" FRAME="BOX" RULES="ALL" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=CENTER HEIGHT= 79 ><NOBR><div> <IMG SRC="0ad4a490.png" border=0 width="74" height="73" ALT="spaz on blue" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></div> </NOBR></tD> </tR> </TABLE></div> <bR> </NOBR></tD> <tD VALIGN=TOP WIDTH="590"><div> <B>SAMPLE 3:</B></div> <div> This is a simple gif with blue background placed into a CSB made table.</div> <bR> <div> Table settings:  Shadow color: dark blue  Highlight: Gray Vertical alignment is Middle</div> <div> Cell spacing: 1      Cell padding: 0     Table border width: 5</div> <div> background of table is transparent, cell is transparent <FONT SIZE="2" COLOR="#000000" FACE="Arial" >(causes inner gray border around image)</FONT></div> <bR> <DIV ALIGN="LEFT"></DIV> <div> <I> <TABLE BORDER="2" CELLPADDING="2" CELLSPACING="1" WIDTH="578" BORDERCOLORLIGHT="#336666" BORDERCOLORDARK="#6600CC" FRAME="ABOVE" RULES="NONE" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=TOP COLSPAN=2 HEIGHT= 59 WIDTH="568"><div> <I><B>3D EFFECT!!</B></I></div> <div> <I>In the design window there is a little diagonal line showing in the upper left corner bottom right of the border of your image making the border look more 3D.</I></div> </tD> </tR> <tR> <tD VALIGN=TOP HEIGHT= 16 WIDTH="276"><div> <I><B>USING CSB-TRELLIX TABLE:</B></I><I>  </I></div> </tD> <tD VALIGN=TOP><NOBR><div> <I><B>USING  </B></I><A HREF="http://www.irfanview.com/" TARGET="_blank" TITLE="http://www.irfanview.com/"><I><B>IRFANVIEW</B></I></A><I><B>:</B></I><I><B> </B></I><I> </I><FONT SIZE="2" COLOR="#BF00BF" FACE="Arial" ><I>(FREEWARE)</I></FONT></div> </NOBR></tD> </tR> <tR> <tD VALIGN=TOP HEIGHT= 204 WIDTH="276"><div> <IMG SRC="4e38a680.gif" border=0 width="138" height="104" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></div> <bR> <div> <I>Neither will appear on your site - </I></div> <div> <I>they are design reference only.</I></div> </tD> <tD VALIGN=TOP><NOBR><div> <IMG SRC="4e87d7c0.jpg" border=0 width="125" height="124" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></div> <div> <I>You can add the beveled edge to an</I></div> <div> <I>image before placing it into your webpage!</I></div> <div> <I>Image > Effects > Effects Browser > 3D Button</I></div> <div> <I>Can be done with other photo editing software too!</I></div> </NOBR></tD> </tR> </TABLE></I></div> <bR> </tD> </tR> <tR> <tD VALIGN=TOP HEIGHT= 262 ><NOBR><div> <TABLE BORDER="5" CELLPADDING="0" CELLSPACING="1" WIDTH="95" BORDERCOLORLIGHT="#808080" BORDERCOLORDARK="#000099" FRAME="BOX" RULES="ALL" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=TOP BGCOLOR=#0000FF HEIGHT= 79 ><NOBR><div> <IMG SRC="0ad4a490.png" border=0 width="74" height="73" ALT="spaz on blue" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></div> </NOBR></tD> </tR> </TABLE></div> <bR> </NOBR></tD> <tD VALIGN=TOP WIDTH="590"><div> <B>SAMPLE 4:</B></div> <div> This is a simple gif with a blue background placed into a CSB made table.</div> <bR> <div> Table settings:  Shadow color: dark blue    Highlight: gray   Vertical alignment is Middle</div> <div> Cell spacing: 1      Cell padding: 0     Table border width: 5</div> <div> background of table is transparent, cell is blue to match image so no gray border around image.</div> <bR> <div> <I>Note:  You can also make your table specific height/width to match your image to get rid of the extra background color.  </I><I>To assign a specific cell/row height or width:</I></div> <div> <I>Right click the table > Properties > Table > Size & Alignment tab ROW HEIGHT </I></div> <bR> </tD> </tR> <tR> <tD VALIGN=TOP HEIGHT= 418 WIDTH="142"><div> <TABLE BORDER="1" CELLPADDING="2" CELLSPACING="2" WIDTH="22" BORDERCOLORLIGHT="#808080" BORDERCOLORDARK="#808080" FRAME="BOX" RULES="ALL" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=TOP HEIGHT= 18 ><NOBR><div>  <TABLE class=s2 style="BORDER-TOP-STYLE: ridge; BORDER-RIGHT-STYLE: ridge; BORDER-LEFT-STYLE: ridge; BORDER-BOTTOM-STYLE: ridge" cellSpacing=0 cellPadding=0 width=81 align=center border=5> <TBODY> <TD align=middle><IMG SRC="0af4a490.png" border=0 width="74" height="73" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></TD></TBODY></TABLE>  </div> </NOBR></tD> </tR> </TABLE></div> <bR> <bR> <div> This is the way it looks in my tlx file:</div> <div> <IMG SRC="1ce1f270.jpg" border=0 width="31" height="39" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></div> <div> (I use a small box for my image placeholder)</div> </tD> <tD VALIGN=TOP WIDTH="590"><div> <B>SAMPLE 5:</B></div> <div> This is a transparent gif placed into an HTML table, placed into a CSB made table for a double border.  The inner border is a RIDGE.</div> <bR> <div> <B>CSB SETTINGS FOR OUTSIDE BORDER:  </B></div> <div> Table settings:     Shadow is same as highlight color    Vertical alignment is Middle</div> <div> Cell spacing: 2      Cell padding: 2     Table border width: 1</div> <bR> <div> <B>USE INSERT > HTML (or insert a webgem) TO CREATE THE SPECIAL TABLE</B></div> <div> Code used for the inner RIDGE border and image:</div> <DIV ALIGN="LEFT"></DIV> <div> <TABLE BORDER="2" CELLPADDING="2" CELLSPACING="1" WIDTH="574" BORDERCOLORLIGHT="#C0C0C0" BORDERCOLORDARK="#808080" FRAME="BOX" RULES="ALL" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=TOP HEIGHT= 124 WIDTH="562"><div> <TABLE class=s2 </div> <div> style="BORDER-TOP-STYLE: <FONT SIZE="2" COLOR="#0000FF" FACE="Arial" >ridge</FONT>; BORDER-RIGHT-STYLE: <FONT SIZE="2" COLOR="#0000FF" FACE="Arial" >ridge</FONT>; BORDER-LEFT-STYLE: <FONT SIZE="2" COLOR="#0000FF" FACE="Arial" >ridge</FONT>; BORDER-BOTTOM-STYLE: <FONT SIZE="2" COLOR="#0000FF" FACE="Arial" >ridge</FONT>" </div> <div> cellSpacing=0 cellPadding=0 width=<FONT SIZE="2" COLOR="#990000" FACE="Arial" ><B>81</B></FONT> align=center border=5></div> <div> <TBODY></div> <div> <TD align=middle><IMG SRC="<FONT SIZE="2" COLOR="#990000" FACE="Arial" ><B>0af4a490.png</B></FONT>" border=0 width="<FONT SIZE="2" COLOR="#990000" FACE="Arial" ><B>74</B></FONT>" height="<FONT SIZE="2" COLOR="#990000" FACE="Arial" ><B>73</B></FONT>" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></TD></TBODY></TABLE></div> </tD> </tR> </TABLE></div> <div> <B>blue </B><FONT SIZE="3" COLOR="#000000" FACE="Arial" >= change this for the style of border</FONT></div> <div> <B>red</B><FONT SIZE="3" COLOR="#000000" FACE="Arial" > = change this to your image specifications.</FONT></div> <bR> </tD> </tR> <tR> <tD VALIGN=TOP HEIGHT= 450 WIDTH="142"><div>  <TABLE class=s2 style="BORDER-TOP-STYLE: groove; BORDER-RIGHT-STYLE: groove; BORDER-LEFT-STYLE: groove; BORDER-BOTTOM-STYLE: groove" cellSpacing=0 cellPadding=0 width=81 align=center border=5> <TBODY> <TD align=middle><IMG SRC="0af4a490.png" border=0 width="74" height="73" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></TD></TBODY></TABLE>  </div> </tD> <tD VALIGN=TOP><NOBR><div> <B>SAMPLE 6:</B></div> <div> This is a transparent gif placed into an HTML table with the border style: GROOVE.</div> <bR> <div> <B>USE INSERT > HTML (or insert a webgem) TO CREATE THE SPECIAL TABLE</B></div> <div> Code used for the inner GROOVE border and image:</div> <DIV ALIGN="LEFT"></DIV> <div> <TABLE BORDER="2" CELLPADDING="2" CELLSPACING="1" WIDTH="574" BORDERCOLORLIGHT="#C0C0C0" BORDERCOLORDARK="#808080" FRAME="BOX" RULES="ALL" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=TOP HEIGHT= 143 WIDTH="562"><div> <TABLE class=s2 </div> <div> style="BORDER-TOP-STYLE: <FONT SIZE="3" COLOR="#0000FF" FACE="Arial" >groove</FONT>; BORDER-RIGHT-STYLE: <FONT SIZE="3" COLOR="#0000FF" FACE="Arial" >groove</FONT>; BORDER-LEFT-STYLE: <FONT SIZE="3" COLOR="#0000FF" FACE="Arial" >groove</FONT>; BORDER-BOTTOM-STYLE: <FONT SIZE="3" COLOR="#0000FF" FACE="Arial" >groove</FONT>" </div> <div> cellSpacing=0 cellPadding=0 width=<FONT SIZE="3" COLOR="#990000" FACE="Arial" ><B>81</B></FONT> align=center border=5></div> <div> <TBODY></div> <div> <TD align=middle><IMG SRC="<FONT SIZE="3" COLOR="#990000" FACE="Arial" ><B>0af4a490.png</B></FONT>" border=0 width="<FONT SIZE="3" COLOR="#990000" FACE="Arial" ><B>74</B></FONT>" height="<FONT SIZE="3" COLOR="#990000" FACE="Arial" ><B>73</B></FONT>" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></TD></TBODY></TABLE></div> </tD> </tR> </TABLE></div> <div> <B>blue </B><FONT SIZE="3" COLOR="#000000" FACE="Arial" >= change this for the style of border</FONT></div> <div> <B>red</B><FONT SIZE="3" COLOR="#000000" FACE="Arial" > = change this to your image specifications.</FONT></div> <bR> <DIV ALIGN="LEFT"></DIV> <div> <TABLE BORDER="0" CELLPADDING="2" CELLSPACING="1" WIDTH="573" BORDERCOLORLIGHT="#C0C0C0" BORDERCOLORDARK="#808080" FRAME="VOID" RULES="NONE" HSPACE="0" VSPACE="0" BGCOLOR=#FFFFFF > <tR> <tD VALIGN=TOP COLSPAN=2 BGCOLOR=#DDDDDD HEIGHT= 22 ><NOBR><div> <FONT SIZE="3" COLOR="#0000FF" FACE="Arial" ><B>Border styles:</B></FONT><FONT SIZE="3" COLOR="#000000" FACE="Arial" ><B> </B></FONT><FONT SIZE="1" COLOR="#000000" FACE="Arial" ><B> </B></FONT><B>for full examples of table borders, </B><A HREF="http://www.cmg02.com/cg2/borders.htm" TARGET="_blank" TITLE="http://www.cmg02.com/cg2/borders.htm"><B>visit Curtis' website!</B></A></div> </NOBR></tD> <tD VALIGN=TOP BGCOLOR=#DDDDDD><NOBR><div> inset       <IMG SRC="1d945120.jpg" border=0 width="69" height="18" ALIGN="BOTTOM" HSPACE="0" VSPACE="0">    </div> </NOBR></tD> </tR> <tR> <tD VALIGN=CENTER BGCOLOR=#DDDDDD HEIGHT= 26 WIDTH="212"><div> dotted       <IMG SRC="1d528120.jpg" border=0 width="40" height="18" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></div> </tD> <tD VALIGN=TOP BGCOLOR=#DDDDDD WIDTH="205"><div> double     <IMG SRC="1d73f120.jpg" border=0 width="63" height="18" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></div> </tD> <tD VALIGN=TOP BGCOLOR=#DDDDDD><NOBR><div> ridge     <IMG SRC="1da47130.jpg" border=0 width="71" height="19" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></div> </NOBR></tD> </tR> <tR> <tD VALIGN=TOP BGCOLOR=#DDDDDD HEIGHT= 26 WIDTH="212"><div> dashed    <IMG SRC="1d633130.jpg" border=0 width="51" height="19" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></div> </tD> <tD VALIGN=TOP BGCOLOR=#DDDDDD WIDTH="205"><div> groove     <IMG SRC="1d844120.jpg" border=0 width="68" height="18" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></div> </tD> <tD VALIGN=TOP BGCOLOR=#DDDDDD><NOBR><div> outset     <IMG SRC="1db44130.jpg" border=0 width="68" height="19" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></div> </NOBR></tD> </tR> </TABLE></div> <div>  <A NAME="psp"><IMG BORDER="0" SRC="1x1.gif" HEIGHT="1" ALIGN="bottom" WIDTH="1" HSPACE="0" VSPACE="0" ></A></div> </NOBR></tD> </tR> <tR> <tD VALIGN=TOP HEIGHT= 269 ><NOBR><div> <B>SAMPLE 7:</B></div> <div> <IMG SRC="1d457580.jpg" border=0 width="87" height="88" ALT="sam's logo" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></div> <bR> <div> <TABLE BORDER="2" CELLPADDING="2" CELLSPACING="0" WIDTH="103" BORDERCOLORLIGHT="#C0C0C0" BORDERCOLORDARK="#808080" FRAME="BOX" RULES="ALL" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=TOP BGCOLOR=#C0DCC0 HEIGHT= 94 ><NOBR><div> <IMG SRC="1d457580.jpg" border=0 width="87" height="88" ALT="sam's logo" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></div> </NOBR></tD> </tR> </TABLE></div> <bR> </NOBR></tD> <tD VALIGN=TOP><NOBR><div> <TABLE BORDER="0" CELLPADDING="2" CELLSPACING="1" WIDTH="581" BORDERCOLORLIGHT="#C0C0C0" BORDERCOLORDARK="#808080" FRAME="VOID" RULES="NONE" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=TOP HEIGHT= 222 WIDTH="374"><div> This simple jpg image has a thin lighter uneven border around the edges.</div> <bR> <div> It was made in a photo program by choosing the paint brush and adjusting the opacity setting.  </div> <bR> <div> When placed in a table with the same color background, the edges fade out and the image apears to be torn or jagged along the edge.</div> </tD> <tD VALIGN=TOP><NOBR><div> <IMG SRC="467bcd80.jpg" border=0 width="188" height="216" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></div> </NOBR></tD> </tR> </TABLE></div> <bR> </NOBR></tD> </tR> <tR> <tD VALIGN=TOP COLSPAN=2 HEIGHT= 737 ><NOBR><div> <B>SAMPLE 8:</B></div> <div> <TABLE BORDER="0" CELLPADDING="2" CELLSPACING="1" WIDTH="724" BORDERCOLORLIGHT="#C0C0C0" BORDERCOLORDARK="#808080" FRAME="VOID" RULES="NONE" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=TOP HEIGHT= 230 ><NOBR><div> <IMG SRC="1d365490.jpg" border=0 width="101" height="73" ALT="stains with white border around edge" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></div> <bR> <div> <IMG SRC="4687d7c0.jpg" border=0 width="125" height="124" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></div> </NOBR></tD> <tD VALIGN=TOP WIDTH="581"><div> This simple jpg image has a thin white border around the edges.  It was made in a Paint Shop Pro photo program. </div> <div> Choose Menu item:    <B>Image > Add Borders  2 pixels, Check Symmetric</B></div> <div> A slight white edge now surrounds the image!</div> <bR> <div> This technque can be made with ANY photo program. </div> <div> An  example of adding a solid color border around an image using the free <A HREF="http://www.webtree.ca/newlife/printkey_info.htm" TARGET="_blank" TITLE="http://www.webtree.ca/newlife/printkey_i">Printkey program</A>.  This little freeware piece (with no ads or spyware in it) allows you to to make simple edits to  your image in several ways, including resizing, adding a frame, adjusting color, etc.   Use it to adjust the BRIGHTNESS/CONTRAST on an image to create a <A HREF="#watermark" TITLE="Photo Borders">watermark</A> image for the behind your text! </div> </tD> </tR> <tR> <tD VALIGN=TOP COLSPAN=2 HEIGHT= 446 ><NOBR><div> <IMG SRC="46984b80.jpg" border=0 width="644" height="440" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></div> </NOBR></tD> </tR> </TABLE></div> <bR> </NOBR></tD> </tR> <tR> <tD VALIGN=TOP COLSPAN=2 HEIGHT= 282 WIDTH="736"><div> <B>SAMPLE 9:  </B><FONT SIZE="3" COLOR="#000000" FACE="Arial" ><B>This sample shows that with a photo program, you can apply a pre-designed frame to create a beautiful 3D presentation.</B></FONT></div> <bR> <DIV ALIGN="LEFT"></DIV> <div> <B><IMG SRC="4e5abb30.jpg" border=0 width="171" height="179" ALIGN="BOTTOM" HSPACE="0" VSPACE="0">     <IMG SRC="4e6b7d10.jpg" border=0 width="183" height="209" ALIGN="BOTTOM" HSPACE="0" VSPACE="0">    <IMG SRC="4e7b3b20.jpg" border=0 width="179" height="178" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></B></div> </tD> </tR> <tR> <tD VALIGN=TOP COLSPAN=2 HEIGHT= 1362 ><NOBR><div> <B>SAMPLE 10:  </B><FONT SIZE="3" COLOR="#000000" FACE="Arial" ><B>This sample is made with Paint Shop Pro 7: </B></FONT></div> <bR> <div> <TABLE BORDER="0" CELLPADDING="2" CELLSPACING="1" WIDTH="726" BORDERCOLORLIGHT="#C0C0C0" BORDERCOLORDARK="#808080" FRAME="VOID" RULES="NONE" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=TOP HEIGHT= 210 WIDTH="448"><div> <B>How about an off-center frame to make it look like a POLAROID picture?</B></div> <bR> <div> Your image should be fairly square.  You can crop it if necessary.</div> <bR> <div> In Paint Shop Pro photo program,   </div> <div> Choose Menu item:    <B>Image > Add Borders   </B></div> <div> <B>    UNCHECK symmetric </B> </div> <div> Make the bottom edge wider.</div> </tD> <tD VALIGN=TOP><NOBR><div> <IMG SRC="4a7efcc0.jpg" border=0 width="239" height="204" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></div> </NOBR></tD> </tR> <tR> <tD VALIGN=TOP HEIGHT= 235 WIDTH="448"><bR> <bR> <div> <B>Now you have a polaroid photo!</B></div> <bR> </tD> <tD VALIGN=TOP><NOBR><div> <IMG SRC="4a8e5cf0.jpg" border=0 width="229" height="207" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></div> <bR> </NOBR></tD> </tR> <tR> <tD VALIGN=TOP HEIGHT= 410 WIDTH="448"><div> <B> <A NAME="drop"><IMG BORDER="0" SRC="1x1.gif" HEIGHT="1" ALIGN="bottom" WIDTH="1" HSPACE="0" VSPACE="0" ></A></B><B>Want the image to have a drop shadow like this?</B></div> <bR> <DIV ALIGN="LEFT"></DIV> <div> <IMG SRC="4aae9d30.jpg" border=0 width="233" height="211" ALT="spaz drop shadow" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></div> <bR> <div> In Paint Shop Pro, choose<B> Image > Change Canvas Size</B></div> <div> Add four pixels to the right and bottom.  OK.</div> <bR> <div>  </div> <bR> </tD> <tD VALIGN=TOP><NOBR><div> <IMG SRC="4ab05930.jpg" border=0 width="261" height="403" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></div> </NOBR></tD> </tR> <tR> <tD VALIGN=TOP COLSPAN=2 HEIGHT= 428 ><NOBR><div> <TABLE BORDER="2" CELLPADDING="2" CELLSPACING="1" WIDTH="711" BORDERCOLORLIGHT="#C0C0C0" BORDERCOLORDARK="#808080" FRAME="VOID" RULES="COLS" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=TOP HEIGHT= 114 ><NOBR><div> Now using the <B>selection tool  <IMG SRC="4af18160.jpg" border=0 width="24" height="22" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></B></div> <div> select only select the original image</div> <div> leaving the 4 pixels on the right and</div> <div> bottom unselected!</div> <bR> </NOBR></tD> <tD VALIGN=TOP><NOBR><div> Choose <B>Effects > 3D Effects > Drop Shadow</B></div> <div> Adjust the settings to the way you prefer.  Press the <IMG SRC="4ae25150.jpg" border=0 width="37" height="21" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></div> <div> to preview the settings on the original image.</div> <div> These are my settings for this image:</div> </NOBR></tD> </tR> <tR> <tD VALIGN=TOP HEIGHT= 289 ><NOBR><div> <IMG SRC="4ad041b0.jpg" border=0 width="260" height="283" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></div> </NOBR></tD> <tD VALIGN=TOP><NOBR><div> <IMG SRC="4b0839b0.jpg" border=0 width="387" height="155" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></div> <bR> <div> Get rid of dotted lines:  <B>Selections > Select None</B></div> <bR> <div> <B>You are done. </B></div> <div> <B>File Save As</B> to make a new image.</div> </NOBR></tD> </tR> </TABLE></div> <bR> </NOBR></tD> </tR> </TABLE></div> <bR> </NOBR></tD> </tR> <tR> <tD VALIGN=TOP COLSPAN=2 HEIGHT= 1942 ><NOBR><div> <B>SAMPLE 11:  </B><FONT SIZE="3" COLOR="#000000" FACE="Arial" ><B>This sample is made with Paint Shop Pro 7: </B></FONT></div> <div> (<FONT SIZE="2" COLOR="#000000" FACE="Arial" >Could be done in PSP8 or any image software with selection layers!)</FONT></div> <bR> <DIV ALIGN="LEFT"></DIV> <div> <TABLE BORDER="2" CELLPADDING="2" CELLSPACING="0" WIDTH="526" BORDERCOLORLIGHT="#C0C0C0" BORDERCOLORDARK="#808080" FRAME="BOX" RULES="NONE" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=CENTER BGCOLOR=#444444 HEIGHT= 202 ><NOBR><div> <I><B>BEFORE</B></I></div> <div> <I><B>plain edge</B></I></div> <div> <I><B><IMG SRC="458d39e0.jpg" border=0 width="211" height="158" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></B></I></div> </NOBR></tD> <tD VALIGN=CENTER BGCOLOR=#444444><NOBR><div> <I><B>AFTER</B></I></div> <div> <I><B>2 borders</B></I></div> <div> <I><B><IMG SRC="459d7a20.jpg" border=0 width="215" height="162" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></B></I></div> </NOBR></tD> </tR> </TABLE></div> <bR> <div> <TABLE BORDER="2" CELLPADDING="2" CELLSPACING="0" WIDTH="708" BORDERCOLORLIGHT="#808080" BORDERCOLORDARK="#808080" FRAME="VOID" RULES="ROWS" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=CENTER HEIGHT= 31 ><NOBR><div> Open an image.  <FONT SIZE="2" COLOR="#000000" FACE="Arial" >If you would like to use my image for practice: </FONT></div> </NOBR></tD> <tD VALIGN=CENTER WIDTH="296"><div>  <a href="HTMLobj-1115/spazwindowplain.jpg"><u>spazwindowplain.jpg</u> </a>  </div> </tD> </tR> <tR> <tD VALIGN=TOP HEIGHT= 217 ><NOBR><bR> <div> On menu, click <B>Selections > Choose Select All</B></div> <bR> <div> You have marching ants around the image.</div> </NOBR></tD> <tD VALIGN=TOP><NOBR><div> <IMG SRC="45ceac80.jpg" border=0 width="234" height="200" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></div> </NOBR></tD> </tR> <tR> <tD VALIGN=TOP HEIGHT= 215 ><NOBR><bR> <div> Choose <B>Selections > Modify > Contract</B></div> <bR> <div> For this example I used 10.</div> <bR> <div> You now have ants marching inside the image.  </div> </NOBR></tD> <tD VALIGN=TOP><NOBR><div> <IMG SRC="45dedc60.jpg" border=0 width="237" height="198" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></div> </NOBR></tD> </tR> <tR> <tD VALIGN=TOP HEIGHT= 226 WIDTH="404"><div> We want to leave the inner part of the image alone.</div> <bR> <div> But we want to change what is outside the ants.</div> <bR> <div> <B>Choose Selections > Invert</B></div> <bR> <div> Now you have 2 rows of marching ants.  </div> <div> The area that has been selected is that outer FRAME around the image! </div> </tD> <tD VALIGN=TOP><NOBR><div> <IMG SRC="45fefcb0.jpg" border=0 width="239" height="203" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></div> </NOBR></tD> </tR> <tR> <tD VALIGN=TOP COLSPAN=2 HEIGHT= 32 WIDTH="700"><div> <B>You can now choose how you want that outside edge to look. </B></div> </tD> </tR> <tR> <tD VALIGN=TOP HEIGHT= 455 WIDTH="404"><bR> <bR> <div> On the palette, choose a color for the top box (foreground) </div> <div> (I chose white)</div> <bR> <div> Choose <B>Flood Fill</B> as your tool.  <IMG SRC="46018170.jpg" border=0 width="24" height="23" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></div> <bR> <bR> <div> Click your pointer in the outer frame and you have the colored frame around your image.     </div> <bR> <DIV ALIGN="LEFT"></DIV> <div> <IMG SRC="462d39e0.jpg" border=0 width="211" height="158" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></div> <div> This looks like a photo taken in the 60's with the white edge!</div> </tD> <tD VALIGN=TOP><NOBR><div> <IMG SRC="46121b20.jpg" border=0 width="289" height="434" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></div> </NOBR></tD> </tR> <tR> <tD VALIGN=TOP HEIGHT= 180 WIDTH="404"><div> Don't like the color?  Change to the eyedropper tool. <IMG SRC="46316150.jpg" border=0 width="22" height="21" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></div> <div> (I found a green in the image that I liked with the eyedropper.)  </div> <bR> <div> Then change back to flood fill and click in the outer border area.  This time the border is green.</div> <bR> <div> Get rid of the marching ants:  <B>Selections > Select None</B></div> </tD> <tD VALIGN=TOP><NOBR><div> <IMG SRC="465d7a20.jpg" border=0 width="215" height="162" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></div> </NOBR></tD> </tR> <tR> <tD VALIGN=TOP HEIGHT= 184 ><NOBR><bR> <div> For added interest, choose Menu item:</div> <div>   <B>Image > Add Borders  2 pixels</B></div> <bR> <div> A slight white edge now surrounds the green border!</div> <bR> <bR> </NOBR></tD> <tD VALIGN=TOP BGCOLOR=#888888><NOBR><div> <IMG SRC="459d7a20.jpg" border=0 width="215" height="162" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></div> </NOBR></tD> </tR> </TABLE></div> <div> <B>File Save As</B> to save the modified image under a new name, keeping the original intact.</div> <bR> </NOBR></tD> </tR> <tR> <tD VALIGN=TOP COLSPAN=2 HEIGHT= 961 ><NOBR><div> <B> <A NAME="html"><IMG BORDER="0" SRC="1x1.gif" HEIGHT="1" ALIGN="bottom" WIDTH="1" HSPACE="0" VSPACE="0" ></A></B><FONT SIZE="4" COLOR="#660099" FACE="Arial" ><B>SAMPLE 12:</B></FONT><B>   </B><FONT SIZE="3" COLOR="#660099" FACE="Arial" ><B>USE HTML TABLES TO CREATE BORDERS AROUND YOUR IMAGES!</B></FONT></div> <bR> <DIV ALIGN="LEFT"></DIV> <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= 478 WIDTH="335"><div>  </div> <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="id129_layered.htm" TARGET="_top" TITLE="Overlap Images"><B>here</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 full color image with a colored background creating a frame.</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-1207/dkseablueparchment.jpg" valign="Middle" width="330" height="410"> <table background="HTMLobj-1207/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> <div> <TABLE BORDER="2" CELLPADDING="2" CELLSPACING="1" WIDTH="718" BORDERCOLORLIGHT="#C0C0C0" BORDERCOLORDARK="#808080" FRAME="BOX" RULES="ROWS" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=TOP HEIGHT= 359 WIDTH="405"><div> <B>   </B></div> <bR> <div> <B>If you would like this image effect, combined with text or </B><FONT SIZE="3" 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 Example 4!</B></div> <bR> <bR> <div> <B>Images are lightened to create a </B><A HREF="id128.htm" TARGET="_top" TITLE="Create a Watermark"><B>watermark</B></A><B> effect so text can be placed overtop an image and still be readable. </B></div> <bR> <bR> <div> <B>Click image to see samples with links & get the code!</B></div> </tD> <tD VALIGN=TOP><NOBR><div> <A HREF="http://www.samisite.com/backgrounds/id16.htm" TARGET="_top" TITLE="http://www.samisite.com/backgrounds/id16"><B><IMG SRC="427074a0.gif" border=0 width="263" height="330" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></B></A></div> <bR> </NOBR></tD> </tR> </TABLE></div> <bR> </NOBR></tD> </tR> </TABLE></B></div> <DIV ALIGN="LEFT"></DIV> <div> <B> <A NAME="watermark"><IMG BORDER="0" SRC="1x1.gif" HEIGHT="1" ALIGN="bottom" WIDTH="1" HSPACE="0" VSPACE="0" ></A></B></div> <div> <B>HOW TO CREATE A WATERMARK IMAGE  </B><B>(moved </B><A HREF="id128.htm" TARGET="_top" TITLE="Create a Watermark"><B>here!</B></A><B>)</B></div> </td> </tr></table></body>