instructions

<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> <IMG BORDER="0" SRC="1x1.gif" HEIGHT="14" ALIGN="BOTTOM" HSPACE="0" VSPACE="0" WIDTH="7"> <A HREF="imagemap.htm" TARGET="_top" TITLE="image map"> <IMG SRC="6410e0e0.png" border=0 width="14" height="14" ALT="up" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></A>  <IMG BORDER="0" SRC="1x1.gif" HEIGHT="14" ALIGN="BOTTOM" HSPACE="0" VSPACE="0" WIDTH="7"></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>                                                  </div> <div> <STYLE>  </STYLE><A HREF="imagemap.htm" TARGET="_top" TITLE="image map">back to the image map</A></div> <bR> <div> I placed the Insert> HTML into a table.  The table is 586 pixels wide as seen below:</div> <div> <IMG SRC="5475e320.png" border=0 width="606" height="50" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></div> <div> (my placeholder is the old webgem image instead of the really big thing provided by CSB.  You can change yours if you want to.  See <A HREF="http://www.samisite.com/test-csb2nf/id120.htm" TARGET="_blank" TITLE="http://www.samisite.com/test-csb2nf/id12">this page</A>)</div> <bR> <div> In this sample, the map images are TRANSPARENT so you can choose any background color of the table, but light colors look best.  I choose cream color #246 on the CSB color chart for this example.  This feature allows more flexiblity in the designing process.  You may not be able to do this with your map design.</div> <bR> <DIV ALIGN="LEFT"></DIV> <div> <TABLE BORDER="2" CELLPADDING="2" CELLSPACING="1" WIDTH="460" BORDERCOLORLIGHT="#C0C0C0" BORDERCOLORDARK="#808080" FRAME="VOID" RULES="ROWS" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=CENTER HEIGHT= 19 ><NOBR><div> Background color choices in table:   </div> </NOBR></tD> <tD VALIGN=TOP><NOBR><div> transparent </div> </NOBR></tD> <tD VALIGN=TOP BGCOLOR=#FFFFFF><NOBR><div> white/cream</div> </NOBR></tD> </tR> <tR> <tD VALIGN=CENTER HEIGHT= 59 ><NOBR><div> This is one slice of the image in plain</div> </NOBR></tD> <tD VALIGN=TOP WIDTH="85"><div> <IMG SRC="54525350.gif" border=0 width="37" height="53" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></div> </tD> <tD VALIGN=TOP BGCOLOR=#FFFFFF WIDTH="104"><div> <IMG SRC="54525350.gif" border=0 width="37" height="53" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></div> </tD> </tR> <tR> <tD VALIGN=CENTER HEIGHT= 59 WIDTH="255"><div> as mouseover:</div> </tD> <tD VALIGN=TOP WIDTH="85"><div> <IMG SRC="54625350.gif" border=0 width="37" height="53" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></div> </tD> <tD VALIGN=TOP BGCOLOR=#FFFBF0 WIDTH="104"><div> <IMG SRC="54625350.gif" border=0 width="37" height="53" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></div> </tD> </tR> </TABLE></div> <bR> <bR> <div> Copy the code genrated by your mapping software and place into NOTEPAD or an HTML editor.</div> <bR> <div> Modify the code, placing ^GEMDIR/ in front of every image that is noted.</div> <bR> <div> Save this file as a txt (text file) for future reference.</div> <bR> <div> Copy the modified code and place it into an INSERT > HTML.</div> <bR> <div> Do not put the txt file in, only the code that's in the txt file like seen below:</div> <div> <IMG SRC="54c4f370.png" border=0 width="335" height="311" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></div> <bR> <bR> <div> <B>Images:</B></div> <div> <TABLE BORDER="0" CELLPADDING="2" CELLSPACING="1" WIDTH="585" BORDERCOLORLIGHT="#C0C0C0" BORDERCOLORDARK="#808080" FRAME="VOID" RULES="NONE" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=TOP HEIGHT= 353 WIDTH="296"><div>  </div> <bR> <div> Put the images into the web components part of the inserted html.  Click add a file and one by one add each piece of the image to the list (seen here>>)</div> <bR> <div> When all the images have been loaded to the list click ok</div> <bR> <div> Then you can publish.</div> </tD> <tD VALIGN=TOP><NOBR><div> <IMG SRC="549105b0.png" border=0 width="272" height="347" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></div> </NOBR></tD> </tR> </TABLE></div> <bR> <bR> <div> <B>How to change your links later if you need to:</B></div> <bR> <div> Open your image map txt file with NOTEPAD</div> <div> Search, find, type in the word that is in your current link address (in this sample, I am using <B>samisite</B>)</div> <bR> <div> <B><IMG SRC="54a84b90.png" border=0 width="388" height="185" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></B></div> <bR> <bR> <div> <B>That will take you to a part of the code that contains a link to my site when you click.  There may be more than one of them in the code.  Here's the first one:</B></div> <div> <TABLE BORDER="2" CELLPADDING="2" CELLSPACING="1" WIDTH="568" BORDERCOLORLIGHT="#C0C0C0" BORDERCOLORDARK="#808080" FRAME="BOX" RULES="ALL" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=TOP BGCOLOR=#FFFFFF HEIGHT= 160 WIDTH="556"><div> <TD ROWSPAN="3" COLSPAN="2" WIDTH="37" HEIGHT="53"></div> <div>      <A HREF="<B>http://www.samisite.com</B>" TARGET="_blank" onfocus="this.blur()"  onMouseOver="if(document.images) document.triangle402.src='^GEMDIR/triangle40_2x2<FONT SIZE="3" COLOR="#6600FF" FACE="Arial" ><B>_1</B></FONT>.gif';" </div> <div>            onMouseOut="if(document.images) document.triangle402.src='^GEMDIR/triangle40_2x2.gif';" </div> <div>           ><IMG NAME="triangle402" SRC="^GEMDIR/triangle40_2x2.gif" WIDTH="37" HEIGHT="53" BORDER="0" ALT="Section 1"></A></TD></div> </tD> </tR> </TABLE></div> <bR> <div> The link (bolded black) would be changed by you to whatever page address you prefer.  </div> <bR> <div> You can tell which image you are linking by checking out the rollover image name.  2x2 is the plain image 2x2<FONT SIZE="3" COLOR="#6600FF" FACE="Arial" ><B>_1</B></FONT> is the SECTION 1 image with red, 13x6 is regular, 13x6<FONT SIZE="3" COLOR="#6600FF" FACE="Arial" ><B>_10</B></FONT><B> </B>is the SECTION 10 image with red, etc.</div> <bR> <div> Then put the modified code into your INSERT > HTML, replacing the original code.</div> <bR> </td> </tr></table></body>