Changing hover image after repeated hovers using Jquery

Question

I am trying to change the src attribute in an img tag in html using jquery, I want scr attribute to change differently depending on the number of times the user has hovered over the img element.

My html is set up as follows:

<img id="element" src="img1.png">

My js/jQuery is set up as follows:

var count = 0;

if(count == 0){
        $("#element").hover(function(){
            count++;
            $("#element").attr("src","img2.png");
        }, function(){
            $("#element").attr("src","img1.png");
        });
} else if(count>=1){
        $("#element").hover(function(){
            count++;
            $("#element").attr("src","img3.png");
        }, function(){
            $("#element").attr("src","img1.png");
        });
}

The hover function on its own works fine, and hovering in and out will switch between two images. However, my goal is to make it switch to img2 in the first hover, and then img3 at the second hover, and thereafter. My hover function seems to work fine if I want it to hover between img1 and img2 or img 1 and img3, that is when I remove if statement and count variable.

If someone could help identify my problem please.

Answer 1

From what you've posted, if(count == 0) occurs in your setup code. None of your hover event handlers touch the value of count, so once the handlers are set (either to 1 and 2 or 1 and 3), they will never be changed. And since count is always zero when the handlers are added, you always get the first pair.

Instead, you should switch between the two images inside of your handler function, not in the code that assigns the handler.

Answer 2

Try creating array of strings containing img src , utilizing Array.prototype.reverse() to toggle images

    var imgs = ["img2.png", "img3.png"];
    $("#element").hover(function() {
      $(this).attr("src", imgs[0]);
      imgs.reverse()
    }, function() {
      $(this).attr("src", "img1.png");
    });

    var imgs = ["http://lorempixel.com/100/100/sports", "http://lorempixel.com/100/100/cats"];
    $("#element").hover(function() {
      $(this).attr("src", imgs[0]);
      imgs.reverse()
    }, function() {
      $(this).attr("src", "http://lorempixel.com/100/100/nature");
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img id="element" width="100px" src="http://lorempixel.com/100/100/nature" />

Answer 3

What about some simplicity?

var counter = 1;
$("#element").hover(function () {
    counter = (counter===3) ? 1 : (counter+1);
    $(this).attr("src", 'img'+counter+'.png');
}

Answer 4

Not sure if this will work just something I looked up but you can try it. Just add more variables to it.

jQuery(document).ready(function($) {

//rollover swap images with rel

var img_src = "";
var new_src = "";

$(".rollover").hover(function(){
 //mouseover

img_src = $(this).attr('src'); //grab original image

new_src = $(this).attr('rel'); //grab rollover image

$(this).attr('src', new_src); //swap images

$(this).attr('rel', img_src); //swap images

},
function(){
//mouse out

$(this).attr('src', img_src); //swap images

$(this).attr('rel', new_src); //swap images
});

Answer 5

You need to do the counter check within the hover handler

var counter = 0;
$("#element").hover(function() {
  $(this).attr("src", ++counter > 1 ? '//placehold.it/64X64/00ff00' : '//placehold.it/64X64/0000ff');
}, function() {
  $(this).attr("src", "//placehold.it/64X64/ff0000");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img id="element" src="//placehold.it/64X64/ff0000">

In your code the value of counter is checked only once on page load where the value of counter is always 0

Answer 6

How about this?

$(document).ready(function(){
    var count = 1;

    $("#element").hover(function() {

        count++;
       $(this).attr("src","img"+count+".png");

       if(count == 3){
        //Reset the count
        count = 0;
       }

    }, function() {
      $(this).attr("src", "img1.png");

    });
});