Adding Behaviors to Image Maps

Moving the pointer over any portion of a standard rollover image calls up the JavaScript script and causes the image swap to happen. There might be times, however, when you want the rollover to occur only when the user rolls over a certain part of the image. In such cases, you can use image maps to define those hotspot areas.

1.	In meditations.html, select the med_img_map.jpg image and give it the name nav. Next, use the Rectangular Hotspot tool on the Property inspector to draw an image map closely around the word meditations. The image map makes only the word meditations on the med_img_map.gif image clickable.
2.	Click the plus sign (+) button on the Behaviors panel and choose Swap Image from the Actions menu. You might get a dialog box informing you that a description should be provided in the alt text field on the Property inspector. In this exercise, the description has already been assigned, so you can ignore this message. You are applying a swap image behavior to an image map. The behavior does not apply to any area of the image surrounding the image map. Note Because you just created the image map on the med_img_map.jpg image, the hotspot is automatically selected. If you are not applying the behavior directly after creating the image map, you should choose the pointer tool on the Property inspector and click the image map to select it to make the hotspot activeyou don't want to apply the rollover to the entire image.
3.	In the Images list, select the photoArea image. Click the Browse button next to the Set source to text field and find med_hands.jpg in the images folder. Click Choose (Macintosh) or OK (Windows) to pick the image and return to the Swap Image dialog box. You have now selected the image that will appear on the left when you roll over the hotspot in a browser. Note If you designate the image with the hotspot as the one to be replaced, the entire image will be replaced even though the clickable area is only on a certain portion of the original image.
4.	Make sure that the Preload images and Restore images onMouseOut checkboxes are checked; then click OK. The dialog box closes, and you return to the Document window. Whenever the image map on the med_img_map.jpg image is selected, you can see the Swap Image listed in the Behaviors panel. If you have the image selected but do not have the image map selected, you will not see the swap image listed in the Behaviors panel.
5.	Save the file and test your work in the browser.

Using image maps in combination with behaviors can give you a significant amount of additional control over your images, actions, and events.