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:


<nav>
<img src="images/bar.jpg" style="border:none">
<map name="navbar" id="navbar">
<area shape="rect" coords="0,0,60,30" href="home.htm">
<area shape="rect" coords="70,0,155,30" href="tips.htm">
<area shape="rect" coords="165,0,250,30" href="problem.htm">
<area shape="rect" coords="260,0,325,30" href="products.htm">
<area shape="rect" coords="335,0,400,30" href="about.htm">
<area shape="rect" coords="410,0,490,30" href="contact.htm">
</map>
</nav>