Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Onclick Change Image

    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!

  • #2
    New Coder
    Join Date
    Jul 2011
    Location
    Kediri - Indonesia
    Posts
    61
    Thanks
    2
    Thanked 19 Times in 19 Posts
    i don't know why it's standart code. but i have a good idea to do this. and i have tested it.
    Code:
    <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.
    Attached Files Attached Files
    I am sorry my english is very bad. But I am very interest to discusse here :-)

  • #3
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It works perfectly! Thank you so very much!!!!!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •