Change img on Click

[brandonS]

Hi All,

I'm new to JavaScript and am creating a web page for my wife. I've built the basic page and it has 8 buttons near the top on a horizontal menubar. Each button is an image and when the user clicks on one button I want the image to change. But if the user clicks on another button in the menubar, I want the first button to change back to its original image and the second button to change image. This behaviour will let the user know which section of the site they are in.

Can anyone please help me achieve this??

I've tried using the following:

document.getElementById(srcwindow).src = newImage;

and this works but I can't get the image to change back if the user clicks another button.

Please help...

 

[tsuji]

Try this, forcing retrieval of the image each time anew.
[tt] document.getElementById(srcwindow).src = newImage [blue]+ '?' + (new Date()).getTime()[/blue];[/tt]

 

[brandonS]

No, that didn't work.

The original images changes once clicked but doesn't change back to its original when something else is clicked.

ANy other suggestions??

 

[tsuji]

>...but doesn't change back to its original when something else is clicked.
What something else... and what being handled by that click? Without that info, I would say, why should it change back to the original at all?

 

[brandonS]

As mentioned in my first post:

"I've built the basic page and it has 8 buttons near the top on a horizontal menubar. Each button is an image and when the user clicks on one button I want the image to change. But if the user clicks on another button in the menubar, I want the first button to change back to its original image and the second button to change image. This behaviour will let the user know which section of the site they are in. "

I only want the link to the page that the user is currently viewing to be the different looking link. All other link images in the horizontal menubar look the same when none are clicked.

 

[brandonS]

 <table width="100%" border="0" cellspacing="0" cellpadding="0" style="margin:0px 0px 0px 0px;">
    <tr>
      <td class="menubarbutton"><a class="toplink" href=# OnClick="JavaScript:loadXMLDoc('mainlinkcontent.html','main_section'); loadXMLDoc('leftwindowcontent.html','left_section');"><img id="home_button" src="home-button.jpg" alt="Home" width="100%" height="100%" hspace="0" align="middle" border="0"></a></td>
      <td class="menubarbutton"><a id="test" class="toplink" href=# OnClick="JavaScript:loadXMLDoc('invitations.html','main_section'); loadXMLDoc('leftwindow_invitations.html','left_section'); document.getElementById('invitations_button').src='invitations_1.jpg';"><img id="invitations_button" src="invitations-button.jpg" alt="Invitations" width="100%"height="100%" hspace="0" align="middle" border="0"></a></td>
      <td class="menubarbutton"><img src="gift-tags-button.jpg" alt="Gift_Tags" width="100%" height="100%" hspace="0" align="middle"></td>
      <td class="menubarbutton"><img src="note-cards-button.jpg" alt="Note_Cards" width="100%" height="100%" hspace="0" align="middle"></td>
      <td class="menubarbutton"><img src="mummy-card-button.jpg" alt="Mummy_Cards" width="100%" height="100%" hspace="0" align="middle"></td>
      <td class="menubarbutton"><img src="accessories-button.jpg" alt="Accessories" width="100%" height="100%" hspace="0" align="middle"></td>
      <td class="menubarbutton"><img src="seasonal-button.jpg" alt="Seasonal" width="100%"  height="100%" hspace="0" align="middle"></td>
      <td class="menubarbutton"><a class="toplink" href=# OnClick="JavaScript:loadXMLDoc('contactus.html','main_section');"><img src="contact-us-button.jpg" alt="Contact_Us" width="100%" height="100%" hspace="0" align="middle" border="0"></a></td>
    </tr>
  </table>

 

[tsuji]

In the event handler of all the other button, add the line to change the img back to the original. In case it does not switch back, try the way I posted above with newImage picking up the meaning of "oldImage" on your page, whatever it looks like.

 

[brandonS]

Sorry tsuji but I don't quite understand the code in your previous post and how it would help me. Excuse my ignorance but I'm new to JavaScript so if you could elaborate on it a little, that would be helpful.

 

[tsuji]

The excerpt of the page does not quite covered ingredients to handle the issue. Let's say some variable, make it global to simplify the issue, say oldImage, holding the resource location of the old image. Then take one button as an example, it would be something like this, bare minimum.
[tt]
<td class="menubarbutton"><a class="toplink" href=# OnClick="JavaScript:[blue]document.getElementById(srcwindow).src=oldImage+'?'+(new Date()).getTime();[/blue]loadXMLDoc('mainlinkcontent.html','main_section'); loadXMLDoc('leftwindowcontent.html','left_section');"><img id="home_button" src="home-button.jpg" alt="Home" width="100%" height="100%" hspace="0" align="middle" border="0"></a></td>
[/tt]
The oldImage, newImage and srcwindow at all some sort of global variables such as this somewhere or through whatever mechanism obtainable via script if they aren't..
[tt]
<script type="text/javascript">
var srcwindow="some_id";
var oldImage="xyz.jpg";
var newImage="pqr.jpg";
</script>
[/tt]
That's the idea.

 

[vacunita]

What Tsuji means is you have to manually change the image back when another button is pressed. So he suggests you keep a global variable with the Id and source of the original image so you can return the other button back to its original image.






----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/