Time delay onmouseout

JavaScript
1

I have a drop down menu system, however at the moment when you accidently leave the drop-down, it disappears straight away. I would like there to be a half a second delay before it goes away, any idea how I might add this to the onmouseout function?

2

TO must be global

var TO;

the mouseout function

TO=setTimeout(‘obj.style.visibility=\‘hidden\’;’,500)

the mouseover function

clearTimeout(TO);

3

Thanks for your help. I found it a little confusing though, how do I put that into the html?

4

you had best post the menu you are using

5

The code:

<a href=“e-commerce” onmouseover=“MM_swapImage(‘overview’,‘’,‘images/buttons/overview_on.gif’,1);MM_showHideLayers(‘overviewnav’,‘’,‘show’)” onmouseout=“MM_swapImgRestore();MM_showHideLayers(‘overviewnav’,‘’,‘hide’)”><img src=“images/buttons/overview_off.gif” alt=“Overview” width=“97” height=“24” id=“overview” /></a>

Basically, I want a delay on:

onmouseout=“MM_showHideLayers(‘overviewnav’,‘’,‘hide’)”>

What’s the best way?

6

Is this dreamweaver’? if so best to get a better menu

but I have done this example


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
  <title></title>
<script language="JavaScript" type="text/javascript">
<!--

var Obj,TO;

function VWP_swapImage(id,x,img){
 Obj=document.getElementById(id);
 Obj.outimg=Obj.src;
 Obj.src=img;
}

function VWP_swapImgRestore(){
 Obj.src=Obj.outimg;
}

function VWP_showHideLayers(id,x,state){
 clearTimeout(TO);
 MObj=document.getElementById(id);
 if (state=='show'){
  MObj.style.visibility='visible';
 }
 else {
  TO=setTimeout('MObj.style.visibility=\\'hidden\\';',500);
 }
}

//-->
</script>

</head>

<body>
<a href="e-commerce"
onmouseover="VWP_swapImage('overview','','http://www.vicsjavascripts.org.uk/StdImages/Two.gif',1);VWP_showHideLayers('overviewnav','','show')"
onmouseout="VWP_swapImgRestore();VWP_showHideLayers('overviewnav','','hide')">
<img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" alt="Overview" width="97" height="24" id="overview" />
</a>
<div id="overviewnav" style="position:relative;width:100px;height:100px;background-color:red;"
onmouseover="VWP_showHideLayers('overviewnav','','show')"
onmouseout="VWP_showHideLayers('overviewnav','','hide')"
 ></div>
</body>

</html>

there are pleanty of tool tips available

one for starters http://www.vicsjavascripts.org.uk/SimplleTextPopUp//SimplleTextPopUp.htm

7

Thanks for your help vwphillips, I’m still having trouble with this. I’m trying to get a menu like that at http://www.truepresence.com, but my layers are overlapping because of the time delay.

What can I do?

8 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
  <title></title>
<script language="JavaScript" type="text/javascript">
<!--
// by Vic Phillips http://www.vicsJavaScripts.org.uk

var Obj,TO;

function VWP_swapImage(id,x,img){
 Obj=document.getElementById(id);
 Obj.outimg=Obj.src;
 Obj.src=img;
}

function VWP_swapImgRestore(){
 Obj.src=Obj.outimg;
}

function VWP_showHideLayers(id,obj,state,mess){
 clearTimeout(TO);
 MObj=document.getElementById(id);
 if (state=='show'){
  if (mess){
   MObj.removeChild(MObj.getElementsByTagName('DIV')[0]);
   mess=document.getElementById(mess).cloneNode(true);
   mess.removeAttribute('id');
   MObj.appendChild(mess);
  }
  if (obj){
   MObj.style.left=obj.offsetLeft+'px';
  }
  MObj.style.visibility='visible';
 }
 else {
  TO=setTimeout('MObj.style.visibility=\\'hidden\\';',500);
 }
}

//-->
</script>

</head>

<body>
<a href="e-commerce"
onmouseover="VWP_swapImage('overview','','http://www.vicsjavascripts.org.uk/StdImages/Two.gif',1);VWP_showHideLayers('overviewnav',this,'show','Mess1')"
onmouseout="VWP_swapImgRestore();VWP_showHideLayers('overviewnav',this,'hide')">
<img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" alt="Overview" width="97" height="24" id="overview" />
</a>
<a href="e-commerce"
onmouseover="VWP_swapImage('overview1','','http://www.vicsjavascripts.org.uk/StdImages/Two.gif',1);VWP_showHideLayers('overviewnav',this,'show','Mess2')"
onmouseout="VWP_swapImgRestore();VWP_showHideLayers('overviewnav',this,'hide')">
<img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" alt="overview1" width="97" height="24" id="overview1" />
</a>
<div id="overviewnav" style="position:relative;visibility:hidden;width:100px;height:100px;background-color:red;"
onmouseover="VWP_showHideLayers('overviewnav',null,'show')"
onmouseout="VWP_showHideLayers('overviewnav',null,'hide')"
 ><div></div></div>

