title: Delay onmouseover javascript
body: <p>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.</p>
  
  <p>this is the js i use for toggling the div contents:</p>
  
  <pre><code>function showHideDivs(indx){
  hideDivs();
  oShowHideDivs[indx].style.display = 'block';
  }
  
  function hideDivs(){
  for(i=0; i &lt; 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 &lt; oMap.areas.length; i++){
      oMap.areas[i].indx = i;
      oMap.areas[i].onmouseover=function(){
          showHideDivs(this.indx);
      }
    }
  }
  </code></pre>
  
  <p>so how do i implement the delay and where? thx in advance!
  jan</p>
  
  <p>EDIT:
      i used this approach now:</p>
  
  <pre><code>oMap.areas[i].onmouseover=function(){
  var area=this;
  var delay=setTimeout(function(){showHideDivs(area.indx);},100);
  area.onmouseout=function(){clearTimeout(delay);};
  }
  </code></pre>
  
  <p>seemed the easiest to me. thx for the hint!</p>