asked on

How can I change an image from a button that have been set in the Master Page?

Hi experts!
This question is a little complicated so please be patience. This program was already written so I can not change the arquitecture.
I have a Master page(FirstMaster.master) that have 4 button that are actually images wrapped in an anchors so I can use the rollover effect.
I am sending the code of this buttons, by the way they have a script function that allow them to have the rollover and rollout effect.

The FirstMaster.master have a ContentPlaceHolder called "MainContent",(You mignt be wonder at this time what is NavigationContent.aspx that the buttons refer, I am getting there...).

Inside the ContentPlaceHolder(MainContent) from "c.master" there is a MasterPage Called "SecondMaster.master" page.

The SecondMaster.master page have a Contentplaceholder called "MarqueecontentPlaceHolder".
Inside this contentplaceholder (MarqueeContentPlaceHolder) is where we can find the "NavigationContent.aspx" page.

The NavigationContent.aspx content information that is pulled form the database. The information is different depending of the "contentid" that I set in the anchors(buttons from the FirstMaster.master page):
<a href="NavigationContent.aspx?contentid=Tree" .................<img ........../.> </a>

There are three different "contentid" :house, car, tree.
THe program works great, there is no problem with the program but I want to add some features that have to do with the buttons in the FirstMaster.master when these are click.

QUESTION : The buttons have the rollover and rollout effect. What I want to do is that the code be smart to identify in which page they are so they can change the image of that button to on instead of OFF.
If you see in the code of my buttons there are two picture one of them is ####.ON and the other is ####. OFF.
When the client click one of the buttons I want that the program can recognized that this one is the one that the client have clicked so lets go and change the picture of that page to ###.ON and leave it like that until the client click another button.
I have tried everything but it doesn't work, even I hardcoded the buttons but everytime the page doesn't recognized the code or I ahve some troubles with the pictures. I really need your help in this one, thanks:

Example: If the Client CLick :
<a href="NavigationContent.aspx?contentid=house"
onmouseover="swap('menu_house','images/house_on.png')"
onmouseout="swap('menu_house','images/house_off.jpg')">
<img id="menu_house" src="images/house_off.jpg" />
</a>

The menu of the buttons in the house page will looks like this:
house_on.jpg // car_off.jpg // tree_off.jpg

Thanks for your help!!!

These are the buttons that I was talking about inside FirstMaster.master:
<td>
 <a href="NavigationContent.aspx?contentid=house" 
 onmouseover="swap('menu_house','images/house_on.png')" 
 onmouseout="swap('menu_house','images/house_off.jpg')">
    <img id="menu_house" src="images/house_off.jpg" />
 </a>
</td>
<td>
 <a href="NavigationContent.aspx?contentid=car" 
 onmouseover="swap('menu_car,'images/car_on.png')" 
 onmouseout="swap('menu_car','images/car_off.jpg')">
    <img id="menu_car" src="images/car_off.jpg" />
 </a>
</td>
 
<td>
 <a href="NavigationContent.aspx?contentid=Tree" 
 onmouseover="swap('menu_Tree,'images/Tree_on.png')" 
 onmouseout="swap('menu_Tree,'images/Tree_off.jpg')">
    <img id="menu_Tree" src="images/Tree_off.jpg" />
 </a>
</td>

Open in new window

Zvonko

Check this:

<table><tr>
 
<td>
 <a href="NavigationContent.aspx?contentid=house" 
 onmouseover="swap('menu_house','images/house_on.png')" 
 onmouseout="swap('menu_house','images/house_off.jpg')">
    <img id="menu_house" src="images/house_off.jpg" />
 </a>
</td>
<td>
 <a href="NavigationContent.aspx?contentid=car" 
 onmouseover="swap('menu_car','images/car_on.png')" 
 onmouseout="swap('menu_car','images/car_off.jpg')">
    <img id="menu_car" src="images/car_off.jpg" />
 </a>
</td>
 
<td>
 <a href="NavigationContent.aspx?contentid=Tree" 
 onmouseover="swap('menu_Tree','images/Tree_on.png')" 
 onmouseout="swap('menu_Tree','images/Tree_off.jpg')">
    <img id="menu_Tree" src="images/Tree_off.jpg" />
 </a>
</td>
 
<tr></table>
 
<script>
var content=location.search.split('contentid=');
if(content.length>1){
  var img = document.images["menu_"+(content[1]+"&").split("&")[0]];
  img.src = img.src.replace("_off.","_on.");
}
</script>

Open in new window

Zvonko

By the way, did you notice the missing single quotes in Tree link?