javascript interval stop on moueover

Question

I could not figure out how to stop image intervals when the mouse is over the image.

var myImage = document.getElementById("world");

var imageArray = ["imgs/worldGray.png","imgs/worldGreen.png","imgs/worldPink.png", "imgs/worldYellow.png", "imgs/world.png"];//html picture add here
var imageIndex=0;


function changeImage(){
    myImage.setAttribute("src",imageArray[imageIndex]);
    imageIndex++;
    if(imageIndex >=imageArray.length){
        imageIndex =0;
    }
}
var intervalHandle=setInterval(changeImage,5000);
// the problem is in the below fucntions
myImage.onmouseover = function(){
    clearInterval(intervalHandle);
}
myImage.onmouseout = function(){
    setInterval(intervalHandle);
}

Answer 1

I'm not shure why you are setting the interval again using the "intervalHandler", and don't think there is such a use.

http://www.w3schools.com/jsref/met_win_setinterval.asp

You should write

intervalHandle=setInterval(changeImage,5000);

inside onmouseout handler to make it run correctly.

Answer 2

Try putting your script at the bottom of page. It worked for me