Buttons-Image Links

<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="id35.htm" TARGET="_top" TITLE="Gif Png Transparency"><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="id136.htm" TARGET="_top" TITLE="Image Names"><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><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><B>Buttons-Image Links</B><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>Buttons-Image links</B></div> <div> <B> <style> .highlighttext{ background-color:yellow; font-weight:bold; color: #6600CC; } </style> <script language="Javascript">  </script>  </B></div> <div> <B>Make your own buttons for your website.  Use an image for links.</B></div> <bR> <div> <TABLE BORDER="0" CELLPADDING="2" CELLSPACING="1" WIDTH="716" BORDERCOLORLIGHT="#C0C0C0" BORDERCOLORDARK="#808080" FRAME="VOID" RULES="NONE" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=CENTER HEIGHT= 224 ><NOBR><div> <IMG SRC="5af81c50.jpg" border=0 width="129" height="197" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></div> </NOBR></tD> <tD VALIGN=CENTER WIDTH="544"><div> <B>Start with an image of something that suits your site. </B></div> <bR> <bR> <div> I have used a lavender embroidered flower from <A HREF="http://stitched4you.com/" TARGET="_top" TITLE="http://stitched4you.com/">this site</A> that offers machine embroidery work at reasonable prices.  The site is also built with CSB and is growing so please visit to support other CSB users!</div> </tD> </tR> <tR> <tD VALIGN=CENTER COLSPAN=2 HEIGHT= 164 WIDTH="706"><bR> <div> Then tweak it by stretching, shrinking, beveling, adding text, etc to create images that represent your ideas.</div> <div> Any Photo program will do. The two I use most often for this work are Paint Shop Pro and Irfanview.</div> <bR> <div> Below are just a few of the things you can do with the lavender flower.  You could put text on the flower, around the flower, etc.  Let your imagination and your own site dictate how you create your link images.</div> <bR> </tD> </tR> <tR> <tD VALIGN=CENTER COLSPAN=2 HEIGHT= 289 ><NOBR><div> <TABLE BORDER="1" CELLPADDING="2" CELLSPACING="1" WIDTH="699" BORDERCOLORLIGHT="#C0C0C0" BORDERCOLORDARK="#808080" FRAME="BOX" RULES="NONE" HSPACE="0" VSPACE="0" BGCOLOR=#FFFFCC > <tR> <tD VALIGN=CENTER HEIGHT= 251 ><NOBR><div>  <A HREF="http://stitched4you.com/" TARGET="_top" TITLE="http://stitched4you.com/"><IMG SRC="5b592230.jpg" border=0 width="146" height="35" ALT="Stitched4You can make embroidered labels for your quilts." ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></A></div> <bR> <div> <A HREF="http://stitched4you.com/" TARGET="_top" TITLE="http://stitched4you.com/"><IMG SRC="5b692230.jpg" border=0 width="146" height="35" ALT="Stitched4You can make embroidered labels for your quilts." ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></A></div> <bR> <bR> <div> This one is a rollover:</div> <div>  <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> <A HREF="id138.htm" target="_top" ONMOUSEOVER="changeImages('Reload this page', 'HTMLobj-1465/buttonquiltlabelslonginset.jpg'); return true;" ONMOUSEOUT="changeImages('Reload this page', 'HTMLobj-1465/buttonquiltlabelslongbevel.jpg'); return true;" Target="_Parent"> <IMG NAME="Reload this page" SRC="HTMLobj-1465/buttonquiltlabelslongbevel.jpg" WIDTH=146 HEIGHT=35 BORDER=0></A>  </div> <div> the link reloads this page</div> <div> <I>(code available below)</I></div> </NOBR></tD> <tD VALIGN=CENTER><NOBR><div>       <A HREF="http://stitched4you.com/" TARGET="_top" TITLE="http://stitched4you.com/"><IMG SRC="5b45a4c0.jpg" border=0 width="90" height="76" ALT="Stitched4You can make embroidered labels for your quilts." ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></A>              <A HREF="http://stitched4you.com/" TARGET="_top" TITLE="http://stitched4you.com/"><IMG SRC="5b1816c0.jpg" border=0 width="129" height="108" ALT="Stitched4You can make embroidered labels for your quilts." ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></A>                <A HREF="http://stitched4you.com/" TARGET="_top" TITLE="http://stitched4you.com/"><IMG SRC="5b3816c0.jpg" border=0 width="129" height="108" ALT="Stitched4You can make embroidered labels for your quilts." ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></A></div> <bR> <bR> <div>                          <A HREF="http://stitched4you.com/" TARGET="_top" TITLE="http://stitched4you.com/"><IMG SRC="5b773580.jpg" border=0 width="115" height="88" ALT="Stitched4You can make embroidered labels for your quilts." ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></A>           <A HREF="http://stitched4you.com/" TARGET="_top" TITLE="http://stitched4you.com/"><IMG SRC="5b873580.jpg" border=0 width="115" height="88" ALT="Stitched4You can make embroidered labels for your quilts." ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></A></div> </NOBR></tD> </tR> </TABLE></div> <bR> </NOBR></tD> </tR> <tR> <tD VALIGN=CENTER COLSPAN=2 HEIGHT= 1216 WIDTH="706"><div> Use Insert > Picture > Image/Clipart  and choose your button images.</div> <bR> <div> Right click the image, properties, image to type in a description that hovers over the image on mouseover (more details on the image tooltip <A HREF="id136.htm" TARGET="_top" TITLE="Image Names">here</A>).</div> <bR> <div> Right click an image and choose to link to one of your pages either by SELECTION on the map or by URL style link.  The five button samples above have been linked to the home page of the site that embroidered the original design using the URL style link.</div> <bR> <div> All 7 buttons above are JPG images placed into a table with a background color to match, but they could have easily been made into GIF images with a transparent background to be placed on ANY color background. Take a look at <A HREF="id35.htm" TARGET="_top" TITLE="Gif Png Transparency">this page</A> for information on transparent gif images.</div> <bR> <bR> <div> <TABLE BORDER="2" CELLPADDING="2" CELLSPACING="1" WIDTH="595" BORDERCOLORLIGHT="#C0C0C0" BORDERCOLORDARK="#808080" FRAME="BOX" RULES="ALL" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=TOP HEIGHT= 894 WIDTH="583"><div> <B> </B><FONT SIZE="4" COLOR="#330099" FACE="Arial" ><B>ROLLOVER BUTTON CODE for sample above</B></FONT></div> <div> <B>To capture the code, 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="code1"> <a class="highlighttext" href="javascript:HighlightAll('code1.select1')">Select All</a><br> <textarea name="select1" rows=10 cols=65 > <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> <A HREF="id138.htm" target="_top" ONMOUSEOVER="changeImages('Reload this page', '^gEMDIR/buttonquiltlabelslonginset.jpg'); return true;" ONMOUSEOUT="changeImages('Reload this page', '^gEMDIR/buttonquiltlabelslongbevel.jpg'); return true;" Target="_Parent"> <IMG NAME="Reload this page" SRC="^gEMDIR/buttonquiltlabelslongbevel.jpg" WIDTH=146 HEIGHT=35 BORDER=0></A> </textarea> </form>  </B></div> <div> <B>I have made notes in code below and it will effect functionality!</B></div> <div> <B>Use the Select All choice above!</B><FONT SIZE="3" COLOR="#000000" FACE="Arial" > </FONT></div> <div> Change items marked in color in the code shown below.</div> <bR> <div> <FONT SIZE="3" COLOR="#000000" FACE="Arial" >The code below has been modified for use in CSB and Trellix.  (</FONT>If not using either of those programs, replace <FONT SIZE="2" COLOR="#330099" FACE="Arial" ><B>^GEMDIR/ </B></FONT>with the directory where your images will be stored.)</div> <bR> <bR> <div> <SCRIPT LANGUAGE="JavaScript">  </div> <div>   </div> <div>  </SCRIPT> </div> <div>  <A HREF="<FONT SIZE="1" COLOR="#CC9900" FACE="Arial" >id138.htm</FONT>" target="_top" ONMOUSEOVER="changeImages('<FONT SIZE="1" COLOR="#FF6600" FACE="Arial" >Reload this page</FONT>', '^GEMDIR/<FONT SIZE="1" COLOR="#3333FF" FACE="Arial" >buttonquiltlabelslonginset.jpg</FONT>'); return true;" ONMOUSEOUT="changeImages('<FONT SIZE="1" COLOR="#FF6600" FACE="Arial" >Reload this page</FONT>', '^GEMDIR/<FONT SIZE="1" COLOR="#660099" FACE="Arial" >buttonquiltlabelslongbevel.jpg</FONT>'); return true;" Target="_Parent"> </div> <div> <IMG NAME="<FONT SIZE="1" COLOR="#FF6600" FACE="Arial" >Reload this page</FONT>" SRC="^GEMDIR/<FONT SIZE="1" COLOR="#660099" FACE="Arial" >buttonquiltlabelslongbevel.jpg</FONT>" WIDTH=<FONT SIZE="1" COLOR="#BF00BF" FACE="Arial" >146</FONT> HEIGHT=<FONT SIZE="1" COLOR="#BF00BF" FACE="Arial" >35</FONT> BORDER=0></A> </div> </tD> </tR> </TABLE></div> <bR> </tD> </tR> </TABLE></div> <bR> </td> </tr></table></body>