hover - Delay onmouseover javascript - Stack Overflow

admin管理员组

文章数量:1328000

im new to most web dev stuff so im kindly asking you for some support. i have an image map in which i have assigned several areas triggering different contents in a separate div. i would now like to add a delay to the onmouseover trigger so that the content in the div is only updated if the user positions the curser on the area instead of accidentally hovering over it.

this is the js i use for toggling the div contents:

function showHideDivs(indx){
hideDivs();
oShowHideDivs[indx].style.display = 'block';
}

function hideDivs(){
for(i=0; i < oShowHideDivs.length; i++){
    oShowHideDivs[i].style.display = 'none';
}
}

window.onload=function(){
oShowHideDivs = document.getElementById('container').getElementsByTagName('div');
var oMap = document.getElementById('myMap');
for(i=0; i < oMap.areas.length; i++){
    oMap.areas[i].indx = i;
    oMap.areas[i].onmouseover=function(){
        showHideDivs(this.indx);
    }
  }
}

so how do i implement the delay and where? thx in advance! jan

EDIT: i used this approach now:

oMap.areas[i].onmouseover=function(){
var area=this;
var delay=setTimeout(function(){showHideDivs(area.indx);},100);
area.onmouseout=function(){clearTimeout(delay);};
}

seemed the easiest to me. thx for the hint!

im new to most web dev stuff so im kindly asking you for some support. i have an image map in which i have assigned several areas triggering different contents in a separate div. i would now like to add a delay to the onmouseover trigger so that the content in the div is only updated if the user positions the curser on the area instead of accidentally hovering over it.

this is the js i use for toggling the div contents:

function showHideDivs(indx){
hideDivs();
oShowHideDivs[indx].style.display = 'block';
}

function hideDivs(){
for(i=0; i < oShowHideDivs.length; i++){
    oShowHideDivs[i].style.display = 'none';
}
}

window.onload=function(){
oShowHideDivs = document.getElementById('container').getElementsByTagName('div');
var oMap = document.getElementById('myMap');
for(i=0; i < oMap.areas.length; i++){
    oMap.areas[i].indx = i;
    oMap.areas[i].onmouseover=function(){
        showHideDivs(this.indx);
    }
  }
}

so how do i implement the delay and where? thx in advance! jan

EDIT: i used this approach now:

oMap.areas[i].onmouseover=function(){
var area=this;
var delay=setTimeout(function(){showHideDivs(area.indx);},100);
area.onmouseout=function(){clearTimeout(delay);};
}

seemed the easiest to me. thx for the hint!

• javascript
• hover
• onmouseover

Share Improve this question Follow edited Dec 3, 2012 at 18:24 user1524098 asked Dec 2, 2012 at 19:25 user1524098user1524098 6111 silver badge66 bronze badges 1

• Would you be open to using jQuery? Check out this question and this jsfiddle. – rosshamish Commented Dec 2, 2012 at 19:30

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

The easiest way is to include a timeout on mouseover, and clear it on mouseout.

oMap.areas[i].onmouseover=function(){
    var area=this;
    var delay=setTimeout(function(){showHideDivs(area.indx);},100);
    area.onmouseout=function(){clearTimeout(delay);};
}

For more plex scenarios, use a plugin like hoverintent.

You need to use setTimeout() to call your function showHideDivs() after a certain delay. And you stop this function from being called if the user moves its mouse before the end of your delay.

Look here for a concrete example : https://stackoverflow./a/6231142/1606729

本文标签： hoverDelay onmouseover javascriptStack Overflow