Hiding and Showing Layers

Dynamically hiding and showing layers is a handy idiom, commonly used in the production of DHTML menus. Move the mouse over the two boxes below for a simple example.

This appears when you hover over Hover Area 1...

...and this appears when you hover over Hover Area 2.

How It Works

The basic idea is to make a list of <div> elements containing the content to be displayed for each rollover. When the mouse rolls over an area, that area's onmouseover and onmouseout events call the showLayer and hideLayer functions, respectively. These functions are defined in a <script> block in the page header.

The showLayer function accepts two arguments: layerName is the ID of the layer you want to display, and shadowLayerName is the ID of a layer that is used to position the layer when it is displayed. The showLayer function sets the top of the layer to the same position as the shadow layer, then sets the layer's CSS visibility attribute to 'visible'.

The hideLayer function, as the name implies, simply hides the layer with ID of layerName.

<html>
    <head>
        <title>Hiding and Showing Layers</title>
    
        <script type="text/javascript"><!--
    	
        function showLayer(layerName, shadowLayerName)
        {
            if (document.getElementById) // Netscape 6 and IE 5+
            {
                var targetElement = document.getElementById(layerName);
                var shadowElement = document.getElementById(shadowLayerName);
                targetElement.style.top = shadowElement.style.top;
                targetElement.style.visibility = 'visible';
            }
        }


        function hideLayer(layerName)
        {
            if (document.getElementById) 
            {
                var targetElement = document.getElementById(layerName);
                targetElement.style.visibility = 'hidden';
            }
        }

        // -->
        </script>
	
        <style type="text/css"><!--
        .buttonBar
        {
            height: 1.5em;
        }
		
        .shadow
        {
            position: relative; 
            visibility: hidden;
        }
		
        .button
        {
            float: left;
            border: 3px outset black;
            padding: 3px;
            margin: 3px;
            cursor: pointer;
        }
		
        .infoArea
        {
            height: 2em;
        }
		
        .information
        {
            visibility: hidden;
            border: 1px solid black;
            padding: 3px;
            margin: 3px;
            position: absolute;
        }
        -->
        </style>
    </head>
    <body>
        <div class="buttonBar">
            <div 
                class="button" 
                onmouseover="showLayer('HoverArea1Info', 'shadowLayer')"
                onmouseout="hideLayer('HoverArea1Info')"
                >
                Hover Area  1
            </div>
            <div 
                class="button" 
                onmouseover="showLayer('HoverArea2Info', 'shadowLayer')"
                onmouseout="hideLayer('HoverArea2Info')"
                >
                Hover Area  2
            </div>
        </div>

        <div id="shadowLayer" class="shadow"><span>&nbsp;</span></div>

        <div id="HoverArea1Info" class="information">This appears when you hover over Hover Area 1...</div>
        <div id="HoverArea2Info" class="information">...and this appears when you hover over Hover Area 2.</div>

        <div class="infoArea">
        </div>
    </body>
</html>

Compatibility

This example is designed for newer DOM-conformant browsers such as Mozilla 0.9.x, Netscape 6, and IE 5+.