<div  style="position:absolute;visibility:hidden;top:0px;left:0px;" >
<div id="Mess1" style="position:absolute:top:0px;left:0px;" >Message 1</div>
<div id="Mess2" style="position:absolute:top:0px;left:0px;" >Message 2</div>
<div id="Mess3" style="position:absolute:top:0px;left:0px;" >Message 3</div>
<div id="Mess4" style="position:absolute:top:0px;left:0px;" >Message 4</div>
</div>
</body>

</html>
9

Hi, thanks again for your help. I must be honest, I’m not too clever with javascript, and I’m having trouble working your example into the real thing.

Here’s the code:

<div id="nav"><a href="index.html" onmouseover="VWP_swapImage('home','','images/buttons/home_on.gif',1)" onmouseout="VWP_swapImgRestore()"><img src="images/buttons/home_off.gif" alt="Home" width="97" height="24" id="home" /></a><a href="e-commerce" onmouseover="VWP_swapImage('overview','','images/buttons/overview_on.gif',1);VWP_showHideLayers('overviewnav','','show')" onmouseout="VWP_swapImgRestore();VWP_showHideLayers('overviewnav','','hide')"><img src="images/buttons/overview_off.gif" alt="Overview" width="97" height="24" id="overview" /></a><a href="demo" onmouseover="VWP_swapImage('demo','','images/buttons/demo_on.gif',1);VWP_showHideLayers('demonav','','show')" onmouseout="VWP_swapImgRestore();VWP_showHideLayers('demonav','','hide')"><img src="images/buttons/demo_off.gif" alt="Demo" width="97" height="24" id="demo" /></a><a href="signup" onmouseover="VWP_swapImage('signup','','images/buttons/signup_on.gif',1)" onmouseout="VWP_swapImgRestore()"><img src="images/buttons/signup_off.gif" alt="Sign Up!" width="97" height="24" id="signup" /></a><a href="themall" onmouseover="VWP_swapImage('mall','','images/buttons/themall_on.gif',1)" onmouseout="VWP_swapImgRestore()"><img src="images/buttons/themall_off.gif" alt="The Mall" width="97" height="24" id="mall" /></a><a href="contact" onmouseover="VWP_swapImage('contact','','images/buttons/contact_on.gif',1)" onmouseout="VWP_swapImgRestore()"><img src="images/buttons/contact_off.gif" alt="Contact Us" width="99" height="24" id="contact" /></a></div>
  <div id="subnav">
    <div id="overviewnav" onmouseover="VWP_swapImage('overview','','images/buttons/overview_on.gif',1);VWP_showHideLayers('overviewnav','','show')" onmouseout="VWP_swapImgRestore();VWP_showHideLayers('overviewnav','','hide')">Message</div>
	<div id="demonav" onmouseover="VWP_swapImage('demo','','images/buttons/demo_on.gif',1);VWP_showHideLayers('demonav','','show')" onmouseout="VWP_swapImgRestore();VWP_showHideLayers('demonav','','hide')">message</div>
  </div>

Could you possibly show me how to get ‘overviewnav’ and ‘demonav’ working properly? I really appreciate this, by the way. :slight_smile:

10 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
  <title></title>
<script language="JavaScript" type="text/javascript">
<!--
// by Vic Phillips http://www.vicsJavaScripts.org.uk

var Obj,TO,MObj;

function VWP_swapImage(id,x,img){
return
 Obj=document.getElementById(id);
 Obj.outimg=Obj.src;
 Obj.src=img;
}

function VWP_swapImgRestore(){
return
 Obj.src=Obj.outimg;
}

function VWP_showHideLayers(id,obj,state,mess){
 clearTimeout(TO);
 MObj=document.getElementById(id);
 if (state=='show'){
  if (mess){
   MObj.removeChild(MObj.getElementsByTagName('DIV')[0]);
   mess=document.getElementById(mess).cloneNode(true);
   mess.removeAttribute('id');
   MObj.appendChild(mess);
  }
  if (obj){
   MObj.style.left=(zxcPos(obj)[0])+'px';
   MObj.style.top=(zxcPos(obj)[1]+30)+'px';
  }
  MObj.style.visibility='visible';
 }
 else {
  TO=setTimeout('MObj.style.visibility=\\'hidden\\';',500);
 }
}

