Change button state on three buttons in a row

I have three buttons, 1,2 & 3, and wont to change their state when clicked.

Got it so that when you say click 1 it changes, no problem at all.


<img src="../images/home_Featured_Button1_Normal.jpg" name="pic" onclick="window.document.pic.src='../images/home_Featured_Button1_Clicked.jpg';"/>

What I would like to happen though is then when button 2 is clicked, 1 and 3 return to their normal state, then when 1 is clicked 2 and 3 go back and so on.

Has anybody got any ideas.

Is it also possible because its jscript to have the icon change to a finger when the image is rolled-over.

Im guessing its an if statement inside the click function, but would like some help if thats ok.

Thought about it, and used on click inside a href as below:


<div id="featured_Button_1">
<a href="#" onclick="window.document.pic.src='../images/home_Featured_Button1_Clicked.jpg';">
<img src="../images/home_Featured_Button1_Normal.jpg" name="pic" border="0"/>
</a></div>
<div id="featured_Button_2">
<a href="#" onclick="window.document.pic2.src='../images/home_Featured_Button2_Clicked.jpg';">
<img src="../images/home_Featured_Button2_Normal.jpg" name="pic2" border="0"/>
</a></div>
<div id="featured_Button_3">
<a href="#" onclick="window.document.pic3.src='../images/home_Featured_Button3_Clicked.jpg';">
<img src="../images/home_Featured_Button3_Normal.jpg" name="pic3" border="0"/>
</a></div>

Seems to work fine unless there a better way, but still stuck with the orignal problem of when 1 is clicked, 2 and 3 go back and so on.

The way to do that is to return all of them to being unclicked, and to then set the one that was clicked to being clicked.

Hi Paul, do you have an example please.

Is it unbind.

If it is, wouldnt mind an example for my situation if possible.

Cheers

This is a task that is much more difficult to achieve using JavaScript. CSS is by far the better one to use when changing the presentation of elements on the screen.
For example: see this vidcast on creating a 3-state menu, and the [url=“http://css-tricks.com/examples/ThreeStateMenu/contact.php”]demo

Thank you Paul, will take a look.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<script type="text/javascript">
/*<![CDATA[*/

function Swap(img,src){
 if (img.name&&!Swap[img.name]){
  Swap[img.name]=img.src;
 }
 if (Swap.lst&&Swap.lst.name&&Swap.lst!=img){
  Swap.lst.src=Swap[Swap.lst.name];
 }
 img.src=src;
 Swap.lst=img;
}

/*]]>*/
</script></head>

<body>
<img name="pic1" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" alt="img" width="50" height="50" onmouseup="Swap(this,'http://www.vicsjavascripts.org.uk/StdImages/Two.gif');" />
<img name="pic2" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" alt="img" width="50" height="50" onmouseup="Swap(this,'http://www.vicsjavascripts.org.uk/StdImages/Two.gif');" />
<img name="pic2" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" alt="img" width="50" height="50" onmouseup="Swap(this,'http://www.vicsjavascripts.org.uk/StdImages/Two.gif');" />
</body>

</html>

Thanks Vic,

Didnt have time to try this last week and just put it together and it worked perfectly, exactly what I needed.

One more thing if its possible, can button 1 be seen in the second state when the user enters the page firstly or refreshes the page, so that button 1’s contents can be seen, and then the incentive is to click button 2 and 3 to see the other results.

Cheers

Lee

I’m sorry to ask again, but now its working I can see what I need to do.

The three buttons are lined up with an area below that will change according to the button click, and that content is coming from a MySQL database using PHP.

The normal way I suppose would be that when one of those buttons are clicked the page refreshes and some indicator lets the cose know what content to display, whether its 1,2 or 3.

Is there another way of doing this without having to refresh the page, so its almost like a flash widget I suppose, where the content changes on button click but the page doesnt need to refresh.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<script type="text/javascript">
/*<![CDATA[*/

function Swap(img,src){
 if (img.name&&!Swap[img.name]){
  Swap[img.name]=img.src;
 }
 if (Swap.lst&&Swap.lst.name&&Swap.lst!=img){
  Swap.lst.src=Swap[Swap.lst.name];
 }
 img.src=src;
 Swap.lst=img;
}

/*]]>*/
</script></head>

<body>
<img name="pic1" src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" alt="img" width="50" height="50" onmouseup="Swap(this,'http://www.vicsjavascripts.org.uk/StdImages/Two.gif');" />
<img name="pic2" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" alt="img" width="50" height="50" onmouseup="Swap(this,'http://www.vicsjavascripts.org.uk/StdImages/Two.gif');" />
<img name="pic3" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" alt="img" width="50" height="50" onmouseup="Swap(this,'http://www.vicsjavascripts.org.uk/StdImages/Two.gif');" />
<script  type="text/javascript">

Swap.pic1='http://www.vicsjavascripts.org.uk/StdImages/One.gif';
Swap.lst=document.images.pic1;

</script>

</body>

</html>

Cheers Vic, yep that worked prefectly.

Thank you

Do you use the same idea to change content placed in a div below these buttons.

The content which is drawn out of the database using php and mysql needs to show a featured hotel, so when button 2 is then clicked, featured hotel number 2 is shown with a description and an image.

This sounds very complicated in honesty, and not 100% it can be done.

Maybe I will have to change tact with the buttons

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">
/*<![CDATA[*/

#tst {
  position:absolute;left:100px;top:100px;width:200px;height:200px;border:solid red 1px;text-Align:center;background-Color:#FFFFCC;
}

