HTML and CSS Reference
In-Depth Information
In Example 12.3 the coordinates are plotted with rectangular image mappings, but
there are other shapes that can be used: the circle and polygon. (The polygon shape can
be used to customize the area of the link.) Note: All coordinate values are relative to the
top left corner of the image (0,0).
Table 12.5
Shape Coordinates for an Imagemap
Shape
Coordinates--coords
rect
“x1,y1,x2,y2”
Top left and bottom right
corners of the rectangle.
circle
“x.y,r”
Center and radius of the circle.
poly
“x1,y1,x2,y2,x3,y3,...”
Corners of the polygon.
default
The remaining area of the
image, not defined by any
coordinates.
EXAMPLE
<area shape=
rect coords
= x1,y1, x2,y2 href="http://www.domain.com">
<area shape=
circle coords
= x1,y1, x2,y2 href="http://www.domain.com">
<area shape=
polygon coords
= x1,y1, x2,y2, .., xn,yn
href="http://www.domain.com">
EXAMPLE
12.3
<html>
<head><title>Using Links </title>
1
<map name="my_image_map">
2
<area shape="rect"
href="nicky.html
" coords="68,41,159,190">
<area shape="rect"
href="daniel.html
" coords="202,28,287,133">
<area shape="rect"
href="jake.html
" coords="273,20,358,125">
<area shape="rect"
href="kimmy.html
" coords="350,76,431,185">
<area shape="rect"
href="uncledan.html
"
coords="403,10,491,98">
<area shape="rect"
href="jessica.html
" coords="485,8,573,96">
3
<area shape="default"
href="family.gif
">
</map>
Continues
