You may have noticed that I keep referring to "creating image maps" in the plural. In addition to the regular map, we'll use Dreamweaver's Image Map Editor to draw the coordinates necessary to perform the clipping function.

The first part of Step Four is to make the actual image map that will eventually be used to activate the onMouseOver and onMouseOut events. Follow these steps to complete this task:

1. Select an image in one of the layers. It's up to you to decide which image (the "on" or the "off") to use to draw the image map. I preferred the "on" layer with the slightly fuzzier edges.
2. From the extended Image Property Inspector, select the Map button.
3. In the Image Map Editor, first give your map a unique name.
4. Draw out your image maps using the drawing tools and give each area a URL in the Link box. Complete the Target and Alt text boxes, if desired. Click the OK button when you're done.

Normally, this is where you would stop when building an image map, but we're going to use Dreamweaver's Image Map Editor a second time to find our clipping coordinates for us.

You can only have one image map per image, but luckily, we have two identical images to work with. Follow these steps to build your clipping map:

1. Temporarily reverse the visibility of the two layers so that the layer that containing the graphic used to build the image map is hidden.
2. Select the image in the now visible layer. In my example, this would be the "off" layer.
3. Again, select the Map button from the extended Image Property Inspector.
4. Give your new image map a temporary name.
5. Select the Rectangle drawing tool.
6. Draw an rectangular area around each of the previously build image map areas. Give each area a unique temporary link.

It's important that these areas not overlap, but be drawn side-by-side.

7. Click the OK button when you've finished.

When Dreamweaver builds code for an image map, it places the first item you define as the last item in the code list and the last item as the first. The rectangular coordinates are placed in a left, top, right, bottom order, as can be seen in this code fragment:

Notice that I kept the top (0) and the bottom (176) constant for all three areas. While this is not essential it makes your coding a tad simpler and, if possible, is recommended.

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