What Are Image Maps?

You've learned how to use an image to link to another page, but did you know that you can subdivide a single image and link each part of that image to another page? This type of subdivided image is called an image map.

Image Map

An image that is divided into pieces that are linked to (or, mapped to) more than one resource, such as an HTML page, a file, or another image.

You've probably seen image maps on the Web, even if you didn't know what they were. Rather than creating a different image for each button in the navigation bar, many Web designers create a single image that contains all the buttons and then use image maps to link each button to the appropriate page. Figure 9.1 shows one example of such a navigation bar. Look at the following additional examples:

• The Amazon Web site (http://www.amazon.com) also uses image maps in its navigation bar.

• The map on the Travel Alberta Web site (http://www1.travelalberta.com/content/maps/) uses an image map to direct visitors to information about specific regions of the province.

• The Johnson's Baby Soft Web site (http://johnsonsbabysoft.com/) uses an image map to link to specific product information for the products shown on its home page.

Figure 9.1. This image has been subdivided into four parts (one for each button on my navigation bar). Notice that some pieces of the image will not be linked to anything. Do not draw the boxes on your own image; I included them for demonstration purposes.

Finding the Coordinates

Like any other map, image maps have coordinates. In an image map, the coordinates, which are written as pixels, mark the corners of the piece of the image that will be linked to a specific URL. Before you can create any image map, you have to know the coordinates for your image.

Many image editors are available that can help you determine these coordinates and give them to you in a file so that you can cut and paste them into your HTML document. However, it's a lot easier to let your image editor do the work for you. Just type "create image map" into your favorite Web search engine to find several applications.

Tip

A free trial version of Paint Shop Pro can be downloaded from the Corel® Web site at http://www.corel.com/servlet/Satellite?pagename=Corel3/Trials/DownloadContainer.

If you want to create your own image map, use the image editor to find the coordinates, write them down, and add those coordinates to your HTML file. Figure 9.2 shows you how Paint Shop Pro displays the coordinates for an image. I highlighted the portion of my navigation bar that I wanted to map to my home page and Paint Shop Pro told me which coordinates to use. As the figure shows, the highlighted section is a rectangle with corners at 1, 107 and 189, 167.

Figure 9.2. Paint Shop Pro displays the coordinates of a selected region of the image in the lower-left corner.

Tip

You can divide your image into rectangular, circular, or irregular polygon shapes. The rectangle is the easiest shape to use when you're getting started and that's the shape used in Figure 9.2.

Caution

The pixel coordinates for an image mark the corners of the portion of the image you are highlighting. The coordinates are relative to the entire image, not to the position of the image on the Web page. Use your image editor to gather the coordinates and you won't get confused.

Client Side Versus Server Side

With HTML, you can create image maps that work on the client side and the server side. The following list indicates the differences:

• Client side When you click on a client-side image map, the Web browser does all the work to bring you to the new location. The browser selects the link that was specified for the activated region and follows it.

• Server side When you click on a server-side image map, the server that stores the map interprets the commands and brings you to the page to which you are linked.

So how do you know which one to use? Most Web page authors only use client-side image maps because they are faster and anyone with a version 3.0 browser or higher can view them. You can always provide text links for older browsers that don't recognize the client-side image maps. Because client-side image mapping is the type of image map used most often, it is the one you'll learn about in the following section.

Tip

When you are planning your Web page design, remember that you might not need to use an image map at all. You can place several smaller images close together for the same look. As long as the areas you want to link are primarily rectangular, this process is very easy with HTML and the <img> tag you learned in Lesson 8, "Using Graphics."