Sliced images and manually linked

<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="id125.htm" TARGET="_top" TITLE="Table of sliced images Rounded corners"><IMG SRC="4b1070e0.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="id129.htm" TARGET="_top" TITLE="Overlap Images"><IMG SRC="4b3070e0.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><B>Sliced images and manually linked</B><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> <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">  </div> <div> <B>Slice and manually link photos</B></div> <bR> <div> <B>To create a curved edge for presenting images, etc, use a sliced image to create the look you want.</B></div> <bR> <div> <B>Start with 1 image and use a photo program to slice it into pieces.</B></div> <div> <A HREF="imagemap.htm" TARGET="_top" TITLE="image map"><I>(Technique is similar to image mapping but this is done manually instead of by the photo program)</I></A></div> <bR> <div> <B>This sample has 9 pieces to the image.</B></div> <div> <B>All samples shown are JPG but could be GIF or PNG.</B></div> <div> All images placed into the same row of a table.  </div> <div> Cursor is placed at end of each line and image inserted.</div> <div> In the design window, you will see spaces between images.</div> <div> But when published, all the images are tight together.</div> <bR> <div> After inserting the images in the table I chose a couple of the images to link.</div> <div> Click <B>VIDEOS</B> or <B>EXTRAS </B>on the Ipod.</div> <div> You will be taken to a different part of the page.</div> <bR> <div> <TABLE BORDER="1" CELLPADDING="0" CELLSPACING="0" WIDTH="392" BORDERCOLORLIGHT="#C0C0C0" BORDERCOLORDARK="#808080" FRAME="BOX" RULES="ALL" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=CENTER HEIGHT= 466 WIDTH="388"><div> <IMG SRC="66982390.jpg" border=0 width="386" height="57" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"><A HREF="#video" TITLE="Click here for Videos!" TARGET="_top" TITLE="#video" TITLE="Click here for Videos!"><IMG SRC="66a820e0.jpg" border=0 width="386" height="14" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></A><IMG SRC="66b820d0.jpg" border=0 width="386" height="13" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"><IMG SRC="66e820d0.jpg" border=0 width="386" height="13" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"><A HREF="#extras" TITLE="Click here for Extras!" TARGET="_top" TITLE="#extras" TITLE="Click here for Extras!"><IMG SRC="66f820e0.jpg" border=0 width="386" height="14" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></A><IMG SRC="670820d0.jpg" border=0 width="386" height="13" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"><IMG SRC="671820e0.jpg" border=0 width="386" height="14" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"><IMG SRC="672820c0.jpg" border=0 width="386" height="12" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"><IMG SRC="673822f0.jpg" border=0 width="386" height="303" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></div> </tD> </tR> </TABLE></div> <bR> <bR> <bR> <bR> <div> <B> <A NAME="video"><IMG BORDER="0" SRC="1x1.gif" HEIGHT="1" ALIGN="bottom" WIDTH="1" HSPACE="0" VSPACE="0" ></A></B><B>Video - anchor for link above - click a link, end up here!</B></div> <bR> <bR> <div> <B> <A NAME="extras"><IMG BORDER="0" SRC="1x1.gif" HEIGHT="1" ALIGN="bottom" WIDTH="1" HSPACE="0" VSPACE="0" ></A></B><B>Extr</B><B>as</B><B> - anchor for link above - click a link, end up here!</B></div> <bR> <bR> <bR> <bR> <div> This is what I see in my CSB design window:</div> <div> <B><IMG SRC="67484bd0.jpg" border=0 width="388" height="189" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></B></div> <bR> <bR> <div> <B>To make your links: </B></div> <div> <B>In CSB/Trellix: </B> </div> <div> Right click an image, choose link (to page, file, etc)</div> <div> I used URL style link so I could make a rollover TITLE tag.</div> <div> My sample lined to an anchor on the same page.</div> <div> If you put a TITLE or ALT tag into your link, do NOT put in the final <FONT SIZE="4" COLOR="#990000" FACE="Arial" ><B>"</B></FONT></div> <div> <IMG SRC="67590180.jpg" border=0 width="400" height="280" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></div> <bR> <bR> <div> <B>This is the code for that table, images and links:</B></div> <div> Note that my font size is set very small so the spacing is minimal.</div> <div> All images are put into the SAME table row!</div> <div> Linked images are shown in <FONT SIZE="3" COLOR="#6633CC" FACE="Arial" ><B>purple</B></FONT> for emphasis.  You would change your image names and sizes.</div> <bR> <div> <TABLE BORDER="2" CELLPADDING="2" CELLSPACING="1" WIDTH="733" BORDERCOLORLIGHT="#C0C0C0" BORDERCOLORDARK="#808080" FRAME="BOX" RULES="ALL" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=TOP HEIGHT= 344 WIDTH="721"><div> <TABLE BORDER="1" CELLPADDING="0" CELLSPACING="0" WIDTH="392" BORDERCOLORLIGHT="#C0C0C0" BORDERCOLORDARK="#808080" FRAME="BOX" RULES="ALL" HSPACE="0" VSPACE="0"</div> <div> ></div> <div> <tR></div> <div> <tD  VALIGN=CENTER HEIGHT= 466  WIDTH="388"></div> <div> <div><FONT SIZE="1" COLOR="#000000" FACE="Arial,Helvetica,sans-serif"></div> <div> <IMG SRC="66982390.jpg" border=0 width="386" height="57" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></div> <div> <B><A HREF="#video"    TITLE="Click here for Videos!"><IMG SRC="66a820e0.jpg" border=0 width="386" height="14" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></A></B></div> <div> <IMG SRC="66b820d0.jpg" border=0 width="386" height="13" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></div> <div> <IMG SRC="66e820d0.jpg" border=0 width="386" height="13" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></div> <div> <B><A HREF="#extras"    TITLE="Click here for Extras!"><IMG SRC="66f820e0.jpg" border=0 width="386" height="14" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></A></B></div> <div> <IMG SRC="670820d0.jpg" border=0 width="386" height="13" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></div> <div> <IMG SRC="671820e0.jpg" border=0 width="386" height="14" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></div> <div> <IMG SRC="672820c0.jpg" border=0 width="386" height="12" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></div> <div> <IMG SRC="673822f0.jpg" border=0 width="386" height="303" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></FONT></div></div> <div> </tD></div> <div> </tR></div> <div> </TABLE></div> </tD> </tR> </TABLE></div> <bR> <bR> <bR> </td> </tr></table></body>