JavaScript Forum

**hiptobesquare** · 09:20 AM

Hi.

I have an image button on my site which im trying to manipulate so that when the mouse runs over it a box will appear with two links in it. It is basically a select menu that drops down from the image. If anyone knows a better way to achieve this than my current approach please let me know. I have created an onMouseOver event which will show and hide a <div> where my 2 hyperlinks are stored. It works fine but i need to put a 2 or 3 second timer on it so that it doesnt disappear as soon as the user runs the mouse away from the button. Can anyone show me how id do this please?

this is what i have so far:

This exact page of code can be viewed at www.thedoorstop.co.uk/index3.php

HTML Code:

<html>
<head>
<script>
<!--
function describeHowto(){howtoselected.style.visibility='visible'; return true; }
function clean()      {howtoselected.style.visibility='hidden'; return true; }
//--> 
</script>
</head>
<body>
<a href="howto.php"   
onMouseOver="describeHowto();"              
onMouseOut="clean();">
<img src="http://www.webmaster-talk.com/images/howto_button_white.gif"    width="102" height"25" border="">
</a>
  
<DIV ID='howtoselected' style='visibility: hidden;' >
<table bordercolor='#B90314' border='1'>
  <tr>
    <td>
    <a href='howtosliding.php'><span id='normal'>Sliding</span></a>
    </td>
  </tr>
  <tr>
    <td>
    <a href='howtohinged.php'><span id='normal'>Hinged</span></a>
    </td>
  </tr>
</table>
</DIV>

	
  </body>
</html>

**funkdaddu** · 03-01-2006, 01:59 AM

Take a look at this and let me know if you get it:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

	<head>
		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
		<title>Untitled Page</title>
		<style type="text/css" media="screen"><!--
#layer1  { background-color: #ccc; visibility: hidden; position: absolute; top: 37px; left: 6px; width: 139px; height: 100px }
--></style>
		<script type="text/javascript"><!--
function ShowMenu() {
	document.getElementById("layer1").style.visibility = "visible";
}

function HideAll() {
	document.getElementById("layer1").style.visibility = "hidden";
}

function startCount() {
	the_timeout = setTimeout('HideAll()', 2500);
}

//-->
</script>
	</head>

	<body bgcolor="#ffffff">
		<div id="layer1" onmouseover="ShowMenu();clearTimeout(the_timeout)" onmouseout="startCount();">Hello I'm a dropdown</div>
		<a onmouseover="ShowMenu();clearTimeout(the_timeout)" onmouseout="startCount();" href="#">Mouse Over Me</a></body>

</html>

if the cursor is over either of the link or the dropdown it shows the box, if you exit it waits 2.5 seconds then hides it, but if in that time you move back over, it clears the timer.

**hiptobesquare** · 03-01-2006, 08:36 AM

That looks perfect. Il have a play around with it after work and make it suit my page.

Thanks very much