Show/Hide layers in Navigation

When I mouse over a link the layer disappears

[justa]

I have a menu which contains 9 business units. I want the user to mouseover the particular business unit, and the corresponding layer next to it is revealed. The user can then move over the newly visible layer and select a <a href>link</a> which takes them to that area of the business unit.

I have created a table with two cells, left and right. The left cell contains 9 images (the business units) and the right cell contains 10 <div> layers, one blank and the other nine for the business units.

To begin with, the blank div is shown and the rest are hidded. Using DWMX show/hide layer behaviour I have set it so when the left image is moused over the layer is displayed, and remains there until the mouse leaves the right cell.

This worked perfectly until I added my links to the unit layers. Everything still works fine except when I move the mouse over a link the blank layer is returned.

Here is the code I am using, can anyone help? Is it worth fixing what I have done so far, or is there a better way to do this?

<script language="Javascript">
<!--
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_showHideLayers() { //v6.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
obj.visibility=v; }
}
//-->
</script>

<style type="text/css">#gen, #wat, #ret, #teci, #cor, #tec , #rem, #pow, #bus{position:absolute; top: 15; left: 140; width:161; height:180; visibility:hidden}</style>

<table width="300" border="0" cellspacing="0" cellpadding="0">
<tr align="left" valign="top">
<td width="130" height="187">
<p><!--
--><a href="/generation/index.htm" onMouseover="MM_showHideLayers('gen','','show','pow','','hide','wat','','hide','ret','','hide','rem','','hide','teci','','hide','bus','','hide','cor','','hide','tec','','hide')";><img src="images/buttons/gen.gif" width="129" height="20" alt="Link to Generation" border="0"></a><!--
--><a href="/networks/index.htm" onMouseover="MM_showHideLayers('gen','','hide','pow','','show','wat','','hide','ret','','hide','rem','','hide','teci','','hide','bus','','hide','cor','','hide','tec','','hide')";><img src="images/buttons/pow.gif" width="129" height="20" alt="Link to Power Networks" name="power" border="0"></a><!--
--><a href="/water_services/index.htm"onMouseover="MM_showHideLayers('gen','','hide','pow','','hide','wat','','show','ret','','hide','rem','','hide','teci','','hide','bus','','hide','cor','','hide','tec','','hide')";><img src="images/buttons/water.gif" width="129" height="20" alt="Link to Water Services" name="water" border="0"></a><!--
--><a href="/retail_services/index.htm" onMouseover="MM_showHideLayers('gen','','hide','pow','','hide','wat','','hide','ret','','show','rem','','hide','teci','','hide','bus','','hide','cor','','hide','tec','','hide')";><img src="images/buttons/retail.gif" width="129" height="20" alt="Link to Retail Services" name="retail" border="0"></a><!--
--><a href="/rural_services/index.htm" onMouseover="MM_showHideLayers('gen','','hide','pow','','hide','wat','','hide','ret','','hide','rem','','show','teci','','hide','bus','','hide','cor','','hide','tec','','hide')";><img src="images/buttons/rural.gif" width="129" height="20" alt="Link to Rural Services" name="rural" border="0"></a><!--
--><a href="/techincal_support/index.htm" onMouseover="MM_showHideLayers('gen','','hide','pow','','hide','wat','','hide','ret','','hide','rem','','hide','teci','','show','bus','','hide','cor','','hide','tec','','hide')";><img src="images/buttons/techsup.gif" width="129" height="20" alt="Link to Technical Support" name="subsid" border="0"></a><!--
--><a href="business_services/index.htm" onMouseover="MM_showHideLayers('gen','','hide','pow','','hide','wat','','hide','ret','','hide','rem','','hide','teci','','hide','bus','','show','cor','','hide','tec','','hide')";><img src="images/buttons/busi.gif" width="129" height="20" alt="Link to Business Services" name="business" border="0"></a><!--
--><a href="/business_services/executive/index.htm" onMouseover="MM_showHideLayers('gen','','hide','pow','','hide','wat','','hide','ret','','hide','rem','','hide','teci','','hide','bus','','hide','cor','','show','tec','','hide')";><img src="images/buttons/exec.gif" width="129" height="20" name="exec" border="0" alt="Link to Executive Services"></a><!--
--><a href="/technical_services/index.htm" onMouseover="MM_showHideLayers('gen','','hide','pow','','hide','wat','','hide','ret','','hide','rem','','hide','teci','','hide','bus','','hide','cor','','hide','tec','','show')";><img src="images/buttons/techserv.gif" width="129" height="20" border="0" name="techserv" alt="Technology Services"></a>
</p>
</td>
<td height="187"> <img src="images/buttons/blank_inc.gif" name="blank">
<div class="busmenu"
style="background-image: URL(images/buttons/blank_inc.gif;
background-repeat: no-repeat" id="blank" >
</div>
<div class="busmenu"
style="background-image: URL(images/buttons/gen_inc.gif);
background-repeat: no-repeat" id="gen" onMouseout="MM_showHideLayers('gen','','hide')";>
<a class="menu" href="/generation/index.htm">Generation Services</a>
</div>
<div class="busmenu"
style="background-image: URL(images/buttons/pow_inc.gif);
background-repeat: no-repeat" id="pow" onMouseout="MM_showHideLayers('pow','','hide')";>
</div>
<div class="busmenu"
style="background-image: URL(images/buttons/water_inc.gif);
background-repeat: no-repeat" id="wat" onMouseout="MM_showHideLayers('wat','','hide')";>
</div>
<div class="busmenu"
style="background-image: URL(images/buttons/retail_inc.gif);
background-repeat: no-repeat" id="ret" onMouseout="MM_showHideLayers('ret','','hide')";>
</div>
<div class="busmenu"
style="background-image: url(images/buttons/rural_inc.gif);
background-repeat: no-repeat" id="rem" onMouseout="MM_showHideLayers('rem','','hide')";>
</div>
<div class="busmenu"
style="background-image: URL(images/buttons/techsup_inc.gif);
background-repeat: no-repeat" id="teci" onMouseout="MM_showHideLayers('teci','','hide')";>
</div>
<div class="busmenu"
style="background-image: url(images/buttons/busi_inc.gif);
background-repeat: no-repeat; line-height: normal;" id="bus" onMouseout="MM_showHideLayers('bus','','hide')";>
<a href="#">Business Services</a><br>
<a href="#">Economic Services</a><br>
<a href="#">Employment Services</a><br>
<a href="#">Web Administration</a>
</div>
<div class="busmenu"
style="background-image: URL(images/buttons/exec_inc.gif);
background-repeat: no-repeat" id="cor" onMouseout="MM_showHideLayers('cor','','hide')";>
</div>
<div class="busmenu"
style="background-image: URL(images/buttons/techserv_inc.gif);
background-repeat: no-repeat" id="tec" onMouseout="MM_showHideLayers('tec','','hide')";>
</div>
</td>
</tr>
</table>

