Visual Elements and Graphics - Web Development and Design Foundations with XHTML - page 143

image maps is to create real clickable maps that Web site visitors can manipulate to
choose a location. Figure 4.23 shows the home page of Recreation.gov with a map of the
United States. Visitors use the map to select the state they are interested in. You can also
visit the textbook's Web site at http://webdevfoundations.net to try out an image map.
Figure 4.23
An image map is
used to select a
location on this Web
site
Most Web authoring software, such as Adobe Dreamweaver, have wizards or other tools to
help you create image maps quickly and easily. If you don't have access to a Web authoring
tool to create an image map, the most difficult part is determining the pixel coordinates of
the hyperlink area. The coordinates are in pairs of numbers that signify the number of
pixels from the top and the number of pixels from the left edge of the image. If you are
working with a graphic artist, he or she may be able to supply you with the coordinates.
Another option is to open the image in a graphics application such as Adobe Fireworks,
Adobe Photoshop, or even MS Paint to obtain approximate coordinates. You can modify
these coordinate values as you work with the XHTML on your Web page. Image maps can
be used to create clickable areas in three shapes: rectangles, circles, and polygons.
An image map uses two new elements: <map> and <area /> . The <map> tag is a container
tag and is used to begin and end the image map. The name attribute is used to correspond
the <map> tag with its associated image. The image tag uses the usemap attribute to indicate
which <map> to use. For example, <img src="fishingboat.jpg" usemap="#boat" />
will be associated with the image map described by <map name="boat" id="boat"> . The
id attribute is part of XHTML. The name attribute is required for backward compatibility
with older browsers that were written to process HTML.
The <area /> tag is used to define the coordinates or edges of the map area and uses
shape , coords , alt , and href attributes. Table 4.3 describes the type of coordinates
( coords ) needed for each shape value.