Hiding/Showing layers on a page

[Melvin]

I have been playing around with trying to hide/show different layers in a page depending on what a user clicks on (basically a menu type of operation, sorta). This has been working fine, but what I have been seeing is that when the page first loads, the different layers all seem to jumble up on each other before the script runs to hide them. The code works, but seems really messy when the page is loading (for a second or so).

Is there a way to have the layers hidden as the page loads, not requiring the onload event of the body tag to hide them?

I thought that it would be simply a matter of putting visibility="hidden" in the div tag, but maybe I am missing something as that had no effect. I tried an onload in each div to call the hideLayer function, that also had no effect on the initial overlaid menus.

function hideLayer(whichLayer) {if (document.getElementById) {document.getElementById(whichLayer).style.visibility = "hidden";} else if (document.all) {document.all[whichlayer].style.visibility = "hidden";} else if (document.layers) {document.layers[whichLayer].visibility = "hidden";}}

function handleClick(whichClick) {
hideLayer("menu1");
hideLayer("menu2");
hideLayer("menu3");
hideLayer("menu4");
showLayer(whichClick);
}

Basically in the body tag I have an onload="handleClick('menu0'); return false"

I also thought about trying to change the text color the same as the background and changing it via script, but can't find the command to change the text color via script.

(Yes, I am really new at this but am trying...)

[adios]

<div......style="visibility:hidden;">

http://www.webreference.com/js/column18/visibility.html

[Melvin]

That did it..