Dividing an Image into Clickable Regions

A clickable image is like a collection of buttons combined together in one image. A click in one part of the image brings the user to one destination. A click in another area brings the user to a different destination.

There are two important steps to implementing a clickable image: First you must map out the different regions of your image, and second you must define which destinations correspond to which areas of the image.

To divide an image into clickable regions:

1.	Create an image, consulting Chapter 5, Images, as necessary.
2.	Open the image in Photoshop or other image editing program.
3.	Choose Window > Info (Figure 6.27). Figure 6.27. In either Photoshop (shown) or Photoshop Elements, choose Window > Info to show the Info palette.
4.	Make sure that the units are pixels (by clicking the tiny arrow next to the cross hairs at the bottom of the Info window).
5.	Point the cursor over the upper-left corner of the region you wish to define.
6.	Using the Info window, jot down the x and y coordinates for that corner (Figure 6.28). Figure 6.28. Place the cursor in the upper-left corner of the rectangle and jot down the x and y coordinates shown in Photoshop's Info palette. (In this example, x=395 and y=18.) Then do the same with the lower-right corner.
7.	Repeat steps 56 for the rectangle's lower-right corner, for each point of a polygon, or for a circle's center and radius.