HTML and CSS Reference
To defi ne these hotspots, you create an image map that links a specifi ed region of the
inline image to a specifi c document. HTML supports two kinds of image maps: client-
side image maps and server-side image maps. A client-side image map is an image map
that is defi ned within the Web page and handled entirely by the Web browser running
on a user's computer, while a server-side image map relies on a program running on the
Web server to create and administer the map. For the CAMshots Web site, you'll create a
client-side image map.
Client-Side Image Maps
Client-side image maps are defi ned with the map element
<map name=” text ”>
where text is the name of the image map and hotspots are the locations of the hot-
spots within the image. For example, the following map element creates a client-side
image map named logomap :
Client-side image maps can be placed anywhere within the body of a Web page because
they are not actually displayed by browsers, but simply used as references for mapping
hotspots to inline images. The most common practice is to place a map element below
the corresponding inline image.
For XHTML documents,
use the id attribute in
place of the name attribute
to identify an image map.
Defi ning Hotspots
An individual hotspot is defi ned using the area element
<area shape=” shape ” coords=” coordinates ” href=” reference ”
alt=” text ” />
where shape is the shape of the hotspot region, coordinates are the list of points that
defi ne the boundaries of the region, reference is the fi le or location that the hotspot is
linked to, and text is alternate text displayed for non-graphical browsers. Hotspots can
be created in the shapes of rectangles, circles, or polygons (multisided fi gures). You use
a shape value of rect for rectangular hotspots, circle for circular hotspots, and poly
for polygonal or multisided hotspots. A fourth possible value for the shape attribute,
default , represents the remaining area of the inline image not covered by any hotspots.
There is no limit to the number of hotspots you can add to an image map. Hotspots can
also overlap. If they do and the user clicks an overlapping area, the browser opens the
link of the fi rst hotspot listed in the map.
Hotspot coordinates are measured in pixels , which are the smallest unit or dot in a
digital image or display. Your computer monitor might have a size of 1024 x 768 pixels,
which means that the display is 1024 dots wide by 768 dots tall. For example, the header
image that Gerry uses in his Web site has dimensions of 780 pixels wide by 167 pixels
tall. When used with the coords attribute of the area element, pixel values exactly
defi ne the location and size of a hotspot region.
Each hotspot shape has a different set of coordinates that defi ne it. To defi ne a rectan-
gular hotspot, apply the area element
<area shape=”rect” coords=” x1 , y1 , x2 , y2 ” ... />
where x1 , y1 are the coordinates of the upper-left corner of the rectangle and x2 , y2 are
the coordinates of the rectangle's lower-right corner. Figure 2-31 shows the coordinates
of the rectangular region surrounding the Photo Glossary hotspot.