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 9 of 9
  1. #1
    Regular Coder tpeck's Avatar
    Join Date
    Oct 2002
    Location
    Sydney, Australia
    Posts
    884
    Thanks
    53
    Thanked 6 Times in 5 Posts

    toggling an image onclick in jquery

    At present I have some very old code (I needn't show) which works onmouseover, but I think I want to do this with jquery and change the thing to an onclick toggle.

    Basically I have in the html:

    Code:
    <a href="#" onmousedown="on('image1'); onmouseover="off('image1');">
    <img src="img/answers.png" name="image1" width="355" height="124"></a>
    I have up to 4 instances of such in the html: image1, image2, etc.

    Can it be done with jquery? I saw something similar somewhere but I've lost it.
    The difference between genius and stupidity is that genius has its limits. (Albert Einstein)

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,692
    Thanks
    25
    Thanked 657 Times in 656 Posts
    jquery is javascript, so yes this can be done. What do you want done with a click?
    If you make the image go away by clicking on it how are you going to get it back?
    This will do it, but you might have add a border to see where to click once the image is gone.
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Title of the document</title>
    </head>
    
    <body>
    <div id="pic" style="width:355px;height:124px;border:1px solid black;">
    <img src="img/answers.png" id="image1" width="355" height="124" alt="This was an image" style="display:block;"></div>
    
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    	$("#pic").click(function(){
    		$("#image1").toggle();
    	});
    });
    </script>
    </body>
    </html>
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #3
    Regular Coder tpeck's Avatar
    Join Date
    Oct 2002
    Location
    Sydney, Australia
    Posts
    884
    Thanks
    53
    Thanked 6 Times in 5 Posts
    Oh right - I just want to toggle back and forth between two existing images.

    But, as I said I have up to four instances of this on a page:

    image1.on => image1.off => image1.on etc.

    image2.on => image2.off => image2.on etc.

    image3.on => image3.off => image3.on etc.

    image4.on => image4.off => image4.on etc.
    The difference between genius and stupidity is that genius has its limits. (Albert Einstein)

  • #4
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,692
    Thanks
    25
    Thanked 657 Times in 656 Posts
    A simple toggle between two images:

    Code:
    <img src="images/1.jpg" id="image1" width="355" height="124" alt="This was an image" style="display:block;">
    
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    	$("#image1").click(function(){
    		if($("#image1").attr("src") == "images/1.jpg"){
    			$("#image1").attr("src", "images/2.jpg");
    		}else{
    			$("#image1").attr("src", "images/1.jpg");
    		}
    	});
    });
    </script>
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • Users who have thanked sunfighter for this post:

    tpeck (07-10-2013)

  • #5
    Regular Coder tpeck's Avatar
    Join Date
    Oct 2002
    Location
    Sydney, Australia
    Posts
    884
    Thanks
    53
    Thanked 6 Times in 5 Posts
    That works and I thank you very much for it.

    I don't wish to appear ungrateful (far from it!), but that's an awful lot of code for a few image swaps.

    Is there not perhaps a way to condense it?

    Code:
    // toggle images    
        $(document).ready(function(){
    	$("#image1").click(function(){
    		if($("#image1").attr("src") == "../../img/answers(big).png"){
    			$("#image1").attr("src", "../../img/b1a(AC)ans.png");
    		}else{
    			$("#image1").attr("src", "../../img/answers(big).png");
    		}
    			});
    	$("#image2").click(function(){
    		if($("#image2").attr("src") == "../../img/answers(big).png"){
    			$("#image2").attr("src", "../../img/b1b(AC)ans.png");
    		}else{
    			$("#image2").attr("src", "../../img/answers(big).png");
    		}
    			});
    	$("#image3").click(function(){
    		if($("#image3").attr("src") == "../../img/answers(biggest1).png"){
    			$("#image3").attr("src", "../../img/b1c(AC)ans.png");
    		}else{
    			$("#image3").attr("src", "../../img/answers(biggest1).png");
    		}
    			});
    	$("#image4").click(function(){
    		if($("#image4").attr("src") == "../../img/answers(biggest1).png"){
    			$("#image4").attr("src", "../../img/b1d(AC)ans.png");
    		}else{
    			$("#image4").attr("src", "../../img/answers(biggest1).png");
    		}		
    	});
    I suppose not given the image names have to be written...
    The difference between genius and stupidity is that genius has its limits. (Albert Einstein)

  • #6
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,692
    Thanks
    25
    Thanked 657 Times in 656 Posts
    This is a little shorter, but you might like the layout a little better
    Code:
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    	$("#image1, #image2, #image1, #image3, #image4").click(function(){
    		switch(this.id)
    		{
    		case 'image1':
    		   _(this.id,"../../img/answers(big).png","../../img/b1a(AC)ans.png");
    		   break;
    		case 'image2':
    		  _(this.id,"../../img/answers(big).png","../../img/b1b(AC)ans.png");
    		  break;
    		case 'image3':
    		  _(this.id,"../../img/answers(biggest1).png","../../img/b1c(AC)ans.png");
    		  break;
    		case 'image4':
    		  _(this.id,"../../img/answers(biggest1).png","../../img/b1d(AC)ans.png");
    		  break;
    		}
    	});
    
    	function _(id,main, alt){
    		if($("#"+id).attr("src") == main) $("#"+id).attr("src", alt);
    			else $("#"+id).attr("src", main);
    	}
    });
    </script>
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #7
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,692
    Thanks
    25
    Thanked 657 Times in 656 Posts
    You could also use the onclick in the images and call the last function. That would be shorter
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #8
    Regular Coder tpeck's Avatar
    Join Date
    Oct 2002
    Location
    Sydney, Australia
    Posts
    884
    Thanks
    53
    Thanked 6 Times in 5 Posts
    It's very neat and tidy - all in in one place - and 7 lines shorter.

    Perfect! Solved. Thanks!

    Sorry, I should have asked - if it is just one case, is this OK without the break?

    Code:
    $(document).ready(function(){
    	$("#image1").click(function(){
    		switch(this.id)
    		{
    		case 'image1':
    			_(this.id,"../../img/answers.png","../../img/b2(AC)ans.png");
    //		  break;
    		}
    	});
    	function _(id,main, alt){
    		if($("#"+id).attr("src") == main) $("#"+id).attr("src", alt);
    			else $("#"+id).attr("src", main);
    	}
    });
    Last edited by tpeck; 07-10-2013 at 11:34 PM.
    The difference between genius and stupidity is that genius has its limits. (Albert Einstein)

  • #9
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,692
    Thanks
    25
    Thanked 657 Times in 656 Posts
    If it is just one case, you don't need a switch.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."


  •  

    Posting Permissions

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