ONLINEGRAPHICPROOFING.COM

and proofing tools - www.onlinegraphicproofing.com

Menu


Now save your work and test the results in the browser by choosing the Preview in Browser option (or by pressing F12). You'll notice that


if you click, hold, and drag the image, you can position the layer anywhere you want on the page. Although the ability to reposition a layer is core to the Drag Layer behavior, other options exist in the Drag Layer dialog for extending the functionality exposed by the behavior. To review these options, right-click the behavior in the Behaviors panel and choose the Edit Behavior option from the context menu to reopen the Drag Layer dialog (you could also double-click the behavior to edit it). When the dialog opens, notice the following functionality in the Basic tab: Layer: Assuming you have multiple layers in the page, select the specific layer to drag from this menu. Movement: Select an option from this menu to either constrain or unconstrain the layer's movement as it's being dragged. Choose Unconstrained movement when working with online puzzles and other drag-and-drop games. Choose the Constrained option when working with controls such as sliders. Drop target: The drop target is the x and y coordinate of the spot to which you want the visitor to drag the layer. Click the Get Current Position button to automatically fill in the Left and Top coordinate values based on the current position of the layer. Snap if within: Assuming you're working with a drop target, enter a pixel value in this text box to have Dreamweaver automatically snap the layer and its contents to the drop target when the layer is within the specified number of pixels. Switch to the Advanced tab of the Drag Layer dialog to see the following functionality: Drag handle: By default, Dreamweaver allows you to click, hold, and drag within any part of the layer to drag it. If you want to constrain the drag to a specific portion of the layer, choose the Area Within Layer option and fill in the coordinates for left, top, width, and height. This option is particularly useful when a portion of the layer suggests dragging, such as a title bar. While dragging: Enable this check box to leave the layer on top of other layers while it's being dragged. You might also choose the Restore Z-index option if you want to keep the layer on top of other layers while it's being dragged but restore it to a lower z-index once it's been dropped. You can also enter JavaScript code within the Call JavaScript text box that will be executed while the layer is being dragged. When dropped: Enter custom JavaScript code within this text box and choose the Only If Snapped check box to execute JavaScript code when the user drops the layer on a specific target. This option is particularly useful when you want to provide a pop-up feedback message confirming that the user got the right answer when they dropped the layer in the correct target. Using the Show-Hide Layers Behavior The last behavior associated with layers is the Show-Hide Layers behavior. Similar to the functionality exposed by the Shop Pop-Up Menu behavior, the Show-Hide Layers behavior can be used to show or hide the contents in a layer when an element on the page is selected, unselected, rolled over, rolled out, and so on. To use this behavior, follow these instructions: 1. Place your cursor just to the right of the Add Text to Layer button and insert two new Button form objects by clicking the Button icon in the Forms category in the Insert bar twice. 2. Change the Action for both form objects to None to prevent the buttons from submitting or resetting. 3. Change one button's text Label to read Show and the other button's text label to read Hide. 4. Choose the Draw Layer option from the Layout category in the Insert bar and draw a new layer on the page, preferably to the right of the two new buttons. 5. Drag a new headshot image within the new layer. I'll drag the head_agnestheaccountant.gif image into the layer.