Show-Hide Features with Layers

This work is licensed under a Creative Commons License.

Show-Hide Features with Layers

Tutorialized.com

This tutorial will be teaching you to use the Show-Hide feature in layers. You've got to create five links (country names) which correspond to five images (flags). When the mouse moves over a link the corresponding image should be displayed.

Step 1: Open a new document and type the links 'India, China, Japan, USA and UK'. Make these as null links. i.e. enter a '#' in the Link text box under Properties window.

Step 2: Insert a layer by clicking on Insert>Layout Object>Layer, position it wherever you want it on the screen near the links. Insert an image into the layer. The images used in this tutorial are of the same sizes. You too can make the image sizes uniform by giving the height and width of the image in the image properties.

Step 3: The layers panel displays the layer names. (if the layers panel is not displayed click on Windows>layers) You can change this name by double clicking on the name and entering 'india'. Click on the eye icon near the name 'india', now the image is hidden.

Step 4: Repeat the steps 2 and 3 for the remaining images. Since there are 5 links, 5 images will be used and 5 layers have to be created.

Step 5: After you create the five layers try to position all the layers in the same place. You can do this easily by viewing each layer at a time and changing the values of L and T in the layer properties than manually positioning it.

Step6:

Select the first link 'India' and goto Behaviors panel (if this panel is not displayed click on Windows>Behaviors) click on the tab with a + sign to add behavior. A pop-up menu appears from which you have to select Show-Hide Layers. The Show-Hide Layer window appears, showing the five layers created by you, select the layer 'india' and click on show, the word 'show' appears near the layer name, close the window.

Step 7: The behavior and action is displayed. You have to change the 'onClick' to 'onMouseOver'. Click on the option and select 'onMouseOver' behavior. In the next row add another behavior 'onMouseOut' and follow the same step as before to open the Show-Hide Layer and click on 'hide' to the same layer. What happens now is when you move the mouse over the link the image is viewed and when the mouse is moved out of the link the image is hidden.

Step 8: Preview in browser to test your page.

Top