Changing the image source using jQuery

by

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') === "https://stackoverflow.com/questions/554273/img1_on.jpg")
            ? 'img2_on.jpg'
            : "https://stackoverflow.com/questions/554273/img1_on.jpg";
         $(this).attr('src', src);
    }
});

Leave a Comment