Show Hide Layers
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 link 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 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>Cheers,
Justa
ROB posted this at 08:41 — 19th July 2002.
They have: 447 posts
Joined: Oct 1999
that code makes me want to barf.
would you mind editing some code tags around it?
Jack Michaelson posted this at 10:40 — 19th July 2002.
He has: 1,733 posts
Joined: Dec 1999
done...
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.