HTML and CSS Reference
In-Depth Information
(a) Shapes with
coordinates.
rectangular shape
coordinates
circle edge
coordinates
circle center
coordinates
circle radius (72)
polygonal shape
coordinates
<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=” “ />
</map>
(b) HTML code to map
shapes.
Figure 5-14
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.
