HTML and CSS Reference
In-Depth Information
Finally, to defi ne the default hotspot for an image, use
<area shape=”default” coords=”0, 0,
x
,
y
” ... />
where
x
is the width of the inline image in pixels and
y
is the height of the image. Any spot
in an inline image that is not covered by another hotspot activates the default hotspot link.
Creating a Client-Side Image Map
• To create a client-side image map, insert the
map
element
<map name=”
text
”>
hotspots
</map>
anywhere within the Web page body, where
text
is the name of the image map and
hotspots
is a list of hotspot areas defined within the image map. (Note: For XHTML,
use the
id
attribute in place of the
name
attribute.)
• To add a hotspot to the image map, place the
area
element
<area shape=”
shape
” coords=”
coordinates
” href=”
reference
”
alt=”
text
” />
within the
map
element, where
shape
is the shape of the hotspot region,
coordinates
is the list of points that defines the boundaries of the region,
reference
is the file or
location that the hotspot is linked to, and
text
is alternate text displayed for non-
graphical browsers.
• To define a rectangular-shaped hotspot, use
<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 lower-right corner of the rectangle.
• To define a circular hotspot, use
<area shape=”circle” coords=”
x
,
y
,
r
” ... />
where
x
and
y
are the coordinates of the center of the circle and
r
is the radius of the
circle.
• To define a polygonal hotspot, use
<area shape=”poly” coords=”
x1
,
y1
,
x2
,
y2
,
x3
,
y3
, ...” ... />
where (
x1
,
y1
), (
x2
,
y2
), (
x3
,
y3
), and so forth define the coordinates of each corner in
the multisided shape.
• To define the default hotspot, use
<area shape=”default” coords=”0, 0,
x
,
y
” ... />
where
x
is the width of the inline image in pixels and
y
is the height in pixels.
• To apply an image map to an inline image, add the
usemap
attribute
<img src=”fi
fi le
” alt=”
text
” usemap=”#
map
” />
to the inline image, where
map
is the name assigned to the image map.
To determine the coordinates of a hotspot, you can use either a graphics program such
as Adobe Photoshop or image map software that automatically generates the HTML code
for the hotspots you defi ne.
