Changing the image source using jQuery

image, javascript, jquery

Solution

You can use jQuery's attr() function. For example, if your `img` tag has an `id` attribute of 'my_image', you would do this:

<img id="my_image" src="first.jpg" alt="Insert link 1 alt text here" />

Then you can change the `src` of your image with jQuery like this:

$("#my_image").attr("src","second.jpg");

To attach this to a `click` event, you could write:

$('#my_image').on({
    'click': function(){
        $('#my_image').attr('src','second.jpg');
    }
});

To rotate the image, you could do this:

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

Problem

My DOM looks like this: ``` <div id="d1"> <div class="c1"> <a href="#"><img src="img1_on.gif"></a> <a href="#"><img src="img2_on.gif"></a> </div> </div> ``` When someone clicks on an image, I want the image src to change to `<img src="imgx_off.gif">` where `x` represents the image number 1 or 2. Is this possible or do I have to use CSS to change the images?

Original source