HTML and CSS Reference
In-Depth Information
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
”>
hotspots
</map>
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
:
<map name=”logomap”>
...
</map>
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.
