HTML Image Map
You have seen how to make an image function as a hyperlink, but sometimes you might want different areas of the image to hyperlink to different locations. For example, suppose you have a map of the United States, and you want the user to be able to click individual states to view a page containing information specific to her location. To create such an effect, you must use an image map.
An image map is an overlay for a graphic that assigns hyperlinks to specifically defined areas (hotspots) on the image. The hotspots can be rectangular, circular, or irregularly shaped (called a poly hotspot).
The position of a rectangular hotspot is defined by two points: its upper-left and lowerright corners. Each point is expressed as a pair of numbers that represent the horizontal and vertical distance (in pixels) from the upper-left corner of the image. For example, in the following image, the shed door is defined as a hotspot. The upper-left corner of the shed door is located at 284,170—in other words, 284 pixels to the right and 170 pixels down from the upper-left corner of the image. The lower-right corner of the shed door is at 352,314. Therefore, the code for defining this particular hotspot is as follows: