Layers require 4.0+ versions of the major browsers. For maximum compatibility with Netscape Navigator and Internet Explorer, create layers using the <div> tag. For example, a layer implemented with a <div> tag using absolute positioning might look like this:
<div id="Layer1" style="position:absolute; visibility:visible; left:67px; top:39px; width:161px; height:172px; z-index:1; overflow:scroll"> </div>
Avoid <span> tags, which work in IE only, and avoid <layer> and <ilayer> tags, which work in NN4.x only. For more details, see Section 4.2 in Chapter 4.
14.1.1 Dragging and Dropping Layers
The Drag Layer behavior creates a moveable layer that the user can drag and drop. Use this behavior to create games or other interesting interfaces. For example, you might let a user move cards in a game of solitaire or drop a coin in a jukebox.
To apply the Drag Layer behavior in the Behaviors panel, the document must contain a layer object. However, the behavior cannot be applied to the layer itself. Instead, you'll typically attach the behavior to the document's <body> tag, where it will be triggered by the onLoad event. To prevent a layer from being immediately draggable when the document loads, attach the Drag Layer behavior to an image and trigger it using the onMouseDown event; the layer won't be draggable until the user clicks on the image.
Adding the Drag Layer behavior opens the Basic tab of the Drag Layer dialog box, shown in Figure 14-1.
Figure 14-1. Basic Drag Layer behavior parameters
The Basic tab's contents differ slightly, depending on the value chosen for the Movement option.
The Layer option specifies the id of the layer that the user can drag and drop. To make multiple layers draggable, apply the behavior multiple times (nested layers move with their parent but aren't well supported in NN4.)
When Movement is set to Constrained, the Up, Down, Left, and Right fields are used to constrain movement. When Movement is Unconstrained, the user can drag the layer anywhere within the browser window.
- Up, Down, Left, and Right
These coordinates limit the movement of the layer when Movement is set to Constrained. Set Up and Down to the same number to constrain the layer to horizontal movement only. Set Left and Right to the same number to constrain the layer to vertical movement only.
- Drop Target, Left, Top, and Get Current Position
If Drop Target coordinates are not specified, the layer is dropped only when the user releases the mouse. If the Left and Top Drop Target coordinates are specified, the layer is dropped automatically when its upper-left corner is within range of the Drop Target position (as specified by the Snap if Within option). The Drop Target option is typically used for jigsaw puzzles or similar elements that must be dragged to a particular location. Click the Get Current Position button to automatically fill in the Left and Top fields with the layer's current position.
- Snap if Within
This option specifies the tolerance within which the layer is snapped to the Drop Target coordinates. A typical value is 50 pixels (about half an inch).
The Advanced tab of the Drag Layer dialog box, shown in Figure 14-2, provides finer control over draggable layers.
Figure 14-2. Advanced Drag Layer behavior parameters
The Advanced tab's contents differ slightly, depending on the value chosen for the Drag Handle option.
- Drag Handle
This option determines where the user must click to initiate the drag action (the entire layer is always dragged in unison ). If this option is set to Entire Layer, the user can click anywhere within the layer's bounding box to begin dragging it. If this option is set to Area Within Layer (as seen in Figure 14-2), the L (left), T (top), W (width), and H (height) fields define a hotspot area within which the user must click. For example, you might require a user to click on the handle of a coffee mug to drag it. The coordinates are relative to the upper-left corner of the layer itself.
- While Dragging: Bring Layer to Front
Enabling this checkbox causes the selected layer to come to the foreground while being dragged. Bringing a layer to the foreground prevents it from disappearing behind other items while the user drags it.
- Bring Layer to Front, then...
This option controls whether the dragged layer reverts to its original stacking order (Restore Z-Index) or remains in front of other layers (Leave on Top) once it is dropped. This option is relevant only if the Bring Layer To Front option is enabled.
14.1.2 Resizing Layers
You can use the Change Property behavior to alter the height and width of a layer. The behavior can be applied to another element, but not to the layer itself. To allow the user to change a layer's size, attach this behavior to a button and trigger it with an onClick event. Applying the behavior opens the Change Property dialog box, shown in Figure 14-3.
Figure 14-3. Changing a layer's width in Internet Explorer
Section 220.127.116.11 adjusts the height or width of a layer in Internet Explorer.
18.104.22.168 Procedure 5
Add a layer object using Insert Layer.
Apply the Change Property behavior to an image that will act as a button. Applying the behavior opens the dialog box shown in Figure 14-3.
In the dialog box, select LAYER from the Type of Object pop-up list.
Pick the name of a layer from the Named Object pop-up list.
Enable the Property Select radio button and choose IE4 from the browser version pop-up list on the far right.
Choose style.width from the Property Select pop-up list.
Specify a measurement, such as 50px or 75%, in the New Value field.
To change the layer's height, repeat Steps 2 through 7, but choose style.height from the pop-up list in Step 5.
| || |
To change the height and width of a layer dynamically in NN4, use the Resize Layer behavior by Massimo Foti, available from the Dreamweaver Exchange.
See Table 16-1 for details on the properties that can be changed with the Change Property behavior. See Chapter 17 for details on animating layers using timelines .