HTML and CSS Reference
In-Depth Information
coordinated on the Web server, which does not allow for quick updates. Client-side image
maps help reduce the load on the Web server, generally download faster, and provide a
faster response when a user clicks a link. In this chapter's project, you will create a client-
side image map with four links on the home page of the Lake Tahanna Tourism Web site.
You will learn more about client- and server-side image maps later in the chapter.
Understand the image map process.
Before inserting the graphical and color elements on a Web page, you should plan how you
want to format them. By effectively utilizing graphics and color, you can call attention to
important topics on the Web page without overpowering it. Creating a client-side image
map for a Web page is a four-step process:
1.
Select an image to use as an image map.
Not all images are appropriate for good
image mapping. Besides causing difficulty to the Web developer to find the points to
plot, nondistinct areas make it difficult for visitors to see where one link might end and
another begins. When choosing an image to map, choose wisely.
2.
Sketch in the hotspots on the image.
It is sometimes good to print a copy of the image
and draw the hotspot areas on top of the paper image. You can then take that hard
copy and review it while working with the image in the image editing software. When
sketching (either on paper or in the software), determine what shapes (i.e., circle,
rectangle, or polygon) make sense for the specific area that you want to link. Based on
this determination, start the next step of plotting those areas on the image.
3.
Map the image coordinates for each hotspot
. This chapter explains what x- and
y-coordinates you need to provide for every linkable area. One thing to consider is
making sure that the linkable areas do not run over one another. This overrun ends up
confusing your Web site visitors because they think they will link to one area, and the
coordinates take them somewhere else.
4.
Create the HTML code for the image map
. Writing HTML code for an image map is
different from anything that you have done thus far in the topic. When you create an
image map, you first insert the image itself and then identify the name of the map that
you use later in the HTML code. Further down in the code, you actually use that name
and identify the map areas that form the boundaries around the hotspot.
Plan
Ahead
Creating an Image Map
An image map consists of two components: an image and a map definition that defines
the hotspots and the URLs to which they link.
Selecting Images
Not all images are appropriate candidates for image mapping. An appropriate
image, and a good choice for an image map, is one that has obvious visual sections. The
map of Italy image shown in Figure 5-9a on the next page, for example, has distinct,
easy-to-see sections, which serve as ideal hotspots. A user could easily select an individual
area on the map to link to more information about each region. The image of Italy in
Figure 5-9b, however, would not be a good choice because the boundaries of the regions
are indistinct.
