Step Three: Attach the Behavior

Currently, Dreamweaver doesn’t support attaching a behavior to an image map. The workaround detailed here is to first attach the behavior to the full images in each layer and then cut and paste the code built by Dreamweaver. Dreamweaver includes a JavaScript Behavior called Show/Hide Layers that does exactly what we need.

Follow these steps to assign the Behavior to the Layers:

  1. Be sure the offLayer (the layer holding the basic, unchanged image) is visible and the onLayer is hidden. You can select the visibility options in the Layer Inspector to open and close the "eyes" of the respective layers.
  2. Open the Behavior Inspector by choosing the Behavior button from the Launcher or Window>Behaviors.
  3. Select the image in the offLayer.
  4. If necessary, choose 4.0 Browsers from the Browser option list.
  5. Click the Insert Event button (the plus sign) in the Events pane and choose (onMouseOver).
  6. Dreamweaver reminds you through a dialog box that this event can only be applied to an anchor tag, <a>, and proceeds to wrap one around the image targeted to "#".
  7. From the Actions pane, select the Insert Action button (the plus sign) and choose Show-Hide Layers from the option list.
  8. When the Show-Hide Layers dialog box opens, Dreamweaver searches for all the layers in your document. When they have displayed, select the onLayer and choose the Show button. Click OK when you've finished.

    9. So far, we've assigned one Behavior to make the onLayer visible when the pointer is over the image. Now we have to assign another Behavior to hide the onLayer when the pointer moves away from the image.

  9. In the Events pane, select the Insert Event button again and this time choose (onMouseOut).
  10. From the Actions pane, choose the Insert Action button and select Show-Hide Layers from the option list one more time.
  11. Now select the onLayer again and choose the Hide button. Click OK when you're done.

So what we now have is two Behaviors assigned to one image. At this point the Dreamweaver code for the <body> of our Web page reads like this:

<body bgcolor="#FFFFFF">

<div id="offLayer" style="position:absolute; width:200px; height:115px; z-index:1; visibility:visible">

<a href="#" onmouseover = "MM_showHideLayers('document.layers[\'onLayer\']','document.all[\'onLayer\']','show')"

onmouseout = "MM_showHideLayers('document.layers[\'onLayer\']','document.all[\'onLayer\']','hide')">

<img src="images/imagemap.jpg" width="607" height="191" border="0"></a>

</div>

<div id="onLayer" style="position:absolute; width:200px; height:115px; z-index:2; overflow:visible; visibility: hidden">

<img src="images/imagemap2.jpg" width="607" height="191">

</div>

</body>

The MM_showHideLayers() JavaScript function called by both onMouseOver and onMouseOut is automatically written to the <head> section. Part of this technique involves adding and modifying that code a bit which we'll cover in Step Five.








Next -->

Step One: Create Two Images

Step Two: Set up the Layers

Step Three: Attach the Behavior

Step Four: Make the Image Maps

Step Five: Complete the Code