Changing image src onClick with jQuery

Question

I am using this HTML on my site: <a href="#1" id="slick-toggle"><img src="img1.jpg"/></a>

When I click this link, I would like to change the image src to img2.jpg. And revert back to img1.jpg when clicked again & so on. Can someone explain how I do this using jQuery?

Here is my existing jQuery if this helps:

$(document).ready(function() {     
  $('#slick-toggle').click(function() {
    $('#slickbox').toggle(400);
    return false;
  });
});

Many thanks for any pointers with this :-)

thecodeparadox · Accepted Answer · 2012-12-15 18:15:33Z

8

$(document).ready(function() {     
  $('#slick-toggle').click(function() {
    $('img', this).attr('src', function(i, oldSrc) {
        return oldSrc == 'img1.jpg' ? 'img2.jpg' : 'img1.jpg';
    });
    $('#slickbox').toggle(400);
    return false;
  });
});

answered Dec 15, 2012 at 18:15

thecodeparadox

87.2k22 gold badges143 silver badges164 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

pocesar Over a year ago

never knew you could pass a function as the second parameter for jQuery, amazing

michaelmcgurk Over a year ago

Only slight problem here is @thecodeparadox is that after the initial switch, it doesn't switch back again. So it goes from img1 to img2 and then doesn't go back to img again. Does that make any sense?

michaelmcgurk Over a year ago

Sorry, my fault, must have been a typo. Works now. Many thanks.

chipmunk · Accepted Answer · 2012-12-15 18:20:32Z

1

You need to find the image inside since your click handler is on the that wraps it, like this:

$('a#slick-toggle').click(function() {
  var img = $('#share')[0], isSwap = "True";
  img.src = isSwap ? img.src.replace("_img1","_img2") : img.src.replace("_img2","_img1");
  $('.img-swap').toggleClass("on");
  $('#atBox').toggle(100);
  return false;
});

answered Dec 15, 2012 at 18:20

chipmunk

9809 silver badges20 bronze badges

Comments

Ashish Panwar · Accepted Answer · 2012-12-15 18:29:57Z

1

Use this function for this:

$('#mylink').toggle(
     function(){
          $(this).attr('src','img2.jpg');
     },
     function(){
          $(this).attr('src','img3.jpg');
     }
// and so on..
);

you can add more function in it...

answered Dec 15, 2012 at 18:29

Ashish Panwar

1,1283 gold badges11 silver badges18 bronze badges

Collectives™ on Stack Overflow

Changing image src onClick with jQuery

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related