246996016-HTML5-Step-by-Step

174 Chapter 10
Creating an 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:
Top eft corner of
the mage 0,0
Top eft corner of
hot spot 284,170
Mouse po nter
changes when
over a hot spot
ot spot area
( nv s b e)
Bottom r ght corner of
hot spot 352,314