View Full Version : Music Controls: Changing image when clicked...?

08-15-2007, 08:40 PM
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.


<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 {
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';



<div style='display:none'>
<OBJECT ID="Player" WIDTH=287 HEIGHT=225
<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">

<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:


My website is www.freewebs.com/flurderoy (http://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!

08-20-2007, 09:51 PM
Anyone... please?

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