最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

hover - Delay onmouseover javascript - Stack Overflow

programmeradmin3浏览0评论

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!

Share Improve this question edited Dec 3, 2012 at 18:24 user1524098 asked Dec 2, 2012 at 19:25 user1524098user1524098 611 silver badge6 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

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

发布评论

评论列表(0)

  1. 暂无评论