HTML and CSS Reference
In-Depth Information
noted using the
coords
attribute. For example, the
coords
attribute for a
poly
shape
appears as follows:
<area shape=“poly” coords=“
x1,y1,x2,y2,x3,y3,...
,
xN,yN
” href=“
URL
”>
Each
x,y
combination represents a point on the polygon. For
rect
shapes,
x1,y1
is the
upper-left corner of the rectangle, and
x2,y2
is the lower-right corner:
<area shape=“rect” coords=“
x1,y1,x2,y2
” href=“
URL
”>
For
circle
shapes,
x,y
represents the center of a circular region of size
radius
:
<area shape=“circle” coords=“
x,y,radius
” href=“
URL
”>
9
The
default
shape is different from the others—it doesn't require any coordinates to be
specified. Instead, the link associated with the
default
shape is followed if the user
clicks anywhere on the image that doesn't fall within another defined region.
Another attribute you need to define for each
<area>
tag is the
href
attribute. You can
assign
href
any URL you usually would associate with an
<a>
link, including relative
pathnames. In addition, you can assign
href
a value of
“nohref”
to define regions of the
image that don't contain links to a new page.
NOTE
If you're using client-side imagemaps with frames, you can include
the
target
attribute inside an
<area>
tag to open a new page in
a specific window, as in this example:
<area shape=“rect” coords=“
x1,y1,x2,y2
” href=“URL” target=
“window_name”>
You need to include one more attribute in HTML5. Earlier in this lesson, you learned
how to specify alternate text for images. In HTML5, the
alt
attribute is an additional
requirement for the
<area>
tag that displays a short description of a clickable area on a
client-side imagemap when you pass your cursor over it. Using the
<area>
example that
I cited, the
alt
attribute appears as shown in the following example:
<area shape=“rect” coords=“41,16,101,32” href=“test.html” alt=“test link”>
The
usemap
Attribute
After you've created your
<map>
tag and defined the regions of your image using
<area>
tags, the next step is to associate the map with the image. To do so, the
usemap
attribute
of the
<img>
tag is used. The map name that you specified using the
name
attribute of the
<map>
tag, preceded by a
#
, should be used as the value of the
usemap
attribute, as shown
in this example:
<img src=“image.gif” usemap=“#
mapname
”>
