Sample Roll Over Effect on the links, Move your mouse over links below.
Following are the steps to create Hide and Seek of images using layers and links in Dreamweaver 8.
Step 1
Create links wherever you want, you can place any number of links and you must have that many images to be displayed. If you want null links, then give ‘#’ symbol in link text box.
Step 2
Click on Insert > Layer Objects > Layer to insert a layer, the default name given to this layer is Layer1, if you want, you can change the names of layer in Layers Panel. Position this layer nearer to the links for best result.
Step 3
Insert an image in this layer, for best result use images of same height and width.
Step 4
Hide this layer by clicking just below the eye icon near the layer name in Layers Panel. If Layers Panel is not visible then click on Windows > Layers (Shortcut Key F2) to make it visible.
Step 5
Now select the link on which you want Hide and Show effect with the mouse movement over this link.
Step 6
Click on ‘+’ symbol in Behavior Panel (if this panel is not displayed click on Windows > Behaviors), then click on Show-Hide Layers, Select the corresponding layer and click on show button, In Behavior Panel change ‘onClick’ to ‘onMouseOver’.
Step 7
Click on ‘+’ symbol again in Behavior Panel, then click on Show-Hide Layers, Select the corresponding layer and click on hide button, In Behavior Panel change ‘onClick’ to ‘onMouseOut’.
Step 8
Repeat the steps from 2 to 7 for all other links.
Step 9
Check your result in browser.
|
