Gif Png Transparency

<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="id128.htm" TARGET="_top" TITLE="Create a Watermark"><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="id138.htm" TARGET="_top" TITLE="ButtonsImage Links"><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><B>Gif Png Transparency</B><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>Insert a gif (or png) image with transparency</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> <TABLE BORDER="0" CELLPADDING="2" CELLSPACING="1" WIDTH="739" BORDERCOLORLIGHT="#C0C0C0" BORDERCOLORDARK="#808080" FRAME="BOX" RULES="ALL" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=TOP HEIGHT= 71 ><NOBR><div> <B>Step 1.</B></div> </NOBR></tD> <tD VALIGN=TOP COLSPAN=2 WIDTH="672"><div> <B>In order for an image to appear on the web as "floating", it must have a transparent background before it is loaded into your webpage!  </B>Choose a .gif image. If the image does not already have a transparent background, you must use a photo editor to identify or create a  the transparent background.  </div> <div> (Example photo editing programs:  Photoshop, Paint Shop Pro, Photosuite, etc)</div> </tD> </tR> <tR> <tD VALIGN=TOP HEIGHT= 59 ><NOBR><div> <B>Step 2.</B></div> </NOBR></tD> <tD VALIGN=TOP COLSPAN=2><NOBR><div> If the image has a transparent background, you can skip this explanation and go to step 3.</div> <div> When creating  a transparent background there are a few simple rules that should be considered:</div> <bR> </NOBR></tD> </tR> <tR> <tD VALIGN=TOP HEIGHT= 117 WIDTH="54"><IMG BORDER="0" SRC="1x1.gif" HEIGHT="117" ALIGN="bottom" WIDTH="54" HSPACE="0" VSPACE="0"></tD> <tD VALIGN=TOP WIDTH="531"><div> <IMG BORDER="0" SRC="Symb075c00b700dc00000000.png" HEIGHT="15" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">The photo program and web browser will only allow one color as transparent.  If the background has shades of the color, only one tone of that color will go transparent</div> <div> <I>Yellow was chosen as transparency color here, but there were several shades of yellow so the </I><I>background did not fade out on the webpage!</I></div> </tD> <tD VALIGN=TOP WIDTH="138"><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="0ab4a490.png" border=0 width="74" height="73" ALT="spaz with not enough transparent" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></div> </NOBR></tD> </tR> </TABLE></div> <bR> </tD> </tR> <tR> <tD VALIGN=TOP HEIGHT= 117 WIDTH="54"><IMG BORDER="0" SRC="1x1.gif" HEIGHT="117" ALIGN="bottom" WIDTH="54" HSPACE="0" VSPACE="0"></tD> <tD VALIGN=TOP WIDTH="531"><div> <IMG BORDER="0" SRC="Symb075c00b700dc00000000.png" HEIGHT="15" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">Choose a unique color that does not match any color the image unless you are purposely trying to eliminate that color from the image. </div> <div> <I>Black was  chosen as transparency color here, but there was black used in the cat so too much faded out on the webpage!</I></div> <bR> </tD> <tD VALIGN=TOP WIDTH="138"><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="0aa4a490.png" border=0 width="74" height="73" ALT="spaz with too much transparent" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></div> </NOBR></tD> </tR> </TABLE></div> <bR> </tD> </tR> <tR> <tD VALIGN=TOP HEIGHT= 117 WIDTH="54"><IMG BORDER="0" SRC="1x1.gif" HEIGHT="117" ALIGN="bottom" WIDTH="54" HSPACE="0" VSPACE="0"></tD> <tD VALIGN=TOP><NOBR><div> <IMG BORDER="0" SRC="Symb075c00b700dc00000000.png" HEIGHT="15" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">For best compatibility, make the transparent color simple: </div> <div> <I>White, Black Yellow, Blue, Green, Red</I></div> <div> Use the paintbrush to color the background in a single color</div> </NOBR></tD> <tD VALIGN=TOP WIDTH="138"><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="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> </tD> </tR> <tR> <tD VALIGN=TOP HEIGHT= 55 WIDTH="54"><IMG BORDER="0" SRC="1x1.gif" HEIGHT="55" ALIGN="bottom" WIDTH="54" HSPACE="0" VSPACE="0"></tD> <tD VALIGN=TOP COLSPAN=2 WIDTH="672"><div> <B><IMG BORDER="0" SRC="Symb075c00b700dc00000000.png" HEIGHT="15" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">You must define the transparent color in your photo program and save the file.  </B>Though the process is essentially the same, each program has it's own way of doing it.   </div> <div> Check your HELP file in your photo editor for specifics.</div> </tD> </tR> <tR> <tD VALIGN=TOP HEIGHT= 708 WIDTH="54"><IMG BORDER="0" SRC="1x1.gif" HEIGHT="708" ALIGN="bottom" WIDTH="54" HSPACE="0" VSPACE="0"></tD> <tD VALIGN=TOP COLSPAN=2><NOBR><div> <I><IMG BORDER="0" SRC="Symb075c00b700dc00000000.png" HEIGHT="15" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">Two Samples :</I></div> <bR> <DIV ALIGN="LEFT"></DIV> <div> <TABLE BORDER="1" CELLPADDING="2" CELLSPACING="1" WIDTH="627" BORDERCOLORLIGHT="#808080" BORDERCOLORDARK="#808080" FRAME="BOX" RULES="ROWS" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=TOP HEIGHT= 239 WIDTH="182"><div> <B> </B></div> <bR> <div> <B>(A) </B>In <I>Paint Shop Pro </I>(PSP), from the Color menu, select to 'Set the Transparency' then define the color Image </div> </tD> <tD VALIGN=TOP><NOBR><div> <IMG SRC="6378fdd0.jpg" border=0 width="399" height="221" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></div> </NOBR></tD> </tR> <tR> <tD VALIGN=TOP HEIGHT= 391 WIDTH="182"><bR> <bR> <div> <B>(B)  </B>In a version of <I>PhotoShop</I>, Select File>export to GIF89a then define the color Image </div> </tD> <tD VALIGN=TOP><NOBR><div> <IMG SRC="0b177810.jpg" border=0 width="375" height="385" ALT="Photoshop choose a transparency color" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></div> </NOBR></tD> </tR> </TABLE></div> <bR> </NOBR></tD> </tR> <tR> <tD VALIGN=TOP HEIGHT= 120 WIDTH="54"><IMG BORDER="0" SRC="1x1.gif" HEIGHT="120" ALIGN="bottom" WIDTH="54" HSPACE="0" VSPACE="0"></tD> <tD VALIGN=TOP WIDTH="531"><div> <IMG BORDER="0" SRC="Symb075c00b700dc00000000.png" HEIGHT="15" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">The background often changes  to signify transparency.  In Paint Shop Pro, from the Color menu, choose 'View Pallet Transparency'.  This "blocked background" is used by Paint Shop Pro for transparent images.  </div> <div> Save your image in the transparent mode!</div> </tD> <tD VALIGN=TOP WIDTH="138"><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= 82 ><NOBR><div> <IMG SRC="0b04b4c0.png" border=0 width="75" height="76" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></div> </NOBR></tD> </tR> </TABLE></div> <bR> </tD> </tR> <tR> <tD VALIGN=TOP HEIGHT= 115 ><NOBR><div> <B>Step 3.</B></div> </NOBR></tD> <tD VALIGN=TOP COLSPAN=2 WIDTH="672"><div> <B><IMG BORDER="0" SRC="Symb075c00b700dc00000000.png" HEIGHT="15" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">Insert your image into CSB/Trellix webpage. </B></div> <div> <B><IMG BORDER="0" SRC="Symb075c00b700dc00000000.png" HEIGHT="15" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">If you have CSB4, and just put the image into the file, you are already done because there is no Transparency tab for newly inserted images.</B></div> <div> <B><IMG BORDER="0" SRC="Symb075c00b700dc00000000.png" HEIGHT="15" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">If you have </B><B>Trellix, </B><B>CSB3 or CSB4 with an image inserted before file conversion, continue:</B></div> <bR> <div> Right click the image for menu, Choose Properties>Image.</div> </tD> </tR> <tR> <tD VALIGN=TOP HEIGHT= 394 WIDTH="54"><IMG BORDER="0" SRC="1x1.gif" HEIGHT="394" ALIGN="bottom" WIDTH="54" HSPACE="0" VSPACE="0"></tD> <tD VALIGN=TOP COLSPAN=2><NOBR><div> <IMG BORDER="0" SRC="Symb075c00b700dc00000000.png" HEIGHT="15" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">On the Transparency tab, again choose the color you designated as transparent</div> <bR> <bR> <DIV ALIGN="LEFT"></DIV> <div> <TABLE BORDER="1" CELLPADDING="2" CELLSPACING="1" WIDTH="627" BORDERCOLORLIGHT="#808080" BORDERCOLORDARK="#808080" FRAME="BOX" RULES="ROWS" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=TOP HEIGHT= 278 WIDTH="182"><div> <B> </B></div> <div> <B>This check box is only functional on images already set to transparent before inserting into CSB3/Trellix.  </B></div> <bR> <div> <B>Consider it a toggle switch solid/transparent.</B></div> <bR> </tD> <tD VALIGN=TOP><NOBR><div> <IMG SRC="0b390100.jpg" border=0 width="400" height="272" ALT="Trellix and CSB transparency setting" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></div> </NOBR></tD> </tR> </TABLE></div> <div> <B>The same image of the cat is used in the solid and transparent samples below!</B></div> <div> <B>  </B></div> </NOBR></tD> </tR> <tR> <tD VALIGN=TOP HEIGHT= 117 WIDTH="54"><IMG BORDER="0" SRC="1x1.gif" HEIGHT="117" ALIGN="bottom" WIDTH="54" HSPACE="0" VSPACE="0"></tD> <tD VALIGN=TOP WIDTH="531"><div> <B><IMG BORDER="0" SRC="Symb075c00b700dc00000000.png" HEIGHT="15" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">SOLID:</B>  If the check box is left <B>unchecked</B>, the background of the image will show your background color, even though you defined the image in your photo program as transparent!</div> </tD> <tD VALIGN=TOP WIDTH="138"><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="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> </tD> </tR> <tR> <tD VALIGN=TOP HEIGHT= 117 WIDTH="54"><IMG BORDER="0" SRC="1x1.gif" HEIGHT="117" ALIGN="bottom" WIDTH="54" HSPACE="0" VSPACE="0"></tD> <tD VALIGN=TOP WIDTH="531"><div> <B><IMG BORDER="0" SRC="Symb075c00b700dc00000000.png" HEIGHT="15" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">TRANSPARENT:</B>  If the check box is <B>checked</B>, the background of the image will be transparent when you publish!</div> </tD> <tD VALIGN=TOP WIDTH="138"><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> </tR> </TABLE></B></div> <bR> <bR> <bR> <bR> </td> </tr></table></body>