Toggle src-attribute on image

Question

Is there a way to toggle the src attribute of an image between two values when an anchor is clicked?

Like this:

$('a#some-anchor').click(function() {
// code here that toggles between two image src's e.g. "images/some-image1.jpg" and "images/some-image2.jpg"
});

score 8 · Accepted Answer · edited May 23 '17 at 12:25

8

$("img").bind("click", function() {
  var src = ($(this).attr("src") === "img1_on.jpg")
                ? "img2_on.jpg" 
                : "img1_on.jpg";
  $(this).attr("src", src);
});

Taken from here:

Changing the image source using jQuery

edited May 23 '17 at 12:25

Community

1
1

answered Jan 13 '11 at 10:16

benhowdle89

36,900
69
202
331

score 2 · Answer 2 · answered Jan 13 '11 at 10:16

Using internal data() function could work:

$('a#some-anchor').click(function() {
  var img = $(this);
  if ( img.data('active') ) {
    img.attr('src', 'images/some-image1.jpg');
    img.data('active', false);
  } else {
    img.attr('src', 'images/some-image2.jpg');
    img.data('active', true);
  }
});

score 2 · Answer 3 · answered Jan 13 '11 at 10:18

Don't know where you image are but:

$('a#some-anchor').click(function() {
    var img = $('selector');

    if (img.attr('src').match(/image1/)) {
        img.attr('src', 'images/some-image2.jpg');
    } else {
        img.attr('src', 'images/some-image1.jpg');
    }
});

score 1 · Answer 4 · answered Jan 13 '11 at 10:18

1

$('a#some-anchor').click(function() {
    var img = $('#yourIMG');

    var img1 = "images/some-image1.jpg";
    var img2 = "images/some-image2.jpg";

    img.attr('src', img.attr('src') == img1 ? img2 : img1);
});

answered Jan 13 '11 at 10:18

thirtydot

224,678
48
389
349

score 0 · Answer 5 · edited Jul 14 '16 at 22:39

Checkout this snippet:

var plus = 'https://d30y9cdsu7xlg0.cloudfront.net/png/5805-200.png';
var minus = 'https://d30y9cdsu7xlg0.cloudfront.net/png/5802-200.png';

$('#magic-toggle').click(function() {
  if ($('.fun-img').attr('src') === plus) {
    $('.fun-img').attr('src', minus);
  } else {
    $('.fun-img').attr('src', plus)
  }
})

.fun-img {
  width: 80px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/5805-200.png" class="fun-img" id="magic-toggle">

Toggle src-attribute on image

5 Answers5