Onclick Change Image

[GriffonNest]

Hi everyone, First of all, I would like to say that w3 was very helpful tutorial and forum-wise, so thank you so much guys. 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: <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!

[justsomeguy]

Instead of inline code, you'll want to use functions to handle the events. The click handler should first reset all of the buttons to the default, then change the one you clicked on. There's an example of using document.getElementById here: http://www.w3schools.com/jsref/met_doc_getelementbyid.asp

[GriffonNest]

Hi, thanks for the reply. Is there a specific function for the 'reset'?

[justsomeguy]

Not specifically, you would just get each of the image elements and set the sources to be the defaults you have there. Just one line per image where you set the source to what it started as.

[dsonesuk]

First you should validate your code, because at the moment div elements within unordered list is totally invalid. 1) use position:relative; float: left; from divs for li tags,2) consider using sprite images for <a> element for background-image and then use css pseudo :hover instead of mouseover and mouseout.3) to hide anchor text (if that's what your aiming for) use span element instead of div and target that for hiding.4) then use onclick to add "current" classname to currently selected li, after removing from any li element already using this class name.