Create a sound on mouseover

[Hummell]

Hey guys. I have a graph dashboard that displays all of our company's performance measures. When a user mouses over a graph, a mouseover image pops up that displays commentary about the measure. That's great and it works perfectly.

What I want to do is create a sound effect so that when a user mouses over a graph, they not only see the image replaced with the commentary, but also hear the sound.

Here is a snippet of the code I have for one graph in the table (there are over 16 graphs)...can anyone help with where to put the sound effect code (linked below...I think that's what I need).

<tr>
<td style="height: 152px; width: 244px;" class="style23" valign="top">
<a target="_self" onmouseover="imgOn('img1')" onmouseout="imgOff('img1')" href="http://company1.sharepoint.com/default.aspx?action=metricExplorer&amp;layout=full&amp;LOB=GTCH&amp;Category=1&amp;MetricID=6568">

<img id="webImgShrinked14" alt="Picture" src="http://company1.sharepoint.com/sites/performance/performance2/Shared%20Documents/Dashboard%20Images/2008%20Dashboard%20Images/chart001.gif" border="0" galleryimg="false" name="img1" align="top" /></a><br />
</td>

Here is what I think I need to be looking at:
http://www.dynamicdrive.com/dynamicindex11/javascriptsound.htm

[Hummell]

Nevermind, I figured it out.

1st) I found a sound that I liked. It sounds like a page turning very quickly. The sound is like .5 seconds long. I uploaded it to where my .gif files for each graph represented on my performance metric dashboard are located.

2nd) I popped what I was supposed to (from the dynamic drive link) into the head section and changed the RED font to the URL associated with my uploaded .wav sound file.

<bgsound src="#" id="soundeffect" loop=1 autostart="true" />

<script type="text/javascript">

/***********************************************
* JavaScript Sound effect- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/

var soundfile="sidebar.wav" //path to sound file, or pass in filename directly into playsound()

function playsound(soundfile){
if (document.all && document.getElementById){
document.getElementById("soundeffect").src="" //reset first in case of problems
document.getElementById("soundeffect").src=soundfile
}
}

function bindsound(tag, soundfile, masterElement){
if (!window.event) return
var source=event.srcElement
while (source!=masterElement && source.tagName!="HTML"){
if (source.tagName==tag.toUpperCase()){
playsound(soundfile)
break
}
source=source.parentElement
}
}

</script>

3rd) Lastly, I placed the following code into the snippet of code that I have above:

href="#" onMouseover="playsound(soundfile)"

This is where I placed it:

<tr>
<td style="height: 152px; width: 244px;" class="style23" valign="top">
<a target="_self" onmouseover="imgOn('img1')" onmouseout="imgOff('img1')" href="http://company1.sharepoint.com/default.aspx?action=metricExplorer&amp;layout=full&amp;LOB=GTCH&amp;Category=1&amp;MetricID=6568">

<img id="webImgShrinked14" alt="Picture" src="http://company1.sharepoint.com/sites/performance/performance2/Shared%20Documents/Dashboard%20Images/2008%20Dashboard%20Images/chart001.gif" href="#" onMouseover="playsound(soundfile)" border="0" galleryimg="false" name="img1" align="top" /></a><br />
</td>

It works perfectly, and everytime I mouseover a metric graph now, when it switches to show the commentary that speaks to the metrics performance, a nice quick sound is played that sounds like a page turning quickly. I think it adds a lot to the user experience!

-Hum