HTML and CSS Reference
In-Depth Information
(a) Shapes with
rectangular shape
circle edge
circle center
circle radius (72)
polygonal shape
<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
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.
Search WWH ::

Custom Search