Question

118

Toggle images on click using jQuery

rated 0 times [ 122] [ 4] / answers: 1 / hits: 86332 / 10 Years ago, wed, december 3, 2014, 12:00:00

I have two images which I need to toggle on clicking on the image.

    <img id='arrowRotate' src='images/prof_arrow1.png' data-swap='images/prof_arrow.png' 

data-src='images/prof_arrow1.png' />

When the user click the image the src should get the value of data-swap and when you click again the src should change to data-src. This should keep happening just like a toggle. Any help appreciated.

$(#arrowRotate).click(function() {

    var swapImage = $(#arrowGrey).attr(data-swap);

    $(#arrowGrey).attr({

        'src': swapImage,

        id: 'arrowOrange'

    });

});

This is where I have got so far.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

justynkaina

Add To Favorites

Follow

Total Points: 742

Total Questions: 83

Total Answers: 102

Location: Hong Kong

Member since Tue, Oct 19, 2021

3 Years ago

answered 10 Years ago ernest · Accepted Answer

Based on my understanding from your question, Hope this is the one you expect,

$(#arrowRotate).click(function() { 

      var _this = $(this);

      var current = _this.attr(src);

      var swap = _this.attr(data-swap);     

     _this.attr('src', swap).attr(data-swap,current);   

});

DEMO Fiddle