Music Controls: Changing image when clicked...?

[flurderoy]

I've been trying to figure this out for about an hour and figure I should turn to the help of you guys. :]

I want to have my visitors click on an image to play music and click it again to stop the music. I have the code needed, but it requires several image files, which I have. The problem is that I don't have them in the right order, and I can't seem to find out what the proper order should be.

Please - if anyone can give this a quick look and tell me what images needs\ to be renamed to what, it would be greatly appreciated. I'm not sure if all six images are necessary, but I know that the ones that are needed aren't named properly. I've fiddled around with them so long I've confused myself.

The code used is below.

HEAD:

<script type="text/javascript">

var imgPath = 'images/';
var mediaPath = 'media/';
var nItems = ['a','b'] // id prefix for each image;

function toggleClip(nSet){

var preFix = nSet.id.replace(/\d/,"");
var currSet = nSet.id;
var active = nSet.id.replace(/\D/,"");
if (active == 1)
{
document.Player.fileName = mediaPath+'song'+currSet+'.mp3'
nSet.src = imgPath+currSet+'.gif';
for (i=0; i<nItems.length; i++)
{
if (nItems[i] != preFix)
{
document.getElementById(nItems[i]+'0').disabled = true;
document.getElementById(nItems[i]+'0').style.cursor = 'default';
document.getElementById(nItems[i]+'0').style.border = 'none';
}
}
}
else {
document.Player.stop();
nSet.src = imgPath+currSet+'.gif';
for (i=0; i<nItems.length; i++)
{
document.getElementById(nItems[i]+'0').disabled = false;
document.getElementById(nItems[i]+'0').style.cursor = 'pointer';
document.getElementById(nItems[i]+'0').style.border = 'none';
}
}
}

</script>

BODY:

<div style='display:none'>
<OBJECT ID="Player" WIDTH=287 HEIGHT=225
CLASSID="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95">
<PARAM NAME="BufferingTime" VALUE="30">
<PARAM NAME="AudioStream" VALUE="-1">
<PARAM NAME="AutoSize" VALUE="-1">
<PARAM NAME="Volume" VALUE="-400">
<PARAM NAME="ShowControls" VALUE="-1">
<PARAM NAME="EnableContextMenu" VALUE="0">
</OBJECT>
</div>


<img src="images/a.gif" id='a0' onclick="(this.id=='a0')?this.id='a1':this.id='a0';toggleClip(this);" border="0" style="position:absolute; left:0px; top:0px"><br><br>
<img src="images/b.gif" id='b0' onclick="(this.id=='b0')?this.id='b1':this.id='b0';toggleClip(this);" border="0" style="position:absolute; left:0px; top:0px">

The images:
http://www.freewebs.com/flurderoy/images/a.gif
http://www.freewebs.com/flurderoy/images/a0.gif
http://www.freewebs.com/flurderoy/images/a1.gif

http://www.freewebs.com/flurderoy/images/b.gif
http://www.freewebs.com/flurderoy/images/b0.gif
http://www.freewebs.com/flurderoy/images/b1.


My website is www.freewebs.com/flurderoy if looking at the situation helps. The image is in the upper left-hand corner for now.


Thank you so much!

[flurderoy]

Anyone... please?

It's relatively simple, I just need a fresh set of eyes to check it out.