/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/

function Swap(img,src){
 if (img.name&&!Swap[img.name]){
  Swap[img.name]=img.src;
 }
 if (Swap.lst&&Swap.lst.name&&Swap.lst!=img){
  Swap.lst.src=Swap[Swap.lst.name];
 }
 img.src=src;
 Swap.lst=img;
}


var zxcHotel={

 init:function(o){
  var id=o.ID,nu=o.Display,ms=o.SlideDuration,obj=document.getElementById(id),w=obj.offsetWidth,h=obj.offsetHeight,clds=obj.childNodes,ary=[],z0=0;
  obj.style.overflow='hidden';
  for (;z0<clds.length;z0++){
   if (clds[z0].nodeType==1){
    clds[z0].style.position='absolute';
    clds[z0].style.left=w+'px';
    clds[z0].style.top='0px';
    clds[z0].style.width=w+'px';
    clds[z0].style.height=h+'px';
    ary.push([clds[z0],'dly'+z0]);
   }
  }
  nu=ary[nu]?nu:0;
  ary[nu][0].style.left='0px';
  this['zxc'+id]={
   ary:ary,
   w:w,
   nu:nu,
   ms:typeof(ms)=='number'?ms:1000
  }
 },

 GoTo:function(id,nu){
  var o=this['zxc'+id],ud
  if (o&&o.ary[nu]&&nu!=o.nu){
   ud=nu>o.nu;
   clearTimeout(o.ary[o.nu][1]);
   this.animate(o,o.ary[o.nu],0,o.w*(ud?-1:1),new Date(),o.ms);
   clearTimeout(o.ary[nu][1]);
   this.animate(o,o.ary[nu],o.w*(ud?1:-1),0,new Date(),o.ms);
   o.nu=nu;
  }
 },

 animate:function(o,ary,f,t,srt,mS){
  var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
  if (isFinite(now)){
   ary[0].style.left=now+'px';
  }
  if (ms<mS){
   this[ary[1]]=setTimeout(function(){ oop.animate(o,ary,f,t,srt,mS); },10);
  }
  else {
   ary[0].style.left=t+'px';
  }
 }


}

/*]]>*/
</script>
</head>

<body>

<img name="pic1" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" alt="img" width="50" height="50" onmouseup="Swap(this,'http://www.vicsjavascripts.org.uk/StdImages/Two.gif');zxcHotel.GoTo('tst',0);" />
<img name="pic2" src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" alt="img" width="50" height="50" onmouseup="Swap(this,'http://www.vicsjavascripts.org.uk/StdImages/Two.gif');zxcHotel.GoTo('tst',1);" />
<img name="pic3" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" alt="img" width="50" height="50" onmouseup="Swap(this,'http://www.vicsjavascripts.org.uk/StdImages/Two.gif');zxcHotel.GoTo('tst',2);" />

 <div id="tst" >
  <div class="hotel" >
   <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" />
   Hotel 1
  </div>
  <div class="hotel" >
   <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" alt="img" />
   Hotel 2
  </div>
  <div class="hotel" >
   <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg" alt="img" />
   Hotel 3
  </div>
 </div>

