Hi everyone,

I have a quick question.


Let's say I have 3 icons (that I'm using for filtering):



All of them change an image on mouseOver/mouseOut. Now, if I press on let’s say ‘FOOD’, I want it to stay pressed until another icon gets pressed. Like that:



Here’s the code I’m using for these specific icons:

Code:
<ul id="filter">
<div style="position:relative; float: left;"><li class="current"><a href="#All" TITLE="All"><img src="bimages/allbw.png" onmouseover="this.src='bimages/all.png'" onmouseout="this.src='bimages/allbw.png'" border="0"/><div id="hide" class="hidden">All</div></a></li></div>
<div style="position:relative; float: left;"><li><a href="#Food" TITLE="Food"><img src="bimages/foodbw.png" onmouseover="this.src='bimages/food.png'" onmouseout="this.src='bimages/foodbw.png'" border="0"/><div id="hide" class="hidden">Food</div></a></li></div>
<div style="position:relative; float: left;"><li><a href="#Beauty " TITLE="Beauty & Spa"><img src="bimages/beautybw.png" onmouseover="this.src='bimages/beauty.png'" onmouseout="this.src='bimages/beautybw.png'" border="0"/><div id="hide" class="hidden">Beauty</div></a></li></div>
</ul>
I have tried playing with ‘onClick’ to change image, and it works, but it won’t change it back to Black & White when I press on another icon. So in other words I need ‘current’ to use its colored image.

I also know that I will need to assign an ID to each image and then write a javascript code that will use GetElementById. But I'm not too sure on how exactly the code should look like.

Thank you!

Best Regards!