Let's review what we have done so far:

• Before we began working in Dreamweaver, we built two different images -- one to depict the regular state and the second to show the "on" state.
• We used Dreamweaver to create two identical sized and positioned layers. We then inserted our two images into the hidden layers with the "on" graphic placed on top.
• Next, we used Dreamweaver to assign JavaScript Behaviors which reveal the hidden layer when the user's pointer passes over the image.
• We just used Dreamweaver's Image Map Editor to build two image maps: one used to provide clickable regions on the graphic and one used to provide rectangular coordinates to be used for clipping.

All that left to do now is to tweak the code. Granted, it's going to be a pretty big tweak, but Dreamweaver has really done all the hard work of inserting the layers and writing the cross-browser code for the Behaviors. Now, it's time to move to your favorite text editor and customize the HTML.

Cut and Paste the Function Calls

First, let's move the JavaScript function calls, onMouseOver and onMouseOut, away from the image and into each of the image map areas.

1. Cut the entire function call line from inside the <a> tag.
2. Delete the closing </a> tag, following the <img> tag.
3. Move your cursor inside the first <area> tag at the end and paste the function calls into the tag.
4. Before, your code would read:

<area shape="circle" coords="300,98,56" href="nest.htm">

Now, it should read something like:

<area shape="circle" coords="300,98,56" href="nest.htm" onmouseout="MM_showHideLayers('document.layers[\'onLayer\']','document.all[\'onLayer\']','hide')" onmouseover="MM_showHideLayers('document.layers[\'onLayer\']','document.all[\'onLayer\']','show')">

5. Repeat for every <area> defined in your image map.

Point to the Right Map

You won't be able to test the above changes until you make one more minor change. Remember how, in Step 4, you created a temporary image map to grab the clipping coordinates? Part of that process puts a usemap=mapname attribute in the <img> tag of one of the graphics. You now need to find that reference and change the usemap value so that both images are pointing to our real image map.

Now when you test your page in a 4.0 browser, the image should only change when your pointer goes over the mapped areas. However, you'll notice that all of the image changes instead of just one area. It's now time to put that in place with the clipping function I mentioned earlier.

Build the Clipping Array

The next step involves taking the coordinates gathered from our pseudo-image map and plugging them into a JavaScript array. Because I kept the top and bottom coordinates constant, I only need to bring in the left and the right values. I also need an identifying number to mark each image map area.

In my example, I only had 3 image map buttons to include, so you see only three setParams statements. However, you could have as many buttons as you like.

The following code is included in the <script> section, above the Macromedia functions.

The two variables, clTop and clBot, hold the values for the clip top and the clip bottom range, respectfully. Again, because these are constant, I can go ahead and set them.

Integrating the Code

Our last task is to tie all of our disparate parts together. First we need to pass the identifying number from each image map area to the function. I do this by just adding the number to the end of the each function call in each <shape> tag. Where, before the code read:

Now, it reads:

The additional number is bolded for easy reference. Be sure to use a unique number to identify each defined shape. I've also slightly modified the function name by adding "IM" for image map at the end. This is done to prevent Dreamweaver from overwriting the function should the same behavior be applied elsewhere on the page. Naturally, the name of the actual function needs to be modified as well.

Now, we need to modify the Dreamweaver generated function to read our new value and to act on our array. Listing 12-1 shows the basic Dreamweaver code for showing and hiding layers:

Listing 12-1: Basic Dreamweaver Function

Modifying the code involves the following:

• Modify the function name as mentioned earlier, everywhere in the script.
• Add needed variables: clRight (Right Clip value), clLeft (Left Clip value) and the_clip (the identifying number of the defined area).
• Increase the number of arguments to examine passed by the function call to account for the added value.
• Pull the identifying number of the clip from the arguments.
• Assign the value to the Left Clip variable, clLeft.
• Assign the value to the Right Clip variable, clRight.
• In the Netscape section, set the clipping range for the Left and the Right.
• In the Internet Explorer section, set the entire clipping range.

You can see the changes, marked in bold, in Listing 12-2. Once you've implemented these changes, test your object. You should see the type of reaction demonstrated in Figure 12-8.

Listing 12-2: Modified Image Map Rollover Function

function MM_showHideLayersIM() { //v1.2 Modified by jlowery

var i, visStr, args, theObj;

var clRight, clLeft, the_clip;

args = MM_showHideLayersIM.arguments;

for (i=0; i<(args.length-2); i+=4) { //with 4 args (objNS,objIE,visStr,the_clip)

visStr = args[i+2];

the_clip = args[i+3];

clLeft = arClips[the_clip][0];

clRight = arClips[the_clip][1];

if (navigator.appName == 'Netscape' && document.layers != null) {

document.onLayer.clip.left=clLeft

document.onLayer.clip.right=clRight;

theObj = eval(args[i]);

if (theObj) theObj.visibility = visStr;

} else if (document.all != null) { //IE

if (visStr == 'show') visStr = 'visible'; //convert vals

if (visStr == 'hide') visStr = 'hidden';

document.all.onLayer.style.clip ="rect(" + clTop + " " + clRight + " " + clBot + " " + clLeft + ")";

theObj = eval(args[i+1]);

if (theObj) theObj.style.visibility = visStr;

} }

}

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