The SitePoint Forums have moved.

You can now find them here.
This forum is now closed to new posts, but you can browse existing content.
You can find out more information about the move and how to open a new account (if necessary) here.
If you get stuck you can get support by emailing forums@sitepoint.com

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Creating a semi-permanent sticky button

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.

Making the button stay pressed on one page is easy, but making it stay pressed when another page loads over top is trickier, I suggest you figure out how you will go about that part first.

Probably the easiest way to do this is to take each page that has a button linking to it and make the button PERMANENTLY "down" on that page. For example in
marketing.shtml
the button for marketing appears with the "down" graphic, and all the rest appear normal.

If you do that for all the pages, you basically eliminate the need for any javascript.

you could use these two script together to get that to work.
you would only have to do some minor tweaking...

just make the page highlight script go through and find the images inside the links, then replace the source if the image who's link matches the url of the current page you are on with the over image source...