Theta Homeroom How-to:
Layers and Behaviors

This how-to file contains instructions for showing and hiding layers

Hiding/showing a layer

Create a link that, when the mouse rolls over it, will show the layer. This link can be text, an image, or a hot spot on an image map.

You don't want the link to go anywhere, so type the word javascript:; (including the colon and semi-colon) into the link box in the Properties Window.

Open the Behaviors Window.

Make sure the link is still selected and click on the + to add a behavior.

From the drop-down menu, choose Show-Hide Layers

Make sure the layer you want is selected, choose Show, then click OK.

To select the action you want to show the layer, choose from the drop-down menu

and select onMouseOver

Now, add the behavior to hide the layer.

Choose Show-Hide Layers again

but this time select Hide and click OK.

Again, from the drop-down menu

select the action that will initiate the behavior; this time onMouseOut.

To be sure that the layer is hidden when the web page is first loaded, add a behavior to the <body> tag. Click up at the top of your page, so that the <body> tag shows in the behavior window.

From the drop-down menu, choose Show-Hide Layers,

select Hide and click OK.

Make sure the action is onLoad.

Finally, save your web page and test it in a browser:

 
The contents of the Web Institute for Teachers website are Copyright 1999-2003, University of Chicago. No one may print, copy, or otherwise reproduce these materials without the express written permission of the Director of the Web Institute for Teachers.
The current time is June 29, 2003, 8:21 pm, CDT. This page was last updated at 12:00 pm on June 23, 2003, by meb. It has had 27 visitors.
Please use the Feedback button to tell us how you like this page.