Geek asks and answers

Continuous change of image when the mouse hovers

I have an idea, but I'm not quite sure how to implement it.

I want to have an image that, when the mouse hangs over it, quickly changes a random image and quickly moves to a new random image. it keeps going until you pull out the mouse and then stops at the last image. when you flip it again, it should start exchanging again. it would be like a slot machine effect. I do not need them to spin around, just change the place.

I really could use some pointers on how to do this. I don’t know where to start. I know the basics of how to change the background image of a div on a mouse, but that’s about all I know.

thank

EDIT: http://cargocollective.com/ Look at the Cargo logo in the upper left corner of the screen. what is the effect I'm looking for, except that it will stop at the last image instead of resetting.

-1
source share
2 answers

JQuery .hover()can use a function for states mouseoverand mouseout, therefore, it is trivial to do something like

HTML:

<img id="swap" src="http://lorempixum.com/200/200/sports" alt=""/>

JQuery

var images = ["http://lorempixum.com/200/200/sports",
              "http://lorempixum.com/200/200/food",
              "http://lorempixum.com/200/200/abstract",
              "http://lorempixum.com/200/200/people",
              "http://lorempixum.com/200/200/technics",
              "http://lorempixum.com/200/200/city"
             ],//store a bunch of images in an array
    i = 0,//counter
    $swap = $("#swap"),//only get the object once
    swapper;//setup a var for setInterval

function swapImg(){
    i = i % images.length;//keep i under the array length
    $swap.attr("src",images[i]);// change image src        
    i++;
}

$swap.hover(function(){//mouseover
    swapper = setInterval(swapImg,10);//call function every 10ms
},function(){//mouseout
    clearInterval(swapper);//stop calling the image swapper
});​

here is a demo

I use http://lorempixel.com/ for dummy images, but every time you request it, they return a random image, so this displays more images than in the array, and this sometimes makes funky overlays work.

+2
source

jQuery , mouseover A, B, A .. mouseout .

+1

More articles:


All Articles