imagemap dropdown menus

[wbodger]

OK, I am (slowly it seems) getting a handle on CSS, but this time I am using some JavaScript interaction and I am stumped. What I have: an imagemap with 3 fly-out drop down menus; going from one menu anchor to another closes the first menu, but if I just go off of the list without going to another hotspot, then the last menu that was there stays there. And wherever I out an onMouseout event, it closed before I could get to the items in the drop down.

Here is a page with 3 different versions (one on each drop down).

http://www.ycmhome.org/index_new.html

<div id="navheader"><img src="images/nav_header.jpg" alt="YCM Youth Conference Ministries Information" width="777" height="96" border="0" usemap="#Map">
	<div id="sonservants" STYLE="visibility:hidden; WIDTH:83px; BACKGROUND-COLOR:#e0d6ca;">
		<ul style="PADDING-LEFT:2px; PADDING-BOTTOM:2px; PADDING-TOP:2px; LIST-STYLE-TYPE:none;  margin-left:0px; text-align:left; margin-top:0px; margin-bottom:0px;">
			<li><a class="menu" href="">SS Schedule</a>
			<li><a class="menu" href="">FAQs</a>
			<li><a class="menu" href="">Downloads</a>
			<li><a class="menu" href="">Photos</a>
			<li><a class="menu" href="">Videos</a>
			<li><a class="menu" href="">Speakers/<br>Musicians</a>
			<li><a class="menu" href="">Register</a>
			<li><a class="menu" href="">Evaluations</a></li>
		</ul>
	</div>
	<div id="fits" STYLE="visibility:hidden; WIDTH:94px; BACKGROUND-COLOR:#e0d6ca;">
		<ul style="PADDING-LEFT:2px; PADDING-BOTTOM:2px; PADDING-TOP:2px; LIST-STYLE-TYPE:none; margin-left:0px; text-align:left; margin-top:0px; margin-bottom:0px;"  onMouseout="hideall('sonservants','fits','greatescape');">
			<li><a class="menu" href="">FITS Schedule</a>
			<li><a class="menu" href="">FAQs</a>
			<li><a class="menu" href="">Downloads</a>
			<li><a class="menu" href="">Photos</a>
			<li><a class="menu" href="">Videos</a>
			<li><a class="menu" href="">Speakers/<br>Musicians</a>
			<li><a class="menu" href="">Register</a>
			<li><a class="menu" href="">Evaluations</a></li>
		</ul>
	</div>
	<div id="greatescape" STYLE="visibility:hidden; WIDTH:109px; BACKGROUND-COLOR:#e0d6ca;" onMouseout="hideall('sonservants','fits','greatescape');">
		<ul style="PADDING-LEFT:2px; PADDING-BOTTOM:4px; PADDING-TOP:4px; LIST-STYLE-TYPE:none; margin-left:0px; text-align:left; margin-top:0px; margin-bottom:0px;">
			<li><a class="menu" href="">GE Schedule</a>
			<li><a class="menu" href="">FAQs</a>
			<li><a class="menu" href="">Downloads</a>
			<li><a class="menu" href="">Photos</a>
			<li><a class="menu" href="">Videos</a>
			<li><a class="menu" href="">Speakers/<br>Musicians</a>
			<li><a class="menu" href="">Register</a>
			<li><a class="menu" href="">Evaluations</a></li>
		</ul>
	</div>

and then the scripts that I use

<script language="javascript" type="text/javascript">
	/* SHOW-HIDE Layer				*/
	function showlayer(layer, layer2, layer3){
		var myLayer=document.getElementById(layer).style.display;
		if(myLayer=="none"){
			document.getElementById(layer).style.visibility="visible";
			document.getElementById(layer2).style.visibility="hidden";
			document.getElementById(layer3).style.visibility="hidden";
		} else { 
			document.getElementById(layer).style.visibility="visible";
			document.getElementById(layer2).style.visibility="hidden";
			document.getElementById(layer3).style.visibility="hidden";
			}
	}
	
	/* HIDE All				*/
	function hideall(layer, layer2, layer3){
			document.getElementById(layer).style.visibility="hidden";
			document.getElementById(layer2).style.visibility="hidden";
			document.getElementById(layer3).style.visibility="hidden";
	}
</script>

Oh and I simply call it from the image map

<area shape="RECT" coords="414,80,508,90" onMouseover="showlayer('fits','sonservants','greatescape');">

Any thoughts on how I can allow the menus to be usable, but close them if I am not over them?

wb

 

[BillyRayPreachersSon]

Use a timer - it's a pattern that has worked for me since 1999, and I still use it today.

Basically, when going to close any menu, start a timer with a small delay. If the timer fires, close the menu. However, on mouse over of the menu, stop the timer.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

 

[wbodger]

That sounds like a cool idea, any chance I could talk you out of an example?

wb

 

[BillyRayPreachersSon]

I don't have one handy, but the basic principle is as I mentioned:

- onmouseout, start a timer:

var timerHandle = setTimeout('realCloseFunc();', 100);

- onmouseover, stop any timer:

if (timerHandle) {
   clearTimeout(timerHandle);
   timerHandle = null;
}

and then when the timer fires, actually close the menu:

function realCloseFunc() {
   // do your read hide here
}

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

 

[wbodger]

OK, thanks for the pointer, that is a solution I can work on today!

wb