HTML and CSS Reference
In-Depth Information
5
Creating an Image Map
Introduction
Many of the Web pages in Chapters 2 through 4 used the <img> tag to add images. In
Chapter 3, an image was also used as a link back to the home page, by using the <a> </a>
tags to define the image as the clickable element for the link. When an image is used as
a link, as in Chapter 3, the entire image becomes the clickable element, or hotspot. With
an image map, the entire image does not have to be clickable. Instead, one or more
specific areas serve as hotspots. An image map is a special type of inline image in which
you define one or more areas as hotspots. For example, each hotspot in an image map can
link to another part of the same Web page or to a different Web page. Using an image
map in this way gives Web page developers significant flexibility, as well as creative ways
to include navigation options. Instead of using only text links, a Web page can include an
image map that highlights key sections of a Web site and allows a user to navigate to that
section by clicking the appropriate area of the image map.
Project — Lake Tahanna Tourism
Chapter 5 demonstrates how to create an image map with links to other Web pages
within the Lake Tahanna Tourism Web site. The Lake Tahanna Tourism Web site
includes the home page and three additional Web pages, each linked to the home
page using an image map and text links, and an e-mail link, as shown in Figure 5-1.
In Chapter 5, you will create the home page of the Lake Tahanna Tourism Web site
(Figure 5-1a) and an external style sheet that is used with all Web pages in the site.
On the home page, you will include a link to the tahanna@isp.com e-mail address that
opens an e-mail program. The Web pages shown in Figures 5-1b, 5-1c, and 5-1d are
included in the Data Files for Students. Two images, tahanna.jpg and tahannasm.jpg,
are also included in the Data Files for Students. The first image, tahanna.jpg, is shown
in Figure 5-1a. All linked Web pages use the smaller image tahannasm.jpg, as shown in
Figures 5-1b, 5-1c, and 5-1d. Even though the second image is smaller, the text links
are in the same position. (See the inside back cover of this topic for instructions on
downloading the Data Files for Students, or contact your instructor for information
about accessing the required files.) HTML tags are used to create the image map that
supports the four clickable areas in the image. One feature of the Web is its support for
graphics, so Web visitors expect to view many images on the Web pages that they visit.
Images make Web pages more exciting and interesting to view and, in the case of image
maps, provide a creative navigational tool.
HTML 234