function zxcPos(zxc){
 zxcl=zxc.offsetLeft;
 zxct=zxc.offsetTop;
 while(zxc.offsetParent!=null){
  zxcp=zxc.offsetParent;
  zxcl+=zxcp.offsetLeft;
  zxct+=zxcp.offsetTop;
  zxc=zxcp;
 }
 return [zxcl,zxct];
}

//-->
</script>

</head>

<body>
<div id="nav" style="position:relative;" >
<a style="position:relative;" href="index.html"
onmouseover="VWP_swapImage('home','','images/buttons/home_on.gif',1)"
onmouseout="VWP_swapImgRestore()">
<img src="images/buttons/home_off.gif" alt="Home" width="97" height="24" id="home" />
</a>
<a style="position:relative;" href="e-commerce"
onmouseover="VWP_swapImage('overview','','images/buttons/overview_on.gif',1);VWP_showHideLayers('overviewnav',this,'show','Mess1')"
onmouseout="VWP_swapImgRestore();VWP_showHideLayers('overviewnav','','hide')">
<img src="images/buttons/overview_off.gif" alt="Overview" width="97" height="24" id="overview" />
</a>
<a href="demo" style="position:relative;"
onmouseover="VWP_swapImage('demo','','images/buttons/demo_on.gif',1);VWP_showHideLayers('overviewnav',this,'show','Mess2')"
onmouseout="VWP_swapImgRestore();VWP_showHideLayers('overviewnav','','hide')">
<img src="images/buttons/demo_off.gif" alt="Demo" width="97" height="24" id="demo" />
</a>
<a href="signup" style="position:relative;"
 onmouseover="VWP_swapImage('signup','','images/buttons/signup_on.gif',1)"
 onmouseout="VWP_swapImgRestore()">
<img src="images/buttons/signup_off.gif" alt="Sign Up!" width="97" height="24" id="signup" />
</a>
<a href="themall"
onmouseover="VWP_swapImage('mall','','images/buttons/themall_on.gif',1)"
onmouseout="VWP_swapImgRestore()">
<img src="images/buttons/themall_off.gif" alt="The Mall" width="97" height="24" id="mall" />
</a>
<a href="contact"
onmouseover="VWP_swapImage('contact','','images/buttons/contact_on.gif',1)"
onmouseout="VWP_swapImgRestore()">
<img src="images/buttons/contact_off.gif" alt="Contact Us" width="99" height="24" id="contact" />
</a>
</div>

<div id="overviewnav" style="position:absolute;visibility:hidden;width:100px;height:20px"
onmouseover="VWP_showHideLayers('overviewnav',null,'show')"
onmouseout="VWP_showHideLayers('overviewnav',null,'hide')"
 ><div></div></div>

<div  style="position:absolute;visibility:hidden;top:0px;left:0px;" >
<div id="Mess1" style="position:absolute;top:0px;left:0px;width:100px;background-color:red;text-align:center;" >Message 1<br>Message 1<br>Message 1<br>Message 1</div>
<div id="Mess2" style="position:absolute;top:0px;left:0px;width:200px;background-color:blue;text-align:center;" >Message 2</div>
<div id="Mess3" style="position:absolute;top:0px;left:0px;" >Message 3</div>
<div id="Mess4" style="position:absolute;top:0px;left:0px;" >Message 4</div>
</div>

There is only 'overviewnav' the content size color etc are changed by the Message <DIV><br>

http://www.sitepoint.com/forums/showthread.php?t=312597
</body>

</html>
11

Thanks so much for this my friend, it means a lot. I’m nearly there now, however, with that last lot of code, the rollovers don’t work. Any idea what the problem could be?

12 

function VWP_swapImage(id,x,img){
//return
 Obj=document.getElementById(id);
 Obj.outimg=Obj.src;
 Obj.src=img;
}

function VWP_swapImgRestore(){
// return
 Obj.src=Obj.outimg;
}

left the returns in by mistake

13

Perfect, thanks a lot. The only problem I’m left with now is that the absolutely positioned layers appear further down in Firefox than in IE, any ideas?

Thanks a lot. Again. :slight_smile:

14 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
  <title></title>
<script language="JavaScript" type="text/javascript">
<!--
// by Vic Phillips http://www.vicsJavaScripts.org.uk

var Obj,TO,MObj;

function VWP_swapImage(id,x,img){
 Obj=document.getElementById(id);
 Obj.outimg=Obj.src;
 Obj.src=img;
}

function VWP_swapImgRestore(){
 Obj.src=Obj.outimg;
}

