Onclick Change Image

JavaScript
1

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:


<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!

2

That’s because you haven’t told the other button to reset the other images when it is clicked. When a button is clicked you need to loop through all the images and set them to whatever you need.

You haven’t posted your onclick code so I’m not sure how you expect anyone to tell you what you have done wrong.

3

Hi, thanks for the reply.
Any quick pointers on how to do that?

4

post your onclick code.

If you don’t post your code I’m not sure how you expect anyone to help you get it working, unless you’re just looking for someone to do it for you for free.

5

Yeah, you’re totally right. I just didn’t include it in the main post cause I was pretty sure it’s not right. What I’m using right now is the following:

<script type="text/javascript">
function changeIt(imageName,objName)
{
	var obj = document.getElementById(objName);
	
	var imgTag = "<img src='"+imageName+"' border='0' />";
	
	obj.innerHTML = imgTag;
	
	return;	
}
</script>

<div style="position:relative; float: left;"><li><a href="#Services" TITLE="Services";><img src="1bw.png" onclick="this.src='1.png';" alt="image"  border="0" /><div id="hide" class="hidden">Services</div></a></li></div>

But in this scenario my ‘onmouseover’ and ‘onmouseout’ do not work.