<script type="text/javascript">
/*<![CDATA[*/
zxcHotel.init({
 ID:'tst',          // the unique ID of the parent DIV.                (string)
 Display:1,         //(optional) the initial hotel to display.         (number, default = 0)
 SlideDuration:500  //(optional) the islide duration in milli seconds. (number, default = 1000)
})

Swap.pic2='http://www.vicsjavascripts.org.uk/StdImages/One.gif';
Swap.lst=document.images.pic2;

/*]]>*/
</script>

</body>

</html>

Vic, fair play that is a very good bit of code, it works perfectly.

The way I have it is that I have the three buttons as you know, and then there is a space to their left, and a space below.

The images that change on each button click are to the left and work perfectly, so the next bit for me to develop is the space below which will have some data in relation to the imagery and will have to come out of the database.

So is it right that the way to achieve this is in the same way as the imagery in that the data is loaded ready, and then on button click it slides back and forth? Ideally it just appears, but sliding isnt a problem.

I have included a link below so you can it in action.

http://roomcheck.csf.dcmanaged.com/more.php

If you are able to help on this last one that will be it then, and beforehand thank you very much.

Hi,
have made some good progress by replicating the code and playing with the position of the second lot of data, as you will see below:
http://roomcheck.csf.dcmanaged.com/more.php

So that I have control of the data to the left (imagery) and below (text).

As you know I have used your sliding code, but wondered if there was a way of that data below the buttons appearing without sliding.

This is what I used on the buttons:


<div id="featured_Button_1">
<img name="pic1" src="../images/home_Featured_Button1_Clicked.jpg" alt="img" onmouseup="Swap(this,'../images/home_Featured_Button1_Clicked.jpg');zxcHotel.GoTo('tst',0);zxcHotel.GoTo('tstD',0);" />
</div>
<div id="featured_Button_2">
<img name="pic2" src="../images/home_Featured_Button2_Normal.jpg" alt="img" onmouseup="Swap(this,'../images/home_Featured_Button2_Clicked.jpg');zxcHotel.GoTo('tst',1);zxcHotel.GoTo('tstD',1);" />
</div>
<div id="featured_Button_3">
<img name="pic3" src="../images/home_Featured_Button3_Normal.jpg" alt="img" onmouseup="Swap(this,'../images/home_Featured_Button3_Clicked.jpg');zxcHotel.GoTo('tst',2);zxcHotel.GoTo('tstD',2);" />
</div>

<div id="featuredEndBlock"></div>
<!-- 7 featured_Top --></div>

<script type="text/javascript">
/*<![CDATA[*/
zxcHotel.init({
 ID:'tst',          // the unique ID of the parent DIV.                (string)
 Display:0,         //(optional) the initial hotel to display.         (number, default = 0)
 SlideDuration:500  //(optional) the islide duration in milli seconds. (number, default = 1000)
})

Swap.pic1='../images/home_Featured_Button1_Normal.jpg';
Swap.lst=document.images.pic1;


/*]]>*/
</script>
<div id="tstD">
  <div class="hotel">Hotel 1</div>
  <div class="hotel">Hotel 2</div>
  <div class="hotel">Hotel 3</div>

 <script type="text/javascript">
/*<![CDATA[*/
zxcHotel.init({
 ID:'tstD',          // the unique ID of the parent DIV.                (string)
 Display:0,         //(optional) the initial hotel to display.         (number, default = 0)
 SlideDuration:500  //(optional) the islide duration in milli seconds. (number, default = 1000)
})

/*]]>*/
</script>

So basically rather than calling the slide function on button click, it calls a different function that just allows the info to appear rather than slide in.

Thanks

It sounds like what you’re after is just a simple 3-state tabbed menu interface, where the content for each tab is already on the page, and the selection of each tab determines which part of that content is shown.

There really are much simpler ways to achieve (which are also easier to maintain) than what is currently being done here.

Also, if you don’t mind taking advantage of jQuery, you may find that its tabs are useful: http://jqueryui.com/demos/tabs/
The benefit of using that library for tabs, is that you don’t need the content on the page right away either. Tabs can for example pull in ajax content, so that their content is only retrieved when the tab is clicked. There are a number of useful variations available there.

just change the slide duration

zxcHotel.init({
 ID:'tstD',          // the unique ID of the parent DIV.                (string)
 Display:0,         //(optional) the initial hotel to display.         (number, default = 0)
 SlideDuration:[COLOR="#FF0000"]10[/COLOR]   //(optional) the islide duration in milli seconds. (number, default = 1000)
})

Thank you guys,

Very neat.