image map

<body topmargin=0 leftmargin=0 marginheight=0 marginwidth=0> <table cellpadding=0 cellspacing=0 border=0><tr> <td valign="top" colspan=2 height=50 BGCOLOR="#660099" TEXT="#080000"> <div> <TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="638" BORDERCOLORLIGHT="#C0C0C0" BORDERCOLORDARK="#808080" FRAME="VOID" RULES="NONE" ALIGN="LEFT" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=CENTER HEIGHT= 39 ><NOBR><div> <B>CSB/Trellix Test</B><FONT SIZE="3" COLOR="#000000" FACE="Arial" >   </FONT></div> </NOBR></tD> <tD VALIGN=CENTER><NOBR><div> <FONT SIZE="3" COLOR="#000000" FACE="Arial" >                    </FONT><A HREF="id141.htm" TARGET="_top" TITLE="DD Thumbnail Viewer"><IMG SRC="03f070e0.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="id113.htm" TARGET="_top" TITLE="xara thumbnail"><IMG SRC="040070e0.png" border=0 width="7" height="14" ALT="next" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></A>  <FONT SIZE="1" COLOR="#CCCC99" FACE="Arial" > </FONT> <FONT SIZE="1" COLOR="#CCCC99" FACE="Arial" >    </FONT></div> </NOBR></tD> <tD VALIGN=CENTER WIDTH="200"><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> </tD> </tR> </TABLE></div> <div> </div> </td> </tr><tr> <td valign="top" width=160 BGCOLOR="#FFFFFF" TEXT="#080000"> <div> <STYLE>  </STYLE> </div> <bR> <bR> <div> <B>This is not a tutorial to teach you to MAKE an image map. </B> That varies depending on what program you use to make the map.</div> <bR> <div> <B>This documentation shows the basic steps to IMPLEMENT an image map in CSB once you have the code from your mapping software.</B></div> </td> <td valign="top" height=430 width="100%" BGCOLOR="#DDDDDD" TEXT="#080000"> <div> <B><STYLE>  </STYLE></B></div> <DIV ALIGN="LEFT"></DIV> <div> <A HREF="index.htm" TARGET="_top" TITLE="Test Index">Test Index</A><FONT SIZE="2" COLOR="#000000" FACE="Symbol" >   ·   </FONT><A HREF="id93.htm" TARGET="_top" TITLE="Photo Borders">Photo Borders</A><FONT SIZE="2" COLOR="#000000" 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="2" COLOR="#000000" FACE="Symbol" >   ·   </FONT><A HREF="sliceandlink.htm" TARGET="_top" TITLE="Sliced images and manually linked">Sliced images and manually linked</A><FONT SIZE="2" COLOR="#000000" FACE="Symbol" >   ·   </FONT><A HREF="id129.htm" TARGET="_top" TITLE="Overlap Images">Overlap Images</A><FONT SIZE="2" COLOR="#000000" FACE="Symbol" >   ·   </FONT><A HREF="id128.htm" TARGET="_top" TITLE="Create a Watermark">Create a Watermark</A><FONT SIZE="2" COLOR="#000000" FACE="Symbol" >   ·   </FONT><A HREF="id35.htm" TARGET="_top" TITLE="Gif Png Transparency">Gif Png Transparency</A><FONT SIZE="2" COLOR="#000000" FACE="Symbol" >   ·   </FONT><A HREF="id138.htm" TARGET="_top" TITLE="ButtonsImage Links">Buttons-Image Links</A><FONT SIZE="2" COLOR="#000000" FACE="Symbol" >   ·   </FONT><A HREF="id136.htm" TARGET="_top" TITLE="Image Names">Image Names</A><FONT SIZE="2" COLOR="#000000" FACE="Symbol" >   ·   </FONT><A HREF="id139.htm" TARGET="_top" TITLE="Image Theft">Image Theft</A><FONT SIZE="2" COLOR="#000000" FACE="Symbol" >   ·   </FONT><A HREF="id33.htm" TARGET="_top" TITLE="Lake Applet">Lake Applet</A><FONT SIZE="2" COLOR="#000000" FACE="Symbol" >   ·   </FONT><A HREF="id109.htm" TARGET="_top" TITLE="Other applets">Other applets</A><FONT SIZE="2" COLOR="#000000" FACE="Symbol" >   ·   </FONT><A HREF="id94.htm" TARGET="_top" TITLE="Slideshow1">Slideshow1</A><FONT SIZE="2" COLOR="#000000" FACE="Symbol" >   ·   </FONT><A HREF="id127.htm" TARGET="_top" TITLE="Slideshow2">Slideshow2</A><FONT SIZE="2" COLOR="#000000" FACE="Symbol" >   ·   </FONT><A HREF="id144.htm" TARGET="_top" TITLE="Slideshow3">Slideshow3</A><FONT SIZE="2" COLOR="#000000" FACE="Symbol" >   ·   </FONT><A HREF="id88.htm" TARGET="_top" TITLE="Galleries">Galleries</A><FONT SIZE="2" COLOR="#000000" FACE="Symbol" >   ·   </FONT><A HREF="id141.htm" TARGET="_top" TITLE="DD Thumbnail Viewer">DD Thumbnail Viewer</A><FONT SIZE="2" COLOR="#000000" FACE="Symbol" >   ·   </FONT><B>image map</B><FONT SIZE="2" COLOR="#000000" FACE="Symbol" >   ·   </FONT><A HREF="id113.htm" TARGET="_top" TITLE="xara thumbnail">xara thumbnail</A><FONT SIZE="2" COLOR="#000000" FACE="Symbol" >   ·   </FONT><A HREF="id114.htm" TARGET="_top" TITLE="Random Image">Random Image</A><FONT SIZE="2" COLOR="#000000" FACE="Symbol" >   ·   </FONT><A HREF="id131.htm" TARGET="_top" TITLE="LOGO BRANDING">LOGO BRANDING</A><FONT SIZE="2" COLOR="#000000" FACE="Symbol" >   ·   </FONT><A HREF="id126.htm" TARGET="_top" TITLE="Animated Image">Animated Image</A><FONT SIZE="2" COLOR="#000000" FACE="Symbol" >   ·   </FONT><A HREF="id132.htm" TARGET="_top" TITLE="photo with sound">photo with sound</A></div> <bR> <bR> <div> <B>SAMPLE Mouseover the map.  </B></div> <div> <B>All hotspots have rollover image that hightlights the number.</B></div> <div> (if clicked, the hotspot will open a new window to my home page)</div> <bR> <bR> <div> <TABLE BORDER="2" CELLPADDING="2" CELLSPACING="1" WIDTH="594" BORDERCOLORLIGHT="#C0C0C0" BORDERCOLORDARK="#808080" FRAME="BOX" RULES="ALL" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=TOP BGCOLOR=#FFFBF0 HEIGHT= 26 WIDTH="582"><div>  <TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="590" HEIGHT="444"> <TR> <TD ROWSPAN="1" COLSPAN="17" WIDTH="590" HEIGHT="81"> <IMG NAME="triangle400" SRC="HTMLobj-1352/triangle40_1x1.gif" WIDTH="590" HEIGHT="81" BORDER="0"></TD> <TD WIDTH="1" HEIGHT="81"> <IMG NAME="blank" SRC="HTMLobj-1352/blank.gif" WIDTH="1" HEIGHT="81" BORDER="0"></TD> </TR> <TR> <TD ROWSPAN="6" COLSPAN="1" WIDTH="49" HEIGHT="108"> <IMG NAME="triangle401" SRC="HTMLobj-1352/triangle40_2x1.gif" WIDTH="49" HEIGHT="108" BORDER="0"></TD> <TD ROWSPAN="3" COLSPAN="2" WIDTH="37" HEIGHT="53"> <A HREF="http://www.samisite.com" TARGET="_blank" onfocus="this.blur()" onMouseOver="if(document.images) document.triangle402.src='HTMLobj-1352/triangle40_2x2_1.gif';" onMouseOut="if(document.images) document.triangle402.src='HTMLobj-1352/triangle40_2x2.gif';" ><IMG NAME="triangle402" SRC="HTMLobj-1352/triangle40_2x2.gif" WIDTH="37" HEIGHT="53" BORDER="0" ALT="Section 1"></A></TD> <TD ROWSPAN="3" COLSPAN="1" WIDTH="19" HEIGHT="53"> <IMG NAME="triangle403" SRC="HTMLobj-1352/triangle40_2x3.gif" WIDTH="19" HEIGHT="53" BORDER="0"></TD> <TD ROWSPAN="3" COLSPAN="2" WIDTH="38" HEIGHT="53"> <A HREF="http://www.samisite.com" TARGET="_blank" onfocus="this.blur()" onMouseOver="if(document.images) document.triangle404.src='HTMLobj-1352/triangle40_2x4_2.gif';" onMouseOut="if(document.images) document.triangle404.src='HTMLobj-1352/triangle40_2x4.gif';" ><IMG NAME="triangle404" SRC="HTMLobj-1352/triangle40_2x4.gif" WIDTH="38" HEIGHT="53" BORDER="0" ALT="Section 2"></A></TD> <TD ROWSPAN="1" COLSPAN="1" WIDTH="31" HEIGHT="28"> <IMG NAME="triangle405" SRC="HTMLobj-1352/triangle40_2x5.gif" WIDTH="31" HEIGHT="28" BORDER="0"></TD> <TD ROWSPAN="2" COLSPAN="2" WIDTH="33" HEIGHT="48"> <IMG NAME="triangle406" SRC="HTMLobj-1352/triangle40_2x6.gif" WIDTH="33" HEIGHT="48" BORDER="0"></TD> <TD ROWSPAN="4" COLSPAN="1" WIDTH="36" HEIGHT="65"> <IMG NAME="triangle407" SRC="HTMLobj-1352/triangle40_2x7.gif" WIDTH="36" HEIGHT="65" BORDER="0"></TD> <TD ROWSPAN="6" COLSPAN="7" WIDTH="347" HEIGHT="108"> <IMG NAME="triangle408" SRC="HTMLobj-1352/triangle40_2x8.gif" WIDTH="347" HEIGHT="108" BORDER="0"></TD> <TD WIDTH="1" HEIGHT="28"> <IMG NAME="blank" SRC="HTMLobj-1352/blank.gif" WIDTH="1" HEIGHT="28" BORDER="0"></TD> </TR> <TR> <TD ROWSPAN="4" COLSPAN="1" WIDTH="31" HEIGHT="51"> <A HREF="http://www.samisite.com" TARGET="_blank" onfocus="this.blur()" onMouseOver="if(document.images) document.triangle409.src='HTMLobj-1352/triangle40_3x1_3.gif';" onMouseOut="if(document.images) document.triangle409.src='HTMLobj-1352/triangle40_3x1.gif';" ><IMG NAME="triangle409" SRC="HTMLobj-1352/triangle40_3x1.gif" WIDTH="31" HEIGHT="51" BORDER="0" ALT="Section 3"></A></TD> <TD WIDTH="1" HEIGHT="20"> <IMG NAME="blank" SRC="HTMLobj-1352/blank.gif" WIDTH="1" HEIGHT="20" BORDER="0"></TD> </TR> <TR> <TD ROWSPAN="4" COLSPAN="2" WIDTH="33" HEIGHT="60"> <A HREF="http://www.samisite.com" TARGET="_blank" onfocus="this.blur()" onMouseOver="if(document.images) document.triangle4010.src='HTMLobj-1352/triangle40_4x1_4.gif';" onMouseOut="if(document.images) document.triangle4010.src='HTMLobj-1352/triangle40_4x1.gif';" ><IMG NAME="triangle4010" SRC="HTMLobj-1352/triangle40_4x1.gif" WIDTH="33" HEIGHT="60" BORDER="0" ALT="Section 4"></A></TD> <TD WIDTH="1" HEIGHT="5"> <IMG NAME="blank" SRC="HTMLobj-1352/blank.gif" WIDTH="1" HEIGHT="5" BORDER="0"></TD> </TR> <TR> <TD ROWSPAN="3" COLSPAN="3" WIDTH="56" HEIGHT="55"> <IMG NAME="triangle4011" SRC="HTMLobj-1352/triangle40_5x1.gif" WIDTH="56" HEIGHT="55" BORDER="0"></TD> <TD ROWSPAN="3" COLSPAN="2" WIDTH="38" HEIGHT="55"> <IMG NAME="triangle4012" SRC="HTMLobj-1352/triangle40_5x2.gif" WIDTH="38" HEIGHT="55" BORDER="0"></TD> <TD WIDTH="1" HEIGHT="12"> <IMG NAME="blank" SRC="HTMLobj-1352/blank.gif" WIDTH="1" HEIGHT="12" BORDER="0"></TD> </TR> <TR> <TD ROWSPAN="2" COLSPAN="1" WIDTH="36" HEIGHT="43"> <A HREF="http://www.samisite.com" TARGET="_blank" onfocus="this.blur()" onMouseOver="if(document.images) document.triangle4013.src='HTMLobj-1352/triangle40_6x1_5.gif';" onMouseOut="if(document.images) document.triangle4013.src='HTMLobj-1352/triangle40_6x1.gif';" ><IMG NAME="triangle4013" SRC="HTMLobj-1352/triangle40_6x1.gif" WIDTH="36" HEIGHT="43" BORDER="0" ALT="Section 5"></A></TD> <TD WIDTH="1" HEIGHT="14"> <IMG NAME="blank" SRC="HTMLobj-1352/blank.gif" WIDTH="1" HEIGHT="14" BORDER="0"></TD> </TR> <TR> <TD ROWSPAN="1" COLSPAN="1" WIDTH="31" HEIGHT="29"> <IMG NAME="triangle4014" SRC="HTMLobj-1352/triangle40_7x1.gif" WIDTH="31" HEIGHT="29" BORDER="0"></TD> <TD WIDTH="1" HEIGHT="29"> <IMG NAME="blank" SRC="HTMLobj-1352/blank.gif" WIDTH="1" HEIGHT="29" BORDER="0"></TD> </TR> <TR> <TD ROWSPAN="1" COLSPAN="5" WIDTH="135" HEIGHT="53"> <IMG NAME="triangle4015" SRC="HTMLobj-1352/triangle40_8x1.gif" WIDTH="135" HEIGHT="53" BORDER="0"></TD> <TD ROWSPAN="1" COLSPAN="6" WIDTH="136" HEIGHT="53"> <IMG NAME="triangle4016" SRC="HTMLobj-1352/triangle40_8x2.gif" WIDTH="136" HEIGHT="53" BORDER="0"></TD> <TD ROWSPAN="1" COLSPAN="1" WIDTH="54" HEIGHT="53"> <A HREF="http://www.samisite.com" TARGET="_blank" onfocus="this.blur()" onMouseOver="if(document.images) document.triangle4017.src='HTMLobj-1352/triangle40_8x3_6.gif';" onMouseOut="if(document.images) document.triangle4017.src='HTMLobj-1352/triangle40_8x3.gif';" ><IMG NAME="triangle4017" SRC="HTMLobj-1352/triangle40_8x3.gif" WIDTH="54" HEIGHT="53" BORDER="0" ALT="Section 6"></A></TD> <TD ROWSPAN="2" COLSPAN="5" WIDTH="265" HEIGHT="90"> <IMG NAME="triangle4018" SRC="HTMLobj-1352/triangle40_8x4.gif" WIDTH="265" HEIGHT="90" BORDER="0"></TD> <TD WIDTH="1" HEIGHT="53"> <IMG NAME="blank" SRC="HTMLobj-1352/blank.gif" WIDTH="1" HEIGHT="53" BORDER="0"></TD> </TR> <TR> <TD ROWSPAN="2" COLSPAN="2" WIDTH="74" HEIGHT="53"> <IMG NAME="triangle4019" SRC="HTMLobj-1352/triangle40_9x1.gif" WIDTH="74" HEIGHT="53" BORDER="0"></TD> <TD ROWSPAN="2" COLSPAN="3" WIDTH="61" HEIGHT="53"> <A HREF="http://www.samisite.com" TARGET="_blank" onfocus="this.blur()" onMouseOver="if(document.images) document.triangle4020.src='HTMLobj-1352/triangle40_9x2_7.gif';" onMouseOut="if(document.images) document.triangle4020.src='HTMLobj-1352/triangle40_9x2.gif';" ><IMG NAME="triangle4020" SRC="HTMLobj-1352/triangle40_9x2.gif" WIDTH="61" HEIGHT="53" BORDER="0" ALT="Section 7"></A></TD> <TD ROWSPAN="4" COLSPAN="6" WIDTH="136" HEIGHT="128"> <IMG NAME="triangle4021" SRC="HTMLobj-1352/triangle40_9x3.gif" WIDTH="136" HEIGHT="128" BORDER="0"></TD> <TD ROWSPAN="1" COLSPAN="1" WIDTH="54" HEIGHT="37"> <IMG NAME="triangle4022" SRC="HTMLobj-1352/triangle40_9x4.gif" WIDTH="54" HEIGHT="37" BORDER="0"></TD> <TD WIDTH="1" HEIGHT="37"> <IMG NAME="blank" SRC="HTMLobj-1352/blank.gif" WIDTH="1" HEIGHT="37" BORDER="0"></TD> </TR> <TR> <TD ROWSPAN="2" COLSPAN="3" WIDTH="122" HEIGHT="52"> <IMG NAME="triangle4023" SRC="HTMLobj-1352/triangle40_10x1.gif" WIDTH="122" HEIGHT="52" BORDER="0"></TD> <TD ROWSPAN="2" COLSPAN="2" WIDTH="50" HEIGHT="52"> <A HREF="http://www.samisite.com" TARGET="_blank" onfocus="this.blur()" onMouseOver="if(document.images) document.triangle4024.src='HTMLobj-1352/triangle40_10x2_8.gif';" onMouseOut="if(document.images) document.triangle4024.src='HTMLobj-1352/triangle40_10x2.gif';" ><IMG NAME="triangle4024" SRC="HTMLobj-1352/triangle40_10x2.gif" WIDTH="50" HEIGHT="52" BORDER="0" ALT="Section 8"></A></TD> <TD ROWSPAN="2" COLSPAN="1" WIDTH="147" HEIGHT="52"> <IMG NAME="triangle4025" SRC="HTMLobj-1352/triangle40_10x3.gif" WIDTH="147" HEIGHT="52" BORDER="0"></TD> <TD WIDTH="1" HEIGHT="16"> <IMG NAME="blank" SRC="HTMLobj-1352/blank.gif" WIDTH="1" HEIGHT="16" BORDER="0"></TD> </TR> <TR> <TD ROWSPAN="2" COLSPAN="5" WIDTH="135" HEIGHT="75"> <IMG NAME="triangle4026" SRC="HTMLobj-1352/triangle40_11x1.gif" WIDTH="135" HEIGHT="75" BORDER="0"></TD> <TD WIDTH="1" HEIGHT="36"> <IMG NAME="blank" SRC="HTMLobj-1352/blank.gif" WIDTH="1" HEIGHT="36" BORDER="0"></TD> </TR> <TR> <TD ROWSPAN="1" COLSPAN="6" WIDTH="319" HEIGHT="39"> <IMG NAME="triangle4027" SRC="HTMLobj-1352/triangle40_12x1.gif" WIDTH="319" HEIGHT="39" BORDER="0"></TD> <TD WIDTH="1" HEIGHT="39"> <IMG NAME="blank" SRC="HTMLobj-1352/blank.gif" WIDTH="1" HEIGHT="39" BORDER="0"></TD> </TR> <TR> <TD ROWSPAN="1" COLSPAN="2" WIDTH="74" HEIGHT="52"> <IMG NAME="triangle4028" SRC="HTMLobj-1352/triangle40_13x1.gif" WIDTH="74" HEIGHT="52" BORDER="0"></TD> <TD ROWSPAN="1" COLSPAN="3" WIDTH="61" HEIGHT="52"> <A HREF="http://www.samisite.com" TARGET="_blank" onfocus="this.blur()" onMouseOver="if(document.images) document.triangle4029.src='HTMLobj-1352/triangle40_13x2_9.gif';" onMouseOut="if(document.images) document.triangle4029.src='HTMLobj-1352/triangle40_13x2.gif';" ><IMG NAME="triangle4029" SRC="HTMLobj-1352/triangle40_13x2.gif" WIDTH="61" HEIGHT="52" BORDER="0" ALT="Section 9"></A></TD> <TD ROWSPAN="1" COLSPAN="3" WIDTH="60" HEIGHT="52"> <IMG NAME="triangle4030" SRC="HTMLobj-1352/triangle40_13x3.gif" WIDTH="60" HEIGHT="52" BORDER="0"></TD> <TD ROWSPAN="1" COLSPAN="2" WIDTH="48" HEIGHT="52"> <A HREF="http://www.samisite.com" TARGET="_blank" onfocus="this.blur()" onMouseOver="if(document.images) document.triangle4031.src='HTMLobj-1352/triangle40_13x4_11.gif';" onMouseOut="if(document.images) document.triangle4031.src='HTMLobj-1352/triangle40_13x4.gif';" ><IMG NAME="triangle4031" SRC="HTMLobj-1352/triangle40_13x4.gif" WIDTH="48" HEIGHT="52" BORDER="0" ALT="Section 11"></A></TD> <TD ROWSPAN="1" COLSPAN="3" WIDTH="100" HEIGHT="52"> <IMG NAME="triangle4032" SRC="HTMLobj-1352/triangle40_13x5.gif" WIDTH="100" HEIGHT="52" BORDER="0"></TD> <TD ROWSPAN="1" COLSPAN="2" WIDTH="64" HEIGHT="52"> <A HREF="http://www.samisite.com" TARGET="_blank" onfocus="this.blur()" onMouseOver="if(document.images) document.triangle4033.src='HTMLobj-1352/triangle40_13x6_10.gif';" onMouseOut="if(document.images) document.triangle4033.src='HTMLobj-1352/triangle40_13x6.gif';" ><IMG NAME="triangle4033" SRC="HTMLobj-1352/triangle40_13x6.gif" WIDTH="64" HEIGHT="52" BORDER="0" ALT="Section 10"></A></TD> <TD ROWSPAN="1" COLSPAN="2" WIDTH="183" HEIGHT="52"> <IMG NAME="triangle4034" SRC="HTMLobj-1352/triangle40_13x7.gif" WIDTH="183" HEIGHT="52" BORDER="0"></TD> <TD WIDTH="1" HEIGHT="52"> <IMG NAME="blank" SRC="HTMLobj-1352/blank.gif" WIDTH="1" HEIGHT="52" BORDER="0"></TD> </TR> <TR> <TD ROWSPAN="1" COLSPAN="17" WIDTH="590" HEIGHT="22"> <IMG NAME="triangle4035" SRC="HTMLobj-1352/triangle40_14x1.gif" WIDTH="590" HEIGHT="22" BORDER="0"></TD> <TD WIDTH="1" HEIGHT="22"> <IMG NAME="blank" SRC="HTMLobj-1352/blank.gif" WIDTH="1" HEIGHT="22" BORDER="0"></TD> </TR> <TR> <TD WIDTH="49" HEIGHT="1"> <IMG NAME="blank" SRC="HTMLobj-1352/blank.gif" WIDTH="49" HEIGHT="1" BORDER="0"></TD> <TD WIDTH="25" HEIGHT="1"> <IMG NAME="blank" SRC="HTMLobj-1352/blank.gif" WIDTH="25" HEIGHT="1" BORDER="0"></TD> <TD WIDTH="12" HEIGHT="1"> <IMG NAME="blank" SRC="HTMLobj-1352/blank.gif" WIDTH="12" HEIGHT="1" BORDER="0"></TD> <TD WIDTH="19" HEIGHT="1"> <IMG NAME="blank" SRC="HTMLobj-1352/blank.gif" WIDTH="19" HEIGHT="1" BORDER="0"></TD> <TD WIDTH="30" HEIGHT="1"> <IMG NAME="blank" SRC="HTMLobj-1352/blank.gif" WIDTH="30" HEIGHT="1" BORDER="0"></TD> <TD WIDTH="8" HEIGHT="1"> <IMG NAME="blank" SRC="HTMLobj-1352/blank.gif" WIDTH="8" HEIGHT="1" BORDER="0"></TD> <TD WIDTH="31" HEIGHT="1"> <IMG NAME="blank" SRC="HTMLobj-1352/blank.gif" WIDTH="31" HEIGHT="1" BORDER="0"></TD> <TD WIDTH="21" HEIGHT="1"> <IMG NAME="blank" SRC="HTMLobj-1352/blank.gif" WIDTH="21" HEIGHT="1" BORDER="0"></TD> <TD WIDTH="12" HEIGHT="1"> <IMG NAME="blank" SRC="HTMLobj-1352/blank.gif" WIDTH="12" HEIGHT="1" BORDER="0"></TD> <TD WIDTH="36" HEIGHT="1"> <IMG NAME="blank" SRC="HTMLobj-1352/blank.gif" WIDTH="36" HEIGHT="1" BORDER="0"></TD> <TD WIDTH="28" HEIGHT="1"> <IMG NAME="blank" SRC="HTMLobj-1352/blank.gif" WIDTH="28" HEIGHT="1" BORDER="0"></TD> <TD WIDTH="54" HEIGHT="1"> <IMG NAME="blank" SRC="HTMLobj-1352/blank.gif" WIDTH="54" HEIGHT="1" BORDER="0"></TD> <TD WIDTH="18" HEIGHT="1"> <IMG NAME="blank" SRC="HTMLobj-1352/blank.gif" WIDTH="18" HEIGHT="1" BORDER="0"></TD> <TD WIDTH="50" HEIGHT="1"> <IMG NAME="blank" SRC="HTMLobj-1352/blank.gif" WIDTH="50" HEIGHT="1" BORDER="0"></TD> <TD WIDTH="14" HEIGHT="1"> <IMG NAME="blank" SRC="HTMLobj-1352/blank.gif" WIDTH="14" HEIGHT="1" BORDER="0"></TD> <TD WIDTH="36" HEIGHT="1"> <IMG NAME="blank" SRC="HTMLobj-1352/blank.gif" WIDTH="36" HEIGHT="1" BORDER="0"></TD> <TD WIDTH="147" HEIGHT="1"> <IMG NAME="blank" SRC="HTMLobj-1352/blank.gif" WIDTH="147" HEIGHT="1" BORDER="0"></TD> </TR> </TABLE>  </div> </tD> </tR> </TABLE></div> <bR> <bR> <bR> <bR> <bR> <div> <A HREF="mapinstruct.htm" TARGET="_top" TITLE="instructions"><B>instructions for implementing an image map in CSB-Trellix</B></A></div> <bR> <bR> <bR> <div> <B><IMG BORDER="0" SRC="Symb075c00b700f000000000.png" HEIGHT="16" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">The map above was made with </B><FONT SIZE="3" COLOR="#6600CC" FACE="Arial" ><B>Paint Shop Pro</B></FONT><B>, with image slicing and rollover images.  </B>Several programs offer this option.</div> <bR> <bR> <div> <B><IMG BORDER="0" SRC="Symb075c00b700f000000000.png" HEIGHT="16" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">Need an image map and don't want to make one yourself?  </B><A HREF="http://www.samisite.com/contact.htm" TARGET="_top" TITLE="http://www.samisite.com/contact.htm"><B>Contact me</B></A><B> to have one made for a reasonable fee.  </B></div> <bR> <div> <B><IMG BORDER="0" SRC="Symb075c00b700f000000000.png" HEIGHT="16" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">The image map above was made by Sami for the site noted and posted on samisite.com website with permission.</B></div> <bR> <div> <B><IMG BORDER="0" SRC="Symb075c00b700f000000000.png" HEIGHT="16" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">Want to make one yourself, and need a quick image map with only a couple hotspots and no extra features?</B></div> <bR> <div> <B>One freeware program called </B><FONT SIZE="3" COLOR="#6600CC" FACE="Arial" ><B>HANDY IMAGE MAPPER</B></FONT><FONT SIZE="3" COLOR="#000000" FACE="Arial" ><B>:   was quite useful. It is discontinued but can be found on shareware sites.</B></FONT></div> <bR> <div> Using Handy Imagemapper is great for small light-weight projects (just a couple hotspots that are active) that do not take long to put together or have fancy options. </div> <bR> <div> The best way to use it: First, upload the photo you want to use to your website using FTP software so it is in the final spot before you begin mapping it. If you don't do that, Handy Mapper will try to always link to a photo on your computer (c: drive instead of a place on the web!). </div> <bR> <div> Then open Handy Mapper. </div> <div> Open the image file (type in the URL address of the photo you uploaded). </div> <div> Draw a box, circle, etc. </div> <div> Type in what you want to see in the floating tooltip when you hover over the "hotspot". </div> <div> Type in the link address where you want that "hotspot" to take the visitor. </div> <div> Repeat for each "hotspot" on the map. </div> <div> Then click Place on clipboard. </div> <div> Then open NOTEPAD on your computer. </div> <div> Choose Paste (Ctrl V) to see the HTML code that is generated by the Handy Mapper program. You can then SAVE AS the Notepad docuement for future reference. </div> <bR> <div> You could also immediately open your CSB file and INSERT > HTML and PASTE the clipboard contents into the Insert HTML. </div> <bR> </td> </tr></table></body>