[edited by: tedster at 9:43 am (utc) on July 19, 2002]
[edit reason] disable smilies [/edit]

[tedster]

The way this looks to me, all your divs that display links -- #gen, #wat, #ret etc -- display in the same position, which is not necessarily near the div that was moused over. In order to move the mouse to that div, it must first mouse out of the menu cell - and the newly visible div then vanishes, as it is coded to do.

Try putting a set of links in the second div from the top, which is still adjacent to the div that holds the links - you can slide right over and it doesn't return to blank.

So this seems to indicate that, despite the fact that you have declared a height of 180 px, the div isn't there after the content stops.

Next thing I did was reposition each of those nine divs, each one adding 20px to the top: of the previous so they keep in line with the menu cells --

<style type="text/css">
#gen {position:absolute; top: 15; left: 140; width:161; height=187; visibility:hidden}
#pow {position:absolute; top: 35; left: 140; width:161; height=187; visibility:hidden}
#wat {position:absolute; top: 55; left: 140; width:161; height=187; visibility:hidden}
#ret {position:absolute; top: 75; left: 140; width:161; height=187; visibility:hidden}
#rem {position:absolute; top: 95; left: 140; width:161; height=187; visibility:hidden}
#bus {position:absolute; top: 115; left: 140; width:161; height=187; visibility:hidden}
#teci {position:absolute; top: 135; left: 140; width:161; height=187; visibility:hidden}
#cor {position:absolute; top: 155; left: 140; width:161; height=187; visibility:hidden}
#tec {position:absolute; top: 175; left: 140; width:161; height=187; visibility:hidden}
</style>

Now, I CAN slide the mouse over and not have the div go hidden. But a mouseout event is triggered when I leave the LINK, not the div, and the div gets hidden again.

Why is the mouseout triggered when I leave a link? And how to fix that?

Still working on it!

ps - your code has an open parenthesis at the blank_inc.gif background-image URL()

[tedster]

We had a related discussion on this thread:
[webmasterworld.com...]

The conclusion was that each mouseover needs to make 2 overlapping divs visible. The bottom one should contain a div filling gif, and the top one contains the text links. Then both divs should hide only when the BOTTOM div triggers a mouseout.

[knighty]

justa,

You can do this with a layer for each diferent menu and one "hiding" layer.

First thing to do is get the menus to appear.

Then get a big layer that the menus sit on top of.

Fill this layer with a spacer gif and give the gif a href so that when you mouseover the link (off the menu layer) the layer closes all the menu layers.

Visit www.projectseven.com and download 2 extensions:

Autohide - instead of naming every single layer you wish to hide just select the one you wish to show and the rest will be hidden automatically.

snap2layer - instead of having 2 layers for each menu you just need 1 hiding layer that moves to the menu you are visiting.

HAVE FUN ;)