Mapping Your Images with ImageReady

Image maps associate certain areas of an image with a Web address, or URL, so that when the user clicks those areas, the browser loads the image or Web page that the URL points to. These linked image areas act much like image slices, which you can prepare in Photoshop itself (see Book IX, Chapter 3). The main difference between image maps and slices is that slices are always rectangular in shape, whereas areas in image maps can be virtually any shape, even irregular polygons. The easiest way to create an image map is with the Image Map tool, available in ImageReady’s Tools palette or by pressing P. There are three variations of the tool: Rectangle, Circle, and Polygon. You use the tools in much the same way as the rectangular, elliptical, and polygonal lasso selection tools: Drag to create an image-map selection in the desired shape. After you create an area, selection handles appear at each of the corners and sides (in the case of rectangular and circular areas) or at each of the defining points for a polygonal area. You can drag these handles to resize and reshape the area. Each of the map selections you choose is given a generic name, which you can change to something more descriptive in the Image Map palette. You also need to enter the following information:
- The URL that the browser should jump to when that area of the image is clicked.
- The Target area in the destination page (such as the top of the page or another location you define).
- The alternate text that should appear when the mouse cursor passes over that area of the image map. The Alt text helps the visitor understand what a particular area of the image map represents. For example, if you’re creating an image map from a map of the United States, you might use the name of each state as alternate text for that state’s image-map area. This can be an aid to people with vision problems who are using a screen reader to navigate your site. When you create an image-map area, the dimensions of the area appear at the bottom of the Image Map palette.

You can also create image maps from layers. Select the areas you want to transform into image-map areas and copy and paste them into their own layers. Then choose Layer-->New Layer Based on Image Map Area. ImageReady creates an area from each layer’s contents. This is often a better choice when you want to add a rollover effect to an area because the image-map area automatically adjusts to any changes in the area produced by the rollover effect (such as a glow).

After you’ve defined your image-map areas, ImageReady creates and stores an HTML file you can use with your Web-authoring software to activate the image maps on your pages.