function VWP_showHideLayers(id,obj,state,mess){
 clearTimeout(TO);
 MObj=document.getElementById(id);
 if (state=='show'){
  if (mess){
   MObj.removeChild(MObj.getElementsByTagName('DIV')[0]);
   mess=document.getElementById(mess).cloneNode(true);
   mess.removeAttribute('id');
   MObj.appendChild(mess);
  }
  if (obj){
   if (document.all){ // for IE
    MObj.style.left=(zxcPos(obj)[0])+'px';
    MObj.style.top=(zxcPos(obj)[1]+30)+'px';
   }
   else { // for most other browsers
    MObj.style.left=(zxcPos(obj)[0])+'px';
    MObj.style.top=(zxcPos(obj)[1]+30)+'px';
   }
  }
  MObj.style.visibility='visible';
 }
 else {
  TO=setTimeout('MObj.style.visibility=\\'hidden\\';',500);
 }
}

function zxcPos(zxc){
 zxcl=zxc.offsetLeft;
 zxct=zxc.offsetTop;
 while(zxc.offsetParent!=null){
  zxcp=zxc.offsetParent;
  zxcl+=zxcp.offsetLeft;
  zxct+=zxcp.offsetTop;
  zxc=zxcp;
 }
 return [zxcl,zxct];
}

//-->
</script>

</head>

<body>
<div id="nav" style="position:relative;" >
<img src="http://www.vicsjavascripts.org.uk/StdImages/Zero.gif" alt="Home" width="97" height="24" border="1" id="home"
 onmouseover="VWP_swapImage('home','','http://www.vicsjavascripts.org.uk/StdImages/Two.gif',1)"
 onmouseout="VWP_swapImgRestore()"
 onclick="window.top.location=index.htm"
/>
<img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" alt="Overview" width="97" height="24" border="1" id="overview"
onmouseover="VWP_swapImage('overview','','http://www.vicsjavascripts.org.uk/StdImages/Three.gif',1);VWP_showHideLayers('overviewnav',this,'show','Mess1')"
onmouseout="VWP_swapImgRestore();VWP_showHideLayers('overviewnav','','hide')"
 onclick="window.top.location=e-commerce.htm"
/>
<img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" alt="Demo" width="97" height="24" border="1" id="demo"
onmouseover="VWP_swapImage('demo','','http://www.vicsjavascripts.org.uk/StdImages/Two.gif',1);VWP_showHideLayers('overviewnav',this,'show','Mess2')"
onmouseout="VWP_swapImgRestore();VWP_showHideLayers('overviewnav','','hide')"
 onclick="window.top.location=demo.htm"
 />
<img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" alt="Sign Up!" width="97" height="24" border="1" id="signup"
 onmouseover="VWP_swapImage('signup','','http://www.vicsjavascripts.org.uk/StdImages/Three.gif',1)"
 onmouseout="VWP_swapImgRestore()"
 onclick="window.top.location=signup.htm"
 />
<img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" alt="The Mall" width="97" height="24" border="1" id="mall"
onmouseover="VWP_swapImage('mall','','http://www.vicsjavascripts.org.uk/StdImages/Four.gif',1)"
onmouseout="VWP_swapImgRestore()"
onclick="window.top.location=themall.htm"
/>
<img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" alt="Contact Us" width="99" height="24" border="1" id="contact"
onmouseover="VWP_swapImage('contact','','http://www.vicsjavascripts.org.uk/StdImages/Five.gif',1)"
onmouseout="VWP_swapImgRestore()"
onclick="window.top.location=contact.htm"
/>
</div>

<div id="overviewnav" style="position:absolute;visibility:hidden;width:100px;height:20px"
onmouseover="VWP_showHideLayers('overviewnav',null,'show')"
onmouseout="VWP_showHideLayers('overviewnav',null,'hide')"
 ><div></div></div>

<div  style="position:absolute;visibility:hidden;top:0px;left:0px;" >
<div id="Mess1" style="position:absolute;top:0px;left:0px;width:100px;background-color:red;text-align:center;" >Message 1<br>Message 1<br>Message 1<br>Message 1</div>
<div id="Mess2" style="position:absolute;top:0px;left:0px;width:200px;background-color:blue;text-align:center;" >Message 2</div>
<div id="Mess3" style="position:absolute;top:0px;left:0px;" >Message 3</div>
<div id="Mess4" style="position:absolute;top:0px;left:0px;" >Message 4</div>
</div>

border size inclusion is differed between IE and most browsers,<br>
additional code added so you can adjust manually<br>
<br>
also tidied the HTML a bit<br>
http://www.sitepoint.com/forums/showthread.php?t=312597
</body>

</html>
15

Thanks again Vic, my only concern about the last code is that it wouldn’t be search engine friendly, would it? Why can the buttons not be part of an <a>?

16

all according on your priorities, code will work with either HTML

17

Hi Vic

This might be a shot in the dark, but I’ll try anyway. Can you possibly extend on this code to included a third sub level to show and hide off a link in the second level?

thanks