• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Lesson 5. Adding User Interactivity > Adding Behaviors to Image Maps

Adding Behaviors to Image Maps

Moving the pointer over any portion of a standard rollover image will call up the JavaScript and cause the image swap to happen. There may 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.

In architecture.html, use the image-name text field on the Property inspector to name all of the navigational images that are located in a row near the top of the page: nav_history.gif should be named history, nav_technology.gif should be named technology, nav_lights.gif should be named lights, nav_resources.gif should be named resources, and nav_culture.gif should be named culture.

If you were to create standard rollovers for these navigational images, the areas between each of the words would cause the swap image to occur. By using image maps to define the hotspots on the images, you can control when the rollover happens.

Draw an image map closely around the word history on the nav_history.gif image.

The image map makes only the word history on the nav_history.gif image clickable.

Select the cursor tool on the Property inspector and click the image map you just created to select it. Click the plus sign (+) button on the Behaviors panel and choose Swap Image from the Actions drop-down menu.

You are applying a swap image behavior to an image map. The behavior will not apply to any area of the image surrounding the image map.

In the Images list, make sure the history image is selected. Click the Browse button next to the Set Source To text field, and find nav_history_on.gif in the Images folder. Click Open (Macintosh OS 9), Choose (Macintosh OS X) or OK (Windows) to pick the image and return to the Swap Image dialog box.

You have now selected the image that will replace the nav_history.gif image when you roll over the hotspot in a browser. The entire image will be replaced, even though the clickable area is only on a certain portion of the original image.

Make sure the Preload Images and Restore Images onMouseOut check boxes are checked. Then click OK.

The dialog box closes, and you return to the document window. Whenever the image map on the nav_history.gif image is selected, you will be able to 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.

Repeat steps 2 through 5 for the technology, lights, resources, and culture images. Save the file and test your work in the browser.

The images to use for the swaps are indicated by the _on suffix. Using image maps in combination with behaviors can give you a significant amount of additional control over your images, actions, and events.

Your document should now show the image maps created closely around the navigation word like the example shown here.



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint