photo with sound

<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="697" BORDERCOLORLIGHT="#C0C0C0" BORDERCOLORDARK="#808080" FRAME="VOID" RULES="NONE" ALIGN="LEFT" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=CENTER HEIGHT= 35 ><NOBR><div> <B>Sami's Site: CSB - Trellix Support and Tests</B></div> </NOBR></tD> <tD VALIGN=CENTER><NOBR><div> <FONT SIZE="3" COLOR="#000000" FACE="Arial" > </FONT><A HREF="id126.htm" TARGET="_top" TITLE="Animated Image"><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">  <IMG BORDER="0" SRC="1x1.gif" HEIGHT="14" ALIGN="BOTTOM" HSPACE="0" VSPACE="0" WIDTH="7"> <FONT SIZE="1" COLOR="#CCCC99" FACE="Arial" >   </FONT></div> </NOBR></tD> <tD VALIGN=CENTER><NOBR><div> <STYLE type=text/css>#rollbutton a { color: #C0DCC0; font-size:13px; font-weight: bold; text-decoration: none; border:2px outset light gray; background-color:#680098; display: block; width: 85px; height: 22px; padding: 0px;}#rollbutton a:hover { background-color: #C0DCC0; color:#680098; padding-left: 3px; border:2px inset light gray;}</STYLE><DIV id=rollbutton><DIV><A href="http://www.samisite.com" title="Go Back to Home Page" target="_top" onfocus="this.blur()"><center>HOME</center></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><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><B>photo with sound</B></div> <bR> <div> <B>Photo with sound</B><FONT SIZE="3" COLOR="#FFFFFF" FACE="Arial" > <style> .highlighttext{ background-color:yellow; font-weight:bold; color: #6600CC; } </style> <script language="Javascript">  </script>  </FONT><FONT SIZE="3" COLOR="#0000CC" FACE="Arial" > <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">  </FONT></div> <bR> <div> FLASH is terrific for this but we don't always have that option, or don't have time to work something up.</div> <div> With this instruction, you can use regular images or animated images and add a sound on click or rollover.</div> <div>  Using INSERT HTML (webgem) and web component, you can place the image and the sound into your webpage and have them work together.</div> <bR> <div> <B>2 easy steps:</B></div> <div> 1) The code goes into the white box</div> <div> 2) Click web component button to add in the image and sound files to the CSB file.</div> <bR> <div> The codes shown below use CSB/Trellix to upload the sound and image file.</div> <div> As long as you have ^GEMDIR/ in the code in front of the file name, CSB/Trellix will be able to find the files,</div> <div> <B>MUST change each gEMDIR to GEMDIR before using code!</B></div> <bR> <div> NOTE: If you FTP the file to your own image directory on your website instead of using the web component part, then take ^GEMDIR/ out of the code and identify your own website folder.</div> <bR> <div> <TABLE BORDER="2" CELLPADDING="2" CELLSPACING="1" WIDTH="754" BORDERCOLORLIGHT="#C0C0C0" BORDERCOLORDARK="#808080" FRAME="HSIDES" RULES="ROWS" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=TOP HEIGHT= 550 WIDTH="284"><div> <B>Mouseover animated image</B><FONT SIZE="3" COLOR="#660099" FACE="Arial" ><B> </B></FONT><FONT SIZE="3" COLOR="#000000" FACE="Arial" > <BGSOUND SRC="#" ID="grumpnyspin" AUTOSTART="TRUE"> <IMG SRC="HTMLobj-1329/grumpynyear.gif" alt="OUT WITH THE OLD_IN WITH THE NEW!" WIDTH="130" HEIGHT="124" BORDER="0" onmouseover="document.all.grumpnyspin.src='HTMLobj-1329/grumpnyspin.wav'">  </FONT></div> <bR> <div>  <BGSOUND SRC="#" ID="hohoho" AUTOSTART="TRUE"> <IMG SRC="HTMLobj-1331/grumpysanta-t.gif" alt="THE GRINCH IS MY FRIEND!" WIDTH="130" HEIGHT="124" BORDER="0" onmouseover="document.all.hohoho.src='HTMLobj-1331/hohoho.wav'">  </div> <bR> <div> <B>Mouseover plain image</B></div> <div>  <BGSOUND SRC="#" ID="catpurr" AUTOSTART="TRUE"> <IMG SRC="HTMLobj-1339/tabby170.jpg" alt="My name is Oscar!" WIDTH="203" HEIGHT="170" BORDER="0" onmouseover="document.all.catpurr.src='HTMLobj-1339/catpurr.wav'">  </div> </tD> <tD VALIGN=TOP WIDTH="459"><div> <B>All three of these MOUSEOVER samples use the same code as shown below.  </B><FONT SIZE="2" COLOR="#000000" FACE="Arial" ><B>Just changed image name and size, and sound name.</B></FONT></div> <bR> <DIV ALIGN="LEFT"></DIV> <div> <B>To capture the code, press Select All then COPY the contents.</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=4 cols=60 > <BGSOUND SRC="#" ID="hohoho" AUTOSTART="TRUE"> <IMG SRC="^gEMDIR/grumpysanta-t.gif" alt="THE GRINCH IS MY FRIEND!" WIDTH="130" HEIGHT="124" BORDER="0" onmouseover="document.all.hohoho.src='^gEMDIR/hohoho.wav'"> </textarea> </form>  </B></div> <div> <B>I have made notes in code below and it will effect functionality!   Use the Select All choice above!</B><FONT SIZE="3" COLOR="#000000" FACE="Arial" > </FONT></div> <bR> <div> <BGSOUND SRC="#" ID="<FONT SIZE="2" COLOR="#6600CC" FACE="Arial" ><B>hohoho</B></FONT>" AUTOSTART="TRUE"> </div> <div> <IMG SRC="^GEMDIR/<FONT SIZE="2" COLOR="#CC0000" FACE="Arial" ><B>grumpysanta-t.gif</B></FONT>" alt="<FONT SIZE="2" COLOR="#009900" FACE="Arial" ><B>THE GRINCH IS MY FRIEND!</B></FONT>"  WIDTH="<FONT SIZE="2" COLOR="#996600" FACE="Arial" ><B>130</B></FONT>" HEIGHT="<FONT SIZE="2" COLOR="#996600" FACE="Arial" ><B>124</B></FONT>" BORDER="0" onmouseover="document.all.<FONT SIZE="2" COLOR="#6600CC" FACE="Arial" ><B>hohoho</B></FONT>.src='^GEMDIR/<FONT SIZE="2" COLOR="#6600CC" FACE="Arial" ><B>hohoho</B></FONT><B>.wav</B>'"></div> <bR> <div> <B>Code notes:   </B></div> <div> <FONT SIZE="2" COLOR="#6600CC" FACE="Arial" ><B>Purple</B></FONT> = name of the sound file    <FONT SIZE="2" COLOR="#CC0000" FACE="Arial" ><B>Red</B></FONT> = image name      </div> <div> <B>Brown</B><FONT SIZE="2" COLOR="#000000" FACE="Arial" > = image size width and height</FONT></div> <div> <B>Green</B> <FONT SIZE="2" COLOR="#000000" FACE="Arial" >= alt = floating tooltip/caption</FONT></div> <bR> <div> <I>Image sources: </I></div> <div> Grumpy is a construction worker used on the Lambert Corporation website and is modified for special occasions by me. Please DO NOT take him for personal use.</div> <div> Cat: This image came in my email and since it looks so much like my Oscar, I thought it appropriate for this site.</div> <bR> <div> <B>Cat purr sound:  </B><FONT SIZE="1" COLOR="#CC0000" FACE="Arial" ><B>right click on the link, then chose "Save Target As"</B></FONT></div> <DIV ALIGN="LEFT"></DIV> <div> <B> <a href="HTMLobj-1469/catpurr.wav"><u>catpurr.wav</u> </a>  </B></div> </tD> </tR> <tR> <tD VALIGN=TOP HEIGHT= 364 ><NOBR><div> <B> </B></div> <bR> <bR> <div>  <A HREF="HTMLobj-1341/catpurr.wav" TARGET="_top"><IMG SRC="HTMLobj-1341/tabby170.jpg" border=0 width="203" height="170" ALT="My name is Oscar!"> </A>  </div> </NOBR></tD> <tD VALIGN=TOP WIDTH="459"><bR> <div> <B>This sample uses CSB to upload your image and sound file!</B></div> <div> <B>MANUAL CLICK FOR SOUND</B></div> <bR> <DIV ALIGN="LEFT"></DIV> <div> <B>To capture the code, press Select All then COPY the contents.</B></div> <div> <B>MUST change each gEMDIR to GEMDIR before using code!</B></div> <div> <B> <form name="code2"> <a class="highlighttext" href="javascript:HighlightAll('code2.select1')">Select All</a><br> <textarea name="select1" rows=4 cols=60 > <A HREF="^gEMDIR/catpurr.wav" TARGET="_top"><IMG SRC="^gEMDIR/tabby170.jpg" border=0 width="203" height="170" ALT="My name is Oscar!"> </A> </textarea> </form>  </B></div> <div> <B>I have made notes in code below and it will effect functionality!   Use the Select All choice above!</B><FONT SIZE="2" COLOR="#000000" FACE="Arial" > </FONT></div> <bR> <div> <A HREF="^GEMDIR/<FONT SIZE="2" COLOR="#6600CC" FACE="Arial" ><B>catpurr.wav</B></FONT>" TARGET="_top"><IMG SRC="^GEMDIR/<FONT SIZE="2" COLOR="#CC0000" FACE="Arial" ><B>tabby170.jpg</B></FONT>" border=0 width="<FONT SIZE="2" COLOR="#996600" FACE="Arial" ><B>203</B></FONT>" height="<FONT SIZE="2" COLOR="#996600" FACE="Arial" ><B>170</B></FONT>" ALT="<FONT SIZE="2" COLOR="#009900" FACE="Arial" ><B>My name is Oscar!</B></FONT>"> </A></div> <bR> <div> <B>Code notes:   </B></div> <div> <FONT SIZE="2" COLOR="#6600CC" FACE="Arial" ><B>Purple</B></FONT> = name of the sound file    <FONT SIZE="2" COLOR="#CC0000" FACE="Arial" ><B>Red</B></FONT> = image name      </div> <div> <B>Brown</B><FONT SIZE="2" COLOR="#000000" FACE="Arial" > = image size width and height</FONT></div> <div> <B>Green</B> <FONT SIZE="2" COLOR="#000000" FACE="Arial" >= alt = floating tooltip/caption</FONT></div> <bR> </tD> </tR> <tR> <tD VALIGN=TOP HEIGHT= 220 ><NOBR><bR> <div> <A HREF="HTMLobj-1339/catpurr.wav" TARGET="_top" TITLE="HTMLobj-1339/catpurr.wav"><IMG SRC="536cbaa0.jpg" border=0 width="203" height="170" ALT="My name is Oscar!" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></A></div> </NOBR></tD> <tD VALIGN=TOP WIDTH="459"><bR> <div> <B>This sample you have to manually upload your sound file to your website using FTP program.</B>  <FONT SIZE="3" COLOR="#000000" FACE="Arial" ><B>MANUAL CLICK FOR SOUND </B></FONT>(for FTP info, <A HREF="http://www.samisite.com/publish/using_ftp.htm" TARGET="_top" TITLE="http://www.samisite.com/publish/using_ft">read more here</A>)</div> <bR> <div> Insert > Picture > Image/Clipart</div> <div> Then right click image and Create link to URL</div> <div> Type the address of the sound file, choose OK.</div> <bR> </tD> </tR> </TABLE></div> <bR> </td> </tr></table></body>