SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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. #2
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by griffnest View Post
    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.
    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. #3
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, thanks for the reply.
    Any quick pointers on how to do that?

  4. #4
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #5
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:

    Code:
    <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.


Bookmarks

Posting Permissions

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