HTML and CSS Reference
(a) Shapes with
circle radius (72)
<map name=”shapes” id=”shapes”>
<area shape=”rect” coords=”46,35,137,208” href=” “ alt=” “ />
<area shape=”circle” coords=”308,113,72” href=” “ alt=” “ />
<area shape=”poly” coords=”78,309,183,251,316,262,317,344,136,402”
href=” “ alt=” “ />
(b) HTML code to map
In the Lake Tahanna Tourism image (tahanna.jpg), the image map will use four
rectangular shapes for the four hotspots, as sketched in Figure 5-11 on page HTML 245.
Clickable areas are mapped in rectangular shapes enclosing the following areas: Home,
Skiing, Boating, and Dining.
Coding the Map
The final step in creating an image map is writing the HTML code for the map. To
create a client-side image map, the tags <map> </map> and <area> are used. The map start
tag ( <map> ) and map end tag ( </map> ) create the client-side image map. The <area> tag
defines the specific areas of the map and the links and anchors for those areas. The x- and
y-coordinates for each map area are inserted into the <area> tag with the coords attribute,
within quotation marks and separated by commas. The HTML tags, attributes, and values
needed to code the map are discussed later in this chapter.