PDA

View Full Version : Onclick Change Image



GriffNest
Nov 28th, 2011, 05:39 PM
Hi everyone,

I have a quick question.


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

http://s10.postimage.org/ccl9wkzhz/3_buttons.png

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:

http://s9.postimage.org/6cajw9dst/3_buttons_pressed.png

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!

XterM
Nov 29th, 2011, 01:25 AM
i don't know why it's standart code. but i have a good idea to do this. and i have tested it.


<ul id="filter">
<div style="position:relative; float: left;"><li class="current"><a href="#All" TITLE="All">
<img src="1.png" img_hover="2.png" img_out="1.png" active="0"
onmouseover="changeImg(this,'img_hover')"
onmouseout="changeImg(this,'img_out')"
onclick="setActive(this)"
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="3.png" img_hover="4.png" img_out="3.png" active="0"
onmouseover="changeImg(this,'img_hover')"
onmouseout="changeImg(this,'img_out')"
onclick="setActive(this)"
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="5.png" img_hover="6.png" img_out="5.png" active="0"
onmouseover="changeImg(this,'img_hover')"
onmouseout="changeImg(this,'img_out')"
onclick="setActive(this)"
border="0"/><div id="hide" class="hidden">Beauty</div></a></li></div>
</ul>
<input type=button id="b" value=tes />


<script>

function changeImg(object,attributeName){
var active = object.getAttribute("active");
if(active==1) attributeName='img_hover';
var img = object.getAttribute(attributeName);
object.src=img;
}

function setActive(object){
//clear all activated img
var tag_img = document.getElementById("filter").getElementsByTagName("img");
for(i=0;i<tag_img.length;i++){
tag_img[i].setAttribute("active","0");
changeImg(tag_img[i],'img_out');
}
object.setAttribute("active","1");
changeImg(object,'img_hover');
}
</script>


a zipped file completed with img attachted.

hope it help.

GriffNest
Nov 29th, 2011, 03:02 PM
It works perfectly! Thank you so very much!!!!!