Flash Tutorials
& Resources
Dreamweaver
Tutorials
Fireworks &
Illustrator Tutorials
Photoshop
Tutorials
Web Design
Tutorials & Resources
CSS
Tutorials
CorelDraw
Tutorials
You are here : : Home > Free Resources > Dreamweaver Tutorials > Show Hide Layers   

 

Featured Fireworks & Dreamweaver Template

Christian Template 7
Christian
$49.95

Show Hide Layers

Demo : Rollover the links below

INDIA   CHINA    JAPAN    USA    UK

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.

Step 6 :

 

 

 

 

 

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.

This is my result. Move your mouse over the links and check out the display.

 


Now building a website is as easy as 1-2-3!

Please Like, Tweet, Share or Comment on this page if you found this tutorial/resource useful!

No portion of these materials may be reproduced in any manner whatsoever, without the express written consent of Entheos. Any unauthorized use, sharing, reproduction or distribution of these materials by any means, electronic, mechanical, or otherwise is strictly prohibited.


Looking for high-quality Website Design? Choose from over 58000 templates!

create a free html5 website

Learn How to Create a Simple HTML5 Website

Learn how to create a simple Html5 website

Bootstrap 3 Responsive Website Tutorial

Bootstrap 3 Responsive Website Tutorial

Video Tutorial - Create a simple responsive website using Dreamweaver

responsive_website

Best Website Templates of 2015

best website templates

Featured Template
Template # 55479
Type: Newsletter template
Price: $25