Dahlgren Memorial Library

Tutorial: Dreamweaver 2-3

• Workshop: Dreamweaver II
• Category: Behavior
• Task: Add a behavior (event: onMouseOver, action: Set Text of Layer) to an image map
• Sample: http://www.georgetown.edu/dml/educ/neurolab/frameset.html
• Practice files:
• Video: dreamweaver_2_3_h.mov (1:15)

The web page for this session practice was selected from the Georgetown University Neuroscience Lab site, a collection of brain scan images as a learning tool for Neuroscience students. The page was designed to show them a key when they move the cursor over a certain area of the scan image.

1. Choose Behaviors in the Window menu. After you have the Behaviors window, click the image map (the polygon, the hotspot) on the image. Click on the "+" button and select Set Text>Set Text of Layer in the Behaviors panel.
2. In the Set Text of Layer panel, choose layer "key" in the Layer box and type text (key) in the New HTML box in order to make the text appeared in the "key" layer. Click OK.  Now you've added a behavior (event: onMouseOver, action: Set Text of Layer) to the hot spot of the image map. The behavior is to set a text in the ?image? layer when a mouse is over the hot spot of the image. You can view the behavior in the Behaviors window.
3. Click on the "+" button in the Behaviors panel and select Set Text>Set Text of Layer. In the Set Text of Layer window, select layer ?key? in the Layer box and leave the New HTML box blank. Click OK.
4. Now you need to set an action to make the text (key) in the ?key? layer disappeared when the mouse moves out the boundary of the hot spot. In the Behaviors panel, click the arrow and choose onMouseOut.
5. Choose Preview in Browser>IEXPLORE.EXE in the File menu to view the page. When you get the page in the browser window, move the mouse curse to the hot spot of the image. It will make the text for the hot spot appeared in the place you designed.