Stop activity from a previous rollover by hovering over another?

[carnivalcat]

I have a code of an image that will play a .wav file when you hover over it. I would like the file to keep playing even while your mouse is not hovering over it until you decide to hover over another one.

Here is my code:
<a href="bigpic.jpg" ONMOUSEOVER="OnImage('pic1');javascript:jsPlay('thewav');return true;" ONMOUSEOUT="OffImage('pic1');javascript:jsStop('thewav');return true;"><img src="thumbnail.jpg" name="pic1" border="0" id="pic1"></a>

[jscheuer1]

Obviously then, you cannot have the red part:

<a href="bigpic.jpg"
ONMOUSEOVER="OnImage('pic1');javascript:jsPlay('thewav');return true;"
ONMOUSEOUT="OffImage('pic1');javascript:jsStop('thewav');return true;"><img src="thumbnail.jpg" name="pic1" border="0" id="pic1"></a>

I think that you would also need to set something to let the page know that the thing was playing, so it could be stopped if, and only if it is already playing, and OH! - you really don't need javascript: in this type of syntax (addition green):

<a href="pic.jpg"
onmouseover="OnImage('pic1');jsPlay('thewav');this.onmouseover.on=true;return true;"
onmouseout="OffImage('pic1');return true;"><img src="thumbnail.jpg" name="pic1" border="0" id="pic1"></a>

Now we are ready to cancel play of 'thewav' onmouseover of any other image:

<a href="anotherpic.jpg"
onmouseover="if(document.images.pic1.parentNode.onmouseover.on){document.images.pic1.parentNode.onmouseover.on=false;jsStop('thewav')};OnImage('pic2');jsPlay('theotherwav');this.onmouseover.on=true;return true;"
onmouseout="OffImage('pic2');return true;"><img src="thumbnail.jpg" name="pic2" border="0" id="pic2"></a>