HTML and CSS Reference
In-Depth Information
Creating an image map.
This is the final step in the four-step process of image mapping. The HTML code is very
specific about what is required for image mapping. It only takes one coordinate that is not
correct or one shape that is wrong for the image map not to work as intended.
Use the <map> tag.
Plan
Ahead
•
The <map> tag identifies the name and ID for the image map. It
is important that the name is spelled correctly, and that the same name is used in the
usemap attribute in the <img> tag.
Use the <area> tag.
•
The <area> tag is also very important in image mapping. You
identify the area shape and the x- and y-coordinates in this tag. Again, if even one
number is typed incorrectly, it can make the image map nearly unusable.
Coding the Image Map Using HTML Tags and Attributes
Thus far, the chapter has addressed three of the four steps in creating an image map:
the tahanna.jpg image to use as an image map has been selected and added to the home page;
the hotspots have been sketched on the tahanna.jpg image; and Paint was used to locate the
x- and y-coordinates for each map area on the image that serves as a hotspot. With these
steps completed, the final step is to code the image map using HTML. Table 5-7 shows the
two HTML tags used to create an image map, along with several key attributes of each.
Table 5-7 Tags and Tag Attributes Used to Create Image Maps
Tag
Attribute
Function
<map> </map>
• Creates a client-side image map
name
• Defines the map's name
<area>
• Defines clickable areas within a <map> element, as well as links and anchors
shape
• Indicates the shape of the map area; possible values are rect, poly, and circle
coords
• Indicates the x- and y-coordinates of the points bounding the map area
href
• Indicates the link (URL) used for a map area
alt
• Indicates the alternate text for the image
The start <map> tag and end </map> tag define the section of code that includes
the client-side image map. The <area> tag is used to define the clickable areas on the
image map. An example of the <area> tag is:
<area shape=”rect” coords=”305,63,354,82” href=”skiing.html”
alt=”Skiing” />
where the shape attribute with the rect value defines the clickable map area as a
rectangle. Other possible values for the shape attribute are poly (polygon) and circle
(circle). The alt attribute defines alternate text for the image. The coords attribute
indicates the pairs of x- and y-coordinates that identify the boundaries of the clickable
area. In a rectangle, you next have to determine the coordinates of the top-left and
bottom-right corners. The href attribute designates the URL of the link. In this example,
a Web page visitor can click anywhere within the rectangles surrounding the four words
on the image (Home, Skiing, Boating, and Dining). For instance, the rectangle with top-
left x- and y-coordinates 305,63 and bottom-right x- and y-coordinates 354,82 will link
to the Web page skiing.html.
