PDA

View Full Version : Show/Hide Multiple Layers - Need Help



duuuuuuuuuude
10-21-2011, 09:20 AM
Hello,

I'm working on a top menu consisting of MENU A, MENU B and MENU C each with it's own drop down submenu on a separate layer. I'm using ShowContent and HideContent to display the submenus onmouseover. So on mouseover it shows "LayerA" and hides "LayerB" and "LayerC."

The problem I'm having is that it will only hide one of the layers. Which ever one is listed first. I'm sure the problem lies in HideContent('LayerB','LayerC') but I don't know how to resolve it. Any help would be much appreciated.

Here is the script I'm using:


<script type="text/javascript" language="JavaScript"><!--
function HideContent(d) {
if(d.length < 1) { return; }
document.getElementById(d).style.display = "none";
}
function ShowContent(d) {
if(d.length < 1) { return; }
document.getElementById(d).style.display = "block";
}
function ReverseContentDisplay(d) {
if(d.length < 1) { return; }
if(document.getElementById(d).style.display == "none") { document.getElementById(d).style.display = "block"; }
else { document.getElementById(d).style.display = "none"; }
}
//--></script>

And here is my menu:


<td><a href="XXXX" onmouseover="ShowContent('LayerA'); HideContent('LayerB','LayerC')">MENU A</a>
</td>
<td><a href="XXXX" onmouseover="ShowContent('LayerB'); HideContent('LayerA','LayerC')">MENU B</a>
</td>
<td><a href="XXXX" onmouseover="ShowContent('LayerC'); HideContent('LayerA','LayerB')">MENU C</a>
</td>

vwphillips
10-22-2011, 08:13 AM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<script type="text/javascript">
/*<![CDATA[*/
function HideContent() {
var args=HideContent.arguments,obj,z0=0;
for (var z0=0;z0<args.length;z0++){
obj=document.getElementById(args[z0]);
if (obj){
obj.style.display = "none";
}
}
}

function ShowContent(d) {
if(d.length < 1) { return; }
document.getElementById(d).style.display = "block";
}

function ReverseContentDisplay(d) {
if(d.length < 1) { return; }
if(document.getElementById(d).style.display == "none") { document.getElementById(d).style.display = "block"; }
else { document.getElementById(d).style.display = "none"; }
}
/*]]>*/
</script>

</head>

<body>
<table>
<tr>
<td><a href="XXXX" onmouseover="ShowContent('LayerA'); HideContent('LayerB','LayerC')">MENU A</a>
</td>
<td><a href="XXXX" onmouseover="ShowContent('LayerB'); HideContent('LayerA','LayerC')">MENU B</a>
</td>
<td><a href="XXXX" onmouseover="ShowContent('LayerC'); HideContent('LayerA','LayerB')">MENU C</a>
</td>
</table>

</tr>
<div id="LayerA" style="width:200px;height:200px;background-Color:red;"></div>
<div id="LayerB" style="width:200px;height:200px;background-Color:green;"></div>
<div id="LayerC" style="width:200px;height:200px;background-Color:blue;"></div>

</body>

</html>