Simple button swap linking different pages

[anisa]

Hello everyone,

i need help with a this choice i made to implement button swapping.

Basically, the idea is : you have two buttons, each of them links to different pages and is represented by an image (a button of course). When one button is clicked i want it to become active (so as to call this different image of the same button active i.e. with another color) and the other to swicht to its image inactive. Here is this simple script i managed to put together:

var interneti=true;
function swapimage(interneti)
   {
   if  (interneti){
	   this.location.href = "telefoni.html";
      document.images['internet'].src ="a_files/FirstNonActiveButton.jpg" ;
	  document.images['telefoni'].src = "a_files/SecondActiveButon.jpg";
	  interneti = true;
      }else if(!interneti) {
 this.location.href = "<$mt:BlogURL$>internet.html";
	      document.images['internet'].src ="<$mt:BlogURL$>a_files/FirstActiveButton.jpg" ;
	  document.images['telefoni'].src = "<$mt:BlogURL$>a_files/SecondNonActiveButton.jpg";
	  
		  
		  } 
		  }
   
 // -->       </script>

and the part where it is called

<div id="residential_current"> 
<img src="a_files/FirstActiveButton.jpg" id = "internet" onclick="javascript:swapimage(false)" />
</div>
                        

<div class="bus_divider"> 
<img src="a_files/SecondNonActiveButton.jpg" id="telefoni" onclick="javascript:swapimage(true)"  />

******

Now, what happens is that the change of images that represent the buttons takes place only before the page it links to is loaded. Afterwards it seems like the page is reset. The buttons are in the header module called from every page in my site.
I cannot understand how to make it possible that the document.images.src ="a_files/FirstNonActiveButton.jpg" ; happens in the page called. :(

Please give me a clue... i am so out of time to restart another way.... :(

Thanks in advance

[jcacquiescent27]

I'm not sure if this is the solution, but you might change this line: this.location.href = "telefoni.html"; to this this.location.href = "<$mt:BlogURL$>telefoni.html"; .

Also, you may have a logic error going on. When you first load the page, you have the image 'FirstActiveButton.jpg' loaded; when you click on that image, you pass 'false' to the 'swapimage' function, which causes it to fall through to the else statement, telling it to load the same image that is already loaded. Did you mean to have 'FirstNonActiveButton.jpg' loaded first and change it to 'FirstActiveButton.jpg' when clicked upon?

Just some thoughts.

[anisa]

I'm not sure if this is the solution, but you might change this line: this.location.href = "telefoni.html"; to this this.location.href = "<$mt:BlogURL$>telefoni.html"; .

Also, you may have a logic error going on. When you first load the page, you have the image 'FirstActiveButton.jpg' loaded; when you click on that image, you pass 'false' to the 'swapimage' function, which causes it to fall through to the else statement, telling it to load the same image that is already loaded. Did you mean to have 'FirstNonActiveButton.jpg' loaded first and change it to 'FirstActiveButton.jpg' when clicked upon?

Just some thoughts.

I corrected the this.location.href = "<$mt:BlogURL$>telefoni.html"; .

But however i do not see there is a problem while recalling the same button -that is just in the case when the other button is pressed - and i believe that really doesn' t matter if you make such a false operation if is justified by the other case when the SecondNonActiveButton is pressed.

I'm trying to figure out a way to pass by Link method the variable interneti in order to realize which button should be pressed in the new page loaded... even though it seems e little bit odd....

[jcacquiescent27]

I'm still not sure I completely understand what you are trying to do. Here's what I think you are trying to do... When you go to a particular page, such as 'telefoni.html' you are trying to make the button Active which links to 'telefoni.html' right? I don't think I understood the first time around.

Anyway, if this is what you are trying to accomplish, you should use a different event to trigger your function. You could use something like this: <body onload="javascript:...>" . Also, you could use a script like this to grab the current page name for passing to your swapimage function, which would then target your two images using Javascript's getElementById function. This is just my approach to solving the problem, not having the time to set something up for testing.