Interactivity and Layers

     

Interactivity and Layers

It's one thing to create a layer and add content to it, but a layer really comes to life when you add behaviors to it. A few special behaviors are used exclusively with layers: Showing, Hiding, and Dragging.

Showing and Hiding Draw Layers

Unlike images, layers cannot simply have their sources changed to change their appearance. Instead, they must have their visibility changed to make them either hidden or visible. You can turn on one layer while turning off another layer.

To add the Show-Hide behavior to control a layer's visibility, do the following:

1. Select an image or a link on the Web page (either in or out of a layer), and in the Behaviors panel, select the Show-Hide Layers behavior from the Add Behavior drop-down.
   
   
2. In the Show-Hide Layers dialog box that appears, select the layer you want to influence, then choose whether you want to make that layer show, hide, or use the default display.
   
   
3. Click OK. The behavior is now associated with the image or link you selected in step 1.
   
   

Text links default to using the onClick event, whereas images default to using the onLoad event (depending on the browser version for which you've chosen to display behaviors). You may well wish to choose a different event. When the event is triggered, the browser either hides or shows the layer.

Dragging a Layer

You can set layers so that your site visitors can reposition them, giving those visitors a great deal of customization power. (You've no doubt seen such applications on portal pages, where you can move information boxes around the page to suit your tastes.) A visitor simply clicks the layer and drags to freely reposition it on the Web page.

The Drag Layer behavior is either on or not, so it is best associated with the onLoad event handler for the Web page or an element in the layer being moved. To add repositioning capability for a layer, follow these steps:

1. Select an image or a link on the Web page, either in or out of a layer. In the Behaviors panel, select the Drag Layer behavior from the Add Behavior drop-down, which opens the Drag Layer dialog box.
   
   
2. In the dialog box are two tabs, Basic and Advanced. In the Basic tab, select the layer you want to make draggable (see Figure 10.4).
   
   

   Figure 10.4. These are Basic options for a dragged layer. The motion has been constrained so that the object moves only left and right.

   
   
3. Choose whether the motion should be unconstrained or constrained (if constrained, set the maximum amount the layer can move up, down, left, or right from its current position).
   
   
4. Enter the target zone for dropping the layer and whether the layer should snap into that zone if it's within a certain number of pixels.
   
   
5. In the Advanced tab, select which part of the element can be clicked to be dragged (either the object generating the event or the entire layer).
   
   
6. Select whether the layer should be brought to the front as the user drags it and dropped to the back after she releases it.
   
   
7. Specify any JavaScript that you want to loop during the drag operation, such as a position monitoring routine.
   
   
8. Specify any JavaScript that you want to run when the layer is dropped.
   
   
9. Click OK.
   
   

The behavior is now associated with the image or link you selected in step 1. Text links default to using the onClick event, whereas images default to using the onLoad event. The layer can now be moved about the screen.

Timeline, R.I.P.

DHTML provides for the animation of layers. DHTML animation moves a layer slightly (maybe only by a few pixels) and then moves it again and again. If done quickly enough, say every few tenths of a second or so, this creates the illusion that the Draw Layer is moving.

DHTML animation is processor intensive , meaning that the visitor's computer controls how smooth the animation is. However, DHTML animations are faster to download than GIF animations because only one graphic or HTML text is used. In addition, DHTML animations are easier to change.

Dreamweaver used to feature a special Timeline available for designers wishing to use DHTML layer animation. It was complex, nonintuitive, and produced inefficient code; but some designers built entire Web sites around it, and it could do things that are difficult to accomplish any other way ”for example, animating nonlinear motions , and using keyframing to trigger behaviors.

In Dreamweaver MX 2004, Macromedia has dropped the Timelines panel, probably at least in part because many designers nowadays use Flash when they want to move objects around on the page. However, if you still want or need to do DHTML-style layer animation, check out the free "Layer Animagic" extension by Project Seven. It's available on the Macromedia Exchange Web site, and at www.projectseven.com.