Image maps are images that have one or more clickable regions called hotspots. Each hotspot acts as a separate link. The links can go to different pages or execute different scripts, which makes image maps more useful than regular old clickable graphics, where the entire image acts as a single link.
GEEKSPEAK
An image map is an image with one or more hotspots, or clickable regions. |
In an image map, there's nothing special about the image file itself. You can start with any Web graphic. What turns the image into an image map is a block of HTML code that defines the shape, location, and function of the hotspots. So, an image map consists of two parts:
The image file itself
The block of code that defines the hotspots
TIP
Since the hotspots are in the HTML, not in the image itself, your image map becomes a regular old nonclickable image again if you separate the image from its code. Moving the image to another page without also moving the block of code that defines the hotspots renders the image map inert. |
Put them together, and you have something like Figure 35.1. Notice that the img tag gets the usemap attribute, which tells the browser which map definition to apply. You can have as many image maps per page as you like, and you can even use the same definition for completely different images.
<img src="/image/library/english/10077_mars.jpg" width="500" height="300" usemap="#mars"> <!-- Begin hotspot definitions --> <map name="mars"> <area shape="rect" coords="9,3,164,148" href="> <area shape="rect" coords="172,2,328,149" href="> <area shape="rect" coords="334,5,487,149" href="> <area shape="rect" coords="9,151,163,294" href="> <area shape="rect" coords="171,153,327,296" href="> <area shape="rect" coords="334,152,488,295" href="> </map> <!-- End hotspot definitions -->
TIP
You can put your map tags anywhere in the HTML, but the most convenient place for them is at the bottom of the HTML document. This way, you always know where to find your image-map definitions if you need to modify them or move them to another page. |
The definition itself appears between the map tags. The name attribute of the map tag corresponds to the usemap attribute of the img tag, with the notable exception that the usemap attribute prefixes the name of the definition with a number sign (#), while the name attribute has no prefix.
|
Each hotspot in the image map gets its own area tag, so if you have six hotspots like the image map in Figure 35.1, you need six area tags. These area tags can appear in any order. As you might expect, the attributes of the area tag determine where and how the hotspot appears:
The shape attribute determines which of the three possible hotspot shapes you're using: rectangular (rect), circular (circle), or polygonal (poly).
The coords attribute determines the position and size of the hotspot. Depending on the value of the shape attribute, the values in the coords attribute have different meanings (see Table 35.1). The upper-left corner of any image is coordinate (0,0). The bottom-right corner of a 500-by-300 image is coordinate (500,300).
SHAPE | NUMBER OF COORDS | MEANING | EXAMPLE |
|---|---|---|---|
circle | Always 3 | x position of center point, y position of center point, radius of circle in pixels | coords="10,12,20" |
poly | At least 6, and always in multiples of 2 | x position of shape point, y position of shape point (repeat for as many shape points as you need to describe the polygon) | coords="100,150,200,100,50,150" coords="275,50,300,150,350,100,400,150,450,50" |
rect | Always 4 | x position of top-left corner, y position of top corner, x position of bottom-right corner of bottom-right corner, y position corner | coords="0,0,100,150" |
TIPThe name of the image map doesn't have to correspond to the name of the image file, but using the same name for both is a convenient way for you to keep track of which image map goes with which image. |
The href attribute contains the hotspot's link. Its value can be a path to a new page, or it can open a blank email window (href= or launch a script (href=>
TIPBe careful that your hotspot areas don't overlap. When this happens, browsers get confused, and your image map probably won't work correctly. |
So, if you want to make circular hotspots instead of rectangular ones for the image mars.jpg, you simply change the shape and update the coordinates:
<img src="/image/library/english/10077_mars.jpg" width="500" height="300" usemap="#mars"> <!-- Begin hotspot definitions --> <map name="mars"> <area shape="circle" coords="85,76,70" href="> <area shape="circle" coords="245,76,70" href="> <area shape="circle" coords="410,76,70" href="> <area shape="circle" coords="85,225,70" href="> <area shape="circle" coords="245,225,70" href="> <area shape="circle" coords="410,225,70" href="> </map> <!-- End hotspot definitions -->
TIP
You can mix and match shapes in the same image map. Your hotspots don't all have to be the same shape. |