html - Onmouseover and timeout on javascript - Stack Overflow

admin管理员组

文章数量:1331849

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?

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?

• javascript
• html
• settimeout
• onmouseover

Share Improve this question Follow asked Dec 3, 2011 at 18:52 itzzziiikitzzziiik 1311 silver badge33 bronze badges 3

• the easier way to do this would be using jQuery, think about retagging the question. and also please state where are the other pictures ing from? – alonisser Commented Dec 3, 2011 at 19:02
• @alonisser - While it's true it might make it easier, we shouldn't force the OP's hand on what s/he wants to use. It would seem unnecessary to include 30K of library code for something that can be written in about 10 lines of plain ol' JavaScript. – Rob Hruska Commented Dec 3, 2011 at 19:05
• 3 @alonisser - You don't need jQuery, it's really not that difficult without it, in plain Javascript. – Jared Farrish Commented Dec 3, 2011 at 19:05

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

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 );
};

Here's a link to a quick solution on JsFiddle: http://jsfiddle/jJBEu/2/

var img = document.getElementById('me').getElementsByTagName('img')[0],
    index = 0,
    sources = [
        'http://icons.iconarchive./icons/iconka/social-treat/128/yumtube-icon.png',
        'http://icons.iconarchive./icons/iconka/social-treat/128/sweeter-icon.png',
        'http://icons.iconarchive./icons/iconka/social-treat/128/facebow-icon.png'
    ],
    timer;

img.addEventListener('mouseover', swapImages, false);
img.addEventListener('mouseout', function(){
    clearTimeout(timer);
    img.src = sources[0];
}, false);

function swapImages(event, setindex){
    index = index == (sources.length - 1) ? 0 : index + 1;
    timer = setTimeout(function(){
        img.src = sources[index];
        swapImages();
    }, 3000);
}

Edited to fix a dumb mistake where I was checking array index against length without subtracting 1.

html:

<img src="Me.JPG" alt="Me" width="450" height="450" alt="picture" align="right"
 onmouseover="animate(this)" onmouseout="stopanimation()" />

javascript:

/* globals */
var animTimer = null;
var animImg = null; 
var images = [new Image(), new Image(), new Image(), new Image(), new Image(),new Image()];
var imgIndex = 0;    

/* pre-load images in browser cash */
images[0].src = "Me.JPG";
images[1].src = "anim1.gif";
images[2].src = "anim2.gif";
images[3].src = "anim3.gif";
images[4].src = "anim4.gif";
images[5].src = "anim5.gif";

/* animation  */
function animate(img){
   if (typeof img != 'undefined'){animImg = img;}

   imgIndex += 1;
   if (imgIndex>images.length-1){imgIndex=1;}

   animImg.src=images[imgIndex].src; 
   animTimer = setTimeout(animate, 3000);
}

function stopanimation(){
   clearInterval(animTimer);
   animImg.src = images[0].src; 
}

Something like, just give the img an id of myImg (or whatever you want):

var img_arr = ["img1.png", "img2.png", "img3.png"],
    img_index = 0,
    interval_id = 0,
    div = document.getElementById("me"),
    img = document.getElementById("myImg");

div.onmouseover = function () {
    interval_id = window.setInterval(function () {
        if (img_index === (img_arr.length - 1)) {
            img_index = 0;
        }
        img.src = img_arr[img_index++];
    }, 3000);
};

div.onmouseout = function () {
    window.clearInterval(interval_id);
};

本文标签： htmlOnmouseover and timeout on javascriptStack Overflow