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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    onClick opacity = 100%

    Ok so I have two images class1 & class2 which both have opacity:0.3; and filter:alpha(opacity=30); added with css. I am trying to get it so when I click on class1 it will either fade in (ideally) or display as 100% opacity. I do not want both class's to be able to be 100% so if one is clicked the other would be 30%.

    I also have multiple instances of class1 and class2.

    If anyone can help me I will praise you on the highest mountain!

    Thanks,

    B

  • #2
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I got it working, except for in IE the toggling doesn't work.. and I am pretty sure it has something to do with this line. Can anyone help me correct what is wrong with this? I am sure it's syntax or something.

    $(event.target).css('filter','opacity', 100);

  • #3
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,930
    Thanks
    56
    Thanked 550 Times in 547 Posts
    so for example you click on class 1 and all the class 1 images go to 100% opacity?

    Code:
    <input type="button" value="class 1" onclick="opac()"/>
    		<script type="text/javascript">
    		function opac()	{
    		pics=document.getElementsByTagName("img")
    		for(x=0;x<pics.length;x++)	{
    			if (pics[x].className=="class1") {
    				pics[x].style.opacity=1
    				pics[x].style.filter="alpha(opacity=100)" // IE hack 
    				}
    			}
    }
    
    	</script>
    [EDIT] oops - didn't realise you were doing it in jQuery...
    Last edited by xelawho; 01-19-2012 at 10:51 PM.

  • #4
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,930
    Thanks
    56
    Thanked 550 Times in 547 Posts
    no, by clicking on the pic. even easier...

    Code:
    <body>
    <img src="some_pic.jpg" onclick="opac(this)" class="class1"/>
    		<script type="text/javascript">
    		function opac(pic)	{
    				pic.style.opacity=1
    				pic.style.filter="alpha(opacity=100)"
    				}
    
    	</script>
    </body>


  •  

    Posting Permissions

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