Hiding/Showing Multiple layers - CSS forum at WebmasterWorld - WebmasterWorld

Forum Moderators: not2easy

Message Too Old, No Replies

Hiding/Showing Multiple layers

Twister77

9:14 pm on Nov 2, 2005 (gmt 0)

10+ Year Member

This one is driving me nuts because I feel like it should be a simple problem, and the only solutions I've found would bloat the file size dramatically.

I've not sure if this is possible to do in CSS in a way that all browsers (including IE) can use but it'd be nice if it was.

ANY suggestions are welcome, thank you...

Okay here is what I'm trying to do.

Basically on the left side of the page will be a list of about 40 items. When you mouseover the items on the left, it will highlight them with a background color. At the same time, on the right, it'll display a corresponding layer with data/pictures about that item.

Now this would be simple enough if after you moused off the item the layer and highlight could disapear. But I want it so when they mouseout of the item, that the item still is highlighted and the layer on the right is still shown. And this step is where I'm unsure of what to do without having a javascript "item1.className='aclassname'; item2.className='aclassname'; item3.className='aclassname'; item4.className='aclassname'; .... and so on up to 40 for every single item. Which obviously would be rediculous.

Any thing I'm not thinking of?

Thanks!

Twister77

9:17 pm on Nov 2, 2005 (gmt 0)

10+ Year Member

I guess I should also mention. When you mouse over another item in the list, THEN the highlight for the previously highlighted item disapears along with the old layer on the right. Then of course the new mouseovered item is highlighted and a new layer is shown.

garann

10:44 pm on Nov 2, 2005 (gmt 0)

10+ Year Member

What if you keep track of the last item moused over? You can assign it to a Javascript variable so that next time you hit the function that highlights the link moused over, it knows which link currently has the highlight and can reset its class to the default.

Not sure if I'm making sense... What I mean is this:

<script type="text/javascript">
var lastHilited;
function hilite(objID) {
 document.getElementById(lastHilited).className = "normal";
 document.getElementById(lastHilited+"_info").style.display = "none";
 document.getElementById(objID).className = "hilite";
 document.getElementById(objID+"_info").style.display = "block";
lastHilited = objID;
}
</script>

Twister77

10:54 pm on Nov 2, 2005 (gmt 0)

10+ Year Member

Thats a good idea, I'm trying to implement it and I dont really know how to call it.

Here is some sample script using yours but modded a little bit:

script>

var lastHilited;
function hilite(objID) {
document.getElementById(lastHilited).style.visibility = "hidden";
document.getElementById(objID).style.visibility = "visible";
lastHilited = objID;
}

</script>
</head>

<body>
<div id="Layer1" style="position:absolute; visibility:hidden; background: #FFFFFF; left:84px; top:37px; width:378px; height:133px; z-index:1">
abcdef
</div>
<div id="Layer2" style="position:absolute; visibility:hidden; background: #FFFFFF; left:84px; top:37px; width:378px; height:133px; z-index:1">
zxvyt
</div>
<div id="Layer3" style="position:absolute; visibility:hidden; background: #FFFFFF; left:84px; top:37px; width:378px; height:133px; z-index:1">
mjauo
</div>

<a onMouseOver="javascript: hilite(Layer1);">1</a>
<a onMouseOver="javascript: hilite(Layer2);">2</a>
<a onMouseOver="javascript: hilite(Layer3);">3</a>

</body>

I'm getting an 'Object required' error

garann

11:30 pm on Nov 2, 2005 (gmt 0)

10+ Year Member

Hmm.. Only potential problem I see is that you don't need the

javascript:

part in onmouseover - you can just call the function.

Oh, just saw it - the argument you pass to the function needs to be quoted, or it's interpreted as a variable. So:

<a onMouseOver="hilite('Layer1');">1</a>

Twister77

2:57 pm on Nov 3, 2005 (gmt 0)

10+ Year Member

I removed the 'javascript:' and added quotes and am still getting the same Object required error... any ideas?

Twister77

3:01 pm on Nov 3, 2005 (gmt 0)

10+ Year Member

Got a javascript solution here:

[webmasterworld.com...]

Thanks everyone