Question

I have this id in my html code:

<div id="me">
<img src="Me.JPG" alt="Me" width="450" height="450" alt="picture" align="right"/>
</div>

how can i change the picture every 3 seconds once the mouse is over the picture,

and to go back to the original picture once the mouse is out?

Answer 1

You can create a function that will change the image every 3 seconds. Then, when you mouse over the image, call the function and start a timer. When the mouse leaves the image, clear the timer.

var img = document.getElementById( "me" ).getElementsByTagName( "img" )[0];
var images = ["Me.JPG", "new image path", "..."];
var i = 1;
var timer;

function change() {
    img.src = images[i];
    if ( ++i >= images.length ) {
        i = 0;
    }
    timer = setTimeout( change, 3000 );
}

img.onmouseover = function() {
    timer = setTimeout( change, 3000 );
};

img.onmouseout = function() {
    img.src = images[0];
    clearTimeout( timer );
};