|
Maa Graphics Services
» 2D Animation
» Architectural Rendering
» 3D Product Modeling
» 3D Exhibition Display
» Digital Illustration
» Book Illustrations
» Cartoon Drawings
» Medical Illustration
» Illustration
» Illustrations
» Portrait Illustrations
» Fashion Illustrations
» Logo Design
» Stationary Design
» Advertising Designs
» Banner Designs
» Brochures Designs
» Direct Mail Design
» Flyers Designs
» Folders Designs
» Image Clipping Paths
» News Letter Design
» Package Design
» Posters Designs
» Signage Designs
» Brochure Website
» E-Commerce Website
» Flash Website
» CMS Development
» Search Engine Optimising
» Website Content Writing
» E-mail Newsletter Design |
|
| Show and Hide layers in DreamweaverMX |
|
The following tutorial will teach you how to use the Show-Hide features in a layer. The procedure given below creates five links to five images respectively and when mouse is moved over any of the five links the respective image is displayed. Follow the steps given below:
- Type the links ‘India, China, Japan, USA, UK’, in a new document. Then convert these links onto null links by entering ‘#’ in the Link text box of the property window.
- Insert a layer by clicking Insert>Layout Object>Layer. Then insert an image into the layer and adjust the height and width of the image in the image properties.

- The name of the layer will be shown in the layers panel. Click windows>layers if the name of the layer is not shown. You can change the name into ‘India’ by double clicking on the name. To hide the images click the eye icon shown on the left of the layer name. After clicking the the image will be hidden.
- The steps 2 and 3 must be repeated for the rest of the images. The figure shows the five links, five images and five layers that are to be created.
- After creating the five layers position all layers in the same way itself. This can be done by viewing each layer one at time and changing the L and T values in the layer properties which is easier than manually positioning them.
- Choose the first link ‘India’ that you have created and click Windows>Behaviors to go to Behaviors panel. Then click on the + sign to add behavior. Then select show-Hide Layers from the pop-up menu which shows the five layers created in the show-Hide Layers. Select the layer ‘India’ and click on show which makes the word ‘show’ appears beside the layer name and close the window.

- Change ‘Onclick’ to ‘onMouseOver’ by selecting ‘onMouseover’ from the displayed behavior and action. Another behavior 'onMouseOut next row ' must be added in the next row and follow the same step as before to open the Show-Hide Layer and click on 'hide' to the same layer. And when you move the mouse on to the link the image will be viewed and when the mouse is moved out the image will be hiden.
- A preview is added in the browser and tests it by moving your mouse over the links and check the display.
|
|
|
|
|