For the picture, the change of the image is registered when you hover the cursor

<a href="" class="b-socials__link"><img src="images/icon_social-heart_big.png" onmouseover="this.src='images/icon_social-heart_small.png'" onmouseout="this.src='images/icon_social-heart_big.png'" alt=""></a>

Tell me how to rewrite this code on jQuery, so that the picture does not change when you hover and retract the cursor, but so that the images change each other at intervals when the mouse is over the picture?

    1 answer 1

     <script src='http://code.jquery.com/jquery-1.8.2.min.js'></script> <script> $(function() { $('img').hover(function() { var _this = this, images = _this.getAttribute('data').split(','); counter = 0; this.setAttribute('data-src', this.src); // _this.timer = setInterval(function() { if(counter > images.length) { counter = 0; } _this.src=images[counter]; counter++; }, 500); }, function() { this.src = this.getAttribute('data-src'); clearInterval(this.timer); }); }); </script> <img src='http://hashcode.ru/upfiles/logo.png' data='http://hashcode.ru/upfiles/logo.png,http://careers.hashcode.ru/images/vacancies_banner_head.png,http://meta.hashcode.ru/upfiles/logo_4.png'>
    • Many thanks for the help, only in the script I had to change if (counter> images.length) to if (counter> (images.length-1)), because otherwise I clicked three images, and I only have two)) and what do I need to add In this code, so that if you take away the mouse at the moment when there is a "clicked" picture, the original will automatically return? - Heidel
    • at the expense of odnushki yes, I forgot)) Regarding the question: definitely need to store the original value somewhere. Either we will remember it before substituting another src, or store it in image attributes. I would prefer the second method, it is easier. Those. when hovering (in the first function), we add an attribute to the image: this.setAttribute ('data-src', this.src); // when we move the mouse, update the src image to the link that is in the data-src, i.e. : this.src = this.getAttribute ('data-src'); If you do not understand how this works, then read: //javascript.ru/tutorial/object/thiskeyword is very useful - lampa
    • about this, I more or less imagine)) and you could not write the code that you need to make to the script to implement it, otherwise I don’t quite understand how to register it. - Heidel
    • one
      @Heidel, updated the post. - lampa
    • Ah, got it. thank you very much)) - Heidel