I have a rather unusual request from a client of mine. One that has been kicking my butt and I could use any suggestions.

What he wants with his navigational buttons is a rollover effect, but not in the traditional sense. Instead of just having the button go from a normal state to the rollover effect (in this case, for the button to reverse colors) when the mouse is hovered over the button, he wants it that so that when you click on a button and go to a page, (e.g. Contact) that the rollover effect stays in place until the user clicks another button (e.g. Sales). That would then release the hovered state of the Contact Button and the Sales button would then assume the hovered state.

Button Examples:

Normal Button State:


Hovered Button State:


While this seemed simple enough at first, maybe just using an onHovered flag, but looking at it more, there is almost an illogic to it.

Below is the code I am using to generate the normal rollover effect. But I am totally stumped as to how to:

1) Make the hovered effect stick when the mouse is no longer over the button

2) To release the hovered from the previously selected button and apply it to the next selected button.

Code:
<script language="JavaScript" type="text/javascript">
<!--

var sticky = true;

if (document.images) {
    homebuttonup       = new Image();
    homebuttonup.src   = "http://charlemagnewebdesigns.com/customers/redlake/buttons/home_131.png" ;
    homebuttondown     = new Image() ;
    homebuttondown.src = "http://charlemagnewebdesigns.com/customers/redlake/buttons/home_hover.png" ;

    aboutbuttonup       = new Image();
    aboutbuttonup.src   = "http://charlemagnewebdesigns.com/customers/redlake/buttons/about_131.png" ;
    aboutbuttondown     = new Image() ;
    aboutbuttondown.src = "http://charlemagnewebdesigns.com/customers/redlake/buttons/about_hover.png" ;

    marketingbuttonup       = new Image();
    marketingbuttonup.src   = "http://charlemagnewebdesigns.com/customers/redlake/buttons/marketing_131.png" ;
    marketingbuttondown     = new Image() ;
    marketingbuttondown.src = "http://charlemagnewebdesigns.com/customers/redlake/buttons/marketing_hover.png" ;

    salesbuttonup       = new Image();
    salesbuttonup.src   = "http://charlemagnewebdesigns.com/customers/redlake/buttons/sales_131.png" ;
    salesbuttondown     = new Image() ;
    salesbuttondown.src = "http://charlemagnewebdesigns.com/customers/redlake/buttons/sales_hover.png" ;

    portfoliobuttonup       = new Image();
    portfoliobuttonup.src   = "http://charlemagnewebdesigns.com/customers/redlake/buttons/portfolio_131.png" ;
    portfoliobuttondown     = new Image() ;
    portfoliobuttondown.src = "http://charlemagnewebdesigns.com/customers/redlake/buttons/portfolio_hover.png" ;

    contactbuttonup       = new Image();
    contactbuttonup.src   = "http://charlemagnewebdesigns.com/customers/redlake/buttons/contact_131.png" ;
    contactbuttondown     = new Image() ;
    contactbuttondown.src = "http://charlemagnewebdesigns.com/customers/redlake/buttons/contact_hover.png" ;

}


function buttondown( buttonname )
{
	if (document.images)
	{
		document[ buttonname ].src = eval( buttonname + "down.src" );
		sticky = true;
	}
}

function buttonup ( buttonname )
{
    if (document.images)
    {
	      document[ buttonname ].src = eval( buttonname + "up.src" );
		sticky = false;
    }
}
// -->
</script>


<!-- Start Wrapper and Center --->
	<div align="center">
  	<div id="wrapper">
  

	<!-- Start Banner --->
	  <div id="banner" align="center">
		<img src="http://charlemagnewebdesigns.com/customers/redlake/images/redlake_banner.png">
	  </div>
	<!-- End Banner --->


	<!------------------------------>
	<!---Start Topside Navigation--->
	<!------------------------------>
			<!--- Insert Navigation Button Labels --->
			  <div align="center">
			  <div id="navbar">
			    <table class="navbar" cellspacing="0" cellpadding="0">
				<tr>

				<td class="navbar">
				<a href="http://charlemagnewebdesigns.com/customers/redlake/index.php"
					  onmouseover="buttondown('homebutton')"
					  onmouseout="buttonup('homebutton')" onclick="buttondown('homebutton')">
					<img src="http://charlemagnewebdesigns.com/customers/redlake/buttons/home_131.png" name="homebutton" border="0" width="131" height="40" />
				</a>
				</td>

				<td class="navbar">
					<a href="http://charlemagnewebdesigns.com/customers/redlake/about.shtml"
					  onmouseover="buttondown('aboutbutton')"
					  onmouseout="buttonup('aboutbutton')">
					<img src="http://charlemagnewebdesigns.com/customers/redlake/buttons/about_131.png" name="aboutbutton" border="0" width="131" height="40" />
				</a>
				</td>

				<td class="navbar">
				<a href="http://charlemagnewebdesigns.com/customers/redlake/marketing.shtml"
					  onmouseover="buttondown('marketingbutton')"
					  onmouseout="buttonup('marketingbutton')">
					<img src="http://charlemagnewebdesigns.com/customers/redlake/buttons/marketing_131.png" name="marketingbutton" border="0" width="131" height="40" />
				</a>
				</td>

				<td class="navbar">
				<a href="http://charlemagnewebdesigns.com/customers/redlake/sales.shtml"
					  onmouseover="buttondown('salesbutton')"
					  onmouseout="buttonup('salesbutton')">
					<img src="http://charlemagnewebdesigns.com/customers/redlake/buttons/sales_131.png" name="salesbutton" border="0" width="131" height="40" />
				</a>
				</td>

				<td class="navbar">
				<a href="http://charlemagnewebdesigns.com/customers/redlake/portfolio.shtml"
					  onmouseover="buttondown('portfoliobutton')"
					  onmouseout="buttonup('portfoliobutton')">
					<img src="http://charlemagnewebdesigns.com/customers/redlake/buttons/portfolio_131.png" name="portfoliobutton" border="0" width="131" height="40" />
				</a>
				</td>

				<td class="navbar">
				<a href="http://charlemagnewebdesigns.com/customers/redlake/contact_us.shtml"
					  onmouseover="buttondown('contactbutton')"
					  onmouseout="buttonup('contactbutton')">
					<img src="http://charlemagnewebdesigns.com/customers/redlake/buttons/contact_135.png" name="contactbutton" border="0" width="135" height="40" />
				</a>
				</td>
				
				</tr>
				</table>
			  </div>
		  	</div>
	<!---------------------------->
	<!---End Topside Navigation--->
	<!---------------------------->
Thanks for any help!