Change image onmouseup but change others back

[multichild]

I have 7 buttons in a row that have a clicked and not clicked state, but whats happening is that when I click say buttong 1 it changes to yellow, then when I click button 2 that changes to yellow but 1 also stays yellow, when really when you click any button the others should return to their first state.

<div id="featured_Button_1">
<img src="../images/home_Featured_Button1_Clicked.png" alt="Image Picture 1" onmouseup="Swap(this,'../images/home_Featured_Button1_Clicked.png');zxcHotel.GoTo('tst',0);zxcHotel.GoTo('tstD',0);" width="57" height="57" />
</div>
<div id="featured_Button_2">
<img src="../images/home_Featured_Button2_Normal.png" alt="Image Picture 2" onmouseup="Swap(this,'../images/home_Featured_Button2_Clicked.png');zxcHotel.GoTo('tst',1);zxcHotel.GoTo('tstD',1);" width="57" height="57" />
</div>

[AllanP]

@multichild

but 1 also stays yellow, when really when you click any button the others should return to their first state.

The following script changes the button image from red to cyan when you click it. If you click another, the first one reverts to red as required.

<script type="text/javascript">
// get image objects
 var allImg=document.getElementById("wrap").getElementsByTagName("img");
 var imgB=false;
 
 function chgState(obj,indx)
  { var i, oldImgSrc, newImgSrc, result, newSrc; 
    // reset clicked buttons
    if(imgB)
      { for(i=0; i<allImg.length; i++)
           { oldImgSrc=allImg[i].src;
             newImgSrc=oldImgSrc.replace("b.gif","a.gif"); 
             allImg[i].src=newImgSrc;             
           } 
         imgB=false;      
      }
   //    
    result=(obj.src.indexOf("img_"+indx+"a.gif") != -1)? 
      { replacing:"img_"+indx+"a.gif", withThis:"img_"+indx+"b.gif" } : 
      { replacing:"img_"+indx+"b.gif", withThis:"img_"+indx+"a.gif" };
   //   
    newSrc=obj.src.replace(result.replacing, result.withThis );
    obj.src=newSrc;  
    imgB=true;
  }
 </script>

I have created a working example in JSFiddle for you to play with. You may notice a small delay when you click the image before it changes. This is caused by the image loading from another host. The delay goes away after a few clicks in the example.

[multichild]

Thank you Allan P, that works perfectly and is an awesome bit of code, will be coming back to that for years.

Could I ask your advice on one more bit, when the page loads the first image that loads is the first image of the 7, and so button 1 was in its clicked state already, you know what I mean, to indicate that the image showing is related to button 1.

So is there any way that can be built into that script, and then when button 2 is clicked button 1 returns to its off state.

I got the buttons below -

<div id="featured_Button_1">
<img src="../images/img_1b.png" alt="Image Picture 1" onmouseup="zxcHotel.GoTo('tst',0);zxcHotel.GoTo('tstD',0);" width="57" height="57" onclick="chgState(this,1)" />
</div>
<div id="featured_Button_2">
<img src="../images/img_2a.png" alt="Image Picture 2" onmouseup="zxcHotel.GoTo('tst',1);zxcHotel.GoTo('tstD',1);" width="57" height="57" onclick="chgState(this,2)" />
</div>
<div id="featured_Button_3">
<img src="../images/img_3a.png" alt="Image Picture 3" onmouseup="zxcHotel.GoTo('tst',2);zxcHotel.GoTo('tstD',2);" width="57" height="57" onclick="chgState(this,3)" />
</div>
<div id="featured_Button_4">
<img src="../images/img_4a.png" alt="Image Picture 4" onmouseup="zxcHotel.GoTo('tst',3);zxcHotel.GoTo('tstD',3);" width="57" height="57" onclick="chgState(this,4)" />
</div>
<div id="featured_Button_5">
<img src="../images/img_5a.png" alt="Image Picture 5" onmouseup="zxcHotel.GoTo('tst',4);zxcHotel.GoTo('tstD',4);" width="57" height="57" onclick="chgState(this,5)" />
</div>
<div id="featured_Button_6">
<img src="../images/img_6a.png" alt="Image Picture 6" onmouseup="zxcHotel.GoTo('tst',5);zxcHotel.GoTo('tstD',5);" width="57" height="57" onclick="chgState(this,6)" />
</div>
<div id="featured_Button_7">
<img src="../images/img_7a.png" alt="Image Picture 7" onmouseup="zxcHotel.GoTo('tst',6);zxcHotel.GoTo('tstD',6);" width="57" height="57" onclick="chgState(this,7)" />
</div>

<script>
var allImg = document.getElementById("wrapperNavBar").getElementsByTagName("img");
var imgB = false;

function chgState(obj, indx) {
var i, oldImgSrc, newImgSrc, result, newSrc;
// reset clicked buttons
if (imgB) {
    for (i = 0; i < allImg.length; i++) {
        oldImgSrc = allImg[i].src;
        newImgSrc = oldImgSrc.replace("b.png", "a.png");
        allImg[i].src = newImgSrc;
    }
    imgB = false;
}
result = (obj.src.indexOf("img_" + indx + "a.png") != -1) ? {
    replacing: "img_" + indx + "a.png",
    withThis: "img_" + indx + "b.png"
} : {
    replacing: "img_" + indx + "b.png",
    withThis: "img_" + indx + "a.png"
};
//   
newSrc = obj.src.replace(result.replacing, result.withThis);
obj.src = newSrc;
imgB = true;
}
</script>

I have changed the first up button src on button 1, but don’t know how then to change it’s state to 1a once for example button 2 is clicked

<img src="../images/img_1b.png" alt="Image Picture 1" onmouseup="zxcHotel.GoTo('tst',0);zxcHotel.GoTo('tstD',0);" width="57" height="57" onclick="chgState(this,1)" />

[AllanP]

@multichild

I have changed the first up button src on button 1, but don’t know how then to change it’s state to 1a once for example button 2 is clicked

To set the first button to the clicked state you just change its src to the clicked image which is:

<img border="0" src="http://www.allanp.net/AA/img_1b.gif" onclick="chgState(this,1)" alt="button 1" width="68" height="68">

You will also need to change the variable imgB from FALSE to TRUE at the beginning of the script where it says:

var imgB=false;

This variable changes to TRUE when you click a button. As you are starting in the “clicked state” you must show it as set to true. The program then knows to reset the image to the non-clicked state before setting the next clicked image to the clicked state.

[multichild]

Fair play Allan P, that’s a very nice script indeed.

Cheers