HTML and CSS Reference
In-Depth Information
Defining a Rectangle
Figure 9.28 shows how to obtain coordinates for rectangle regions. Note the x,y coordi-
nates for the upper-left and lower-right corners of the rectangle.
FIGURE 9.28
Getting the
coordinates for
a rectangle.
(0,0)
Top Left (342,19)
Bottom right (440,318)
The
<map>
and
<area>
Tags
If you're creating your imagemap manually and you've written down all the coordinates
for your regions and the URLs they'll point to, you can include this information in the
client-side imagemap tags on a web page. To include a client-side imagemap inside an
HTML document, use the
<map>
tag, which looks like the following:
<map name=“mapname”>
coordinates and links
</map>
The value assigned to the
name
attribute is the name of this map definition. This is the
name that will be used later to associate the clickable image with its corresponding coor-
dinates and hyperlink references. So, if you have multiple imagemaps on the same page,
you can have multiple
<map>
tags with different names.
Between the
<map>
and the
</map>
tags, enter the coordinates for each area in the
imagemap and the destinations of those regions. The coordinates are defined inside yet
another new tag: the
<area>
tag. To define a rectangle, for example, you would write the
following:
<area shape=“rect” coords=“41,16,101,32” href=“test.html”>
The type of shape to be used for the region is declared by the
shape
attribute, which can
have the values
rect
,
poly
,
circle
, and
default
. The coordinates for each shape are
