HTML and CSS Reference
To insert the <area> tag for the circle, rectangle, and polygon shapes, such as those
shown in Figure 5-14 on page HTML 248, the HTML code would be as follows:
<area shape=”circle” coords=”308,113,72” href=”circle.html”>
<area shape=”rect” coords=”46,35,137,208” href=”rect.html”>
<area shape=”poly” coords=”78,309,183,251,316,262,317,344,
To Create an Image Map
For the image map on the Lake Tahanna Tourism home page, four clickable areas are created: Home, Skiing,
Boating, and Dining. All four clickable areas are rectangular in shape. Table 5-8 shows the HTML code used to
create the image map for the tahanna.jpg image on the home page. Line 29 defines the name of the image map as
menubar, which is the name referenced in the usemap attribute of the <img> tag that added the tahanna.jpg image.
Lines 29 through 32 define the four rectangular map areas for the image map, based on the x- and y-coordinates
listed in Table 5-1 on page HTML 252. Each rectangular map area links to one of the four other Web pages on
the Web site.
Table 5-8 HTML Code for Creating an Image Map
HTML Tag and Text
<map name=”menubar” id=”menubar”>
<area shape=”rect” coords=”195,63,247,82” href=”tahanna.html” alt=”Home” />
<area shape=”rect” coords=”305,63,354,82” href=”skiing.html” alt=”Skiing” />
<area shape=”rect” coords=”413,63,470,82” href=”boating.html” alt=”Boating” />
<area shape=”rect” coords=”521,63,574,82” href=”dining.html” alt=”Dining” />
The following step enters the HTML code to create the image map for the tahanna.jpg image.
If necessary, click
shown in Table 5-8
and press the e n t e r
key once on line 34
Enter the HTML code
on line 35
For this project, I am
using all rectangular
shapes. Could I have
used other shapes for
these four clickable areas?
For these navigation links, there really is no other shape that could be used. You may think to use a polygon
shape for the links, for instance, but that would make the clickable areas confusing to the user.
Could I have used other x- and y-coordinates for this image map?
Yes. This is a very subjective part of image mapping. You need to select the points in the boundaries that
make sense to you. Just make sure that the points will also make sense to your Web page visitors. Also, take
care not to overlap the points or you will end up with false results.