Dynamic "You-Are-Here" Indicator (JavaScript, I think)

[Incizion]

Hi all,

I think this could be done with JavaScript, but I'm not sure... And even so, I wouldn't even know how to go about doing it.

So I'm designing a website for a client and one of the pages has a gallery of work they have done.

http://img199.imageshack.us/img199/4306/picture2ei.th.png (http://img199.imageshack.us/i/picture2ei.png/)

In the image above you can see the problem area... The area that I have outlined in red (for your benefit) is an iframe that loads different content depending on the numbered button you click along the bottom. I have 'onMouseOver' attributes set to change the little grey box around the number to blue, but I need that box to stay blue after you click it, and then to change back to grey when you click on another one (and the new one then changes to blue).

The idea is for it to be clear to the site user which image they are on after they click it.

Any help would be appreciated, especially a fairly simple solution, as I'm working on a deadline.

Thanks!

[bradgreens]

Create a class for each state that element (I hope 'li') will exist in - "highlighted", "selected", and "unselected" work fine. "unselected" should actually be the default styles in your sheet.

I'm betting your new to JS, so install the jQuery script and learn how to toggle classes, and then remove classes on siblings.

When you click one of your thumbnails, you'd remove the "selected" classes from its siblings, and add the "selected" class to the item you clicked.

The you'd add the :hover selected and apply to the "highlighted" class in that circumstance.

Can't really help any more without seeing the markup.