Dreamweaver Tutorial - Using Layers, Behavior and Dynamic Effects
Page 2 of 2
Swapping Images
You can also create dynamic effect to swap your image with in a dreamweaver itself. A disjointed rollover effect is other type of image swapping effect that can be effective. This effect takes place when the image exchange occurs at a different location in the page.
Add image from Insert menu. In the Select Image source dialog box, select the image.
With the image still selected, click the Center Align button in the property inspector to center it. Assign any name to the image.
Click the plus (+) button in the behavior panel as shown in the Figure-5.15.
Figure-5.15
Select Swap image from the behavior panel. In the Swap Image Dialog box, select the image that you just added. Using the browse button next to set source To Field, select another image and this is the image that will be shown in place of the swap image.
Figure-5.16
Leave Preload Images and Restore images OnMouseout checked and click Ok.
Using Image Maps with Behaviors
Image map is used to display alternative blocks of descriptive text for regions in the maps. You can create more than one hyperlink for a single image by attaching different links to different areas of the image. Image maps divide an image into sections, to which you apply a hyperlink or a JavaScript behavior.
Start by drawing the layer on the page. As you did before, select the Draw layer option on the layout tools button.
Click the border of the layer to select it and use the Property inspector to set the L, T, W, H and layer ID properties.
Using the Layer panel, Show one map layer (by keeping eye icon open) and hide other two map layers( by keeping eye icon closed).
In Design view, click the image of one map that you see in the tag selector. Enter the name in the map text box in the property inspector. Click the Hotspot Tool button as shown in Figure-5.17.
Figure-5.17
Draw a rectangle capturing some part of the image of your choice as shown in Figure-5.18.
Figure-5.18
With the Hotspot selected, Click the plus in the behaviors panel and select Set Text --> Set Text of Layer as shown in Figure-5.19.
Figure-5.19
Check the behaviors panel to ensure that Dreamweaver has created this as onMouseOver behavior. If not, use the drop-down list to change it.
Figure-5.20
Select the Hotspot, Click the plus in the Behavior panel and select Set Text --> Set Text of Layer again. Select the map text layer again but this time leave the text box Blank. Click OK and check that new behavior is set to the onMouseOver event.
Figure-5.21
Draw a second hotspot on the image that encompasses the other part of the image. Do not overlap the Hotspots.
Figure-5.22
Again Select Set Text --> Set Text of Layer and type the text in New HTML tag. Apply the same event onMouseOver and onMouseOut (Repeat the steps 5 to 7 as you did for creating first hotspot). Ensure it that you have one for the onMouseOver and one for the onMouseOut event.
Save and test your page in the browser. You will see the Text pop up as you roll over the hotspot.
How to Add Pop Message using JavaScript
Go to File --> New and create a new Basic HTML page.
Go to Design view and type the words that Click me to get pop message as shown in Figure-5.23.
Figure-5.23
Highlight the word Click me and enter a hash character (#) into the Link box of the Property inspector as shown in Figure-5.24.
Figure-5.24
Click somewhere on the word Click me. Open the tag panel group and select the Behaviors panel.
Click the plus button and select Popup Message from the list of behaviors. The popup Message dialog box appear as shown in Figure-5.25. Enter your text in box.
Figure-5.25
Look at the Behaviors panel as shown in Figure-5.26. On the left side, it says onClick and on right Side, it say popup Message. You can change your event by clicking on the event and selecting it from the drop-down list.
