• Mapping Regions Within an Image
  • Figure 15.1.
  • Figure 15.2.
• Client-Side Image Maps
  • Figure 15.3.
  • Figure 15.4.
• Image Maps with Non-rectangular Regions
  • Figure 15.5.
  • Figure 15.6.
  • Figure 15.7.
  • Figure 15.8.
• Server-Side Image Maps
• Combined Client/Server Image Maps
• Summary
• Q&A
• Quiz
  • Questions
  • Answers
• Activities

Chapter 15

Image Maps

If you've read Chapter 9, "Putting Images on a Web Page," you know how to make an image link to another document. (If you don't quite recall how to do it right now, it looks like this: <A HREF="gohere.asp"><IMG SRC="image.gif"> </A>.)

You can also subdivide an image into regions that link to different documents, depending on where someone clicks. This is called an image map, and any image can be made into an image map. A Web site with medical information might show an image of the human body and bring up different pages of advice for each body part. Or a map of the world could allow people to click on any country for regional information. Many people use image maps to create a "navigation bar" that integrates icons for each page on their Web site into one cohesive image map.

Netscape Navigator and Microsoft Internet Explorer allow you to choose between two different methods for implementing image maps. Nowdays, all your image maps should be done using the latest method, which is called a client-side image map. You may also want to make them work the old-fashioned server-side way for users of older browser programs. I explain both kinds of image maps in this chapter.

---

New Term: An image map is an image on a Web page that leads to two or more different links, depending on which part of the image someone clicks. Modern Web browsers use client-side image maps, but you can also create server-side image maps for compatibility with old browsers.

---

Mapping Regions Within an Image

To make any type of image map, you'll need to figure out the numerical pixel coordinates of each region within the image that you want to be a clickable link. An easy way to do this is to open the image with Paint Shop Pro and watch the coordinates at the bottom of the screen as you use the rectangle selection tool to select a rectangular region of the image (see Figure 15.1). When the mouse button is down, the coordinates at the bottom of the screen show both the top-left and bottom-right corners of the rectangle, instead of just a single x,y position as shown here.

---

Time Saver: There are fancy programs that let you highlight a rectangle with your mouse and automatically spew out image map coordinates into a file, but they are rather cumbersome to use. You'll save the most time by ignoring the "time saver" programs and just locating the pixel coordinates in Paint Shop Pro or your favorite general-purpose graphics program.

---

Figure 15.1. Paint Shop Pro can easily tell you the coordinates for image map regions without mucking about with special image- mapping utilities.

You could use the image in Figure 15.1 as an image map, linking to four Web pages about the presidents immortalized on Mount Rushmore. To do so, first jot down the pixel coordinates of the top-left and bottom-right corners of each rectangular region shown in Figure 15.2. (Just write the coordinates on a piece of paper for now. You'll see exactly how to put them into an HTML file momentarily.)

These coordinates are: George Washington (region 1): 40,10 to 130,130 Thomas Jefferson (region 2): 130,60 to 200,170 Teddy Roosevelt (region 3): 201,120 to 270,240 Abraham Lincoln (region 4): 280,120 to 380,250

Figure 15.2. You don't actually have to draw anything that looks like this. I just made it to show you which regions in Figure 15.1 will become clickable links.

To Do: You'll remember how to make image maps better if you get an image of your own and turn it into an image map as you read the following explanation.

• For starters, choose a fairly large image that is visually divided into roughly rectangular regions.
• If you don't have a suitable image handy, use Paint Shop Pro (or your favorite graphics program) to make one. One easy and useful idea is to put a word or icon for each of your important pages together into a button bar or signpost.

Client-Side Image Maps

Once you have the coordinates written down, you're ready to create an HTML image map. Just after the <BODY> tag in your Web page, put

<MAP NAME="heads">

(You can use whatever name you want if "heads" seems too disrespectful of our late great leaders.)

Now you need to type an <AREA> tag for each region of the image. Figure 15.3 shows how you would define the four regions of the Mount Rushmore image.

Figure 15.3. The <MAP> and <AREA> tags define the regions of an image map.

Each <AREA> tag in Figure 15.3 has three attributes:

• SHAPE="RECT" indicates that the region is rectangular. You'll see how to create regions with other shapes later in this chapter.
• COORDS="40,10,130,130" gives the top-left and bottom-right corner coordinates for the rectangular region.
• HREF="george.asp" specifies the page that clicking on the region will link to. You can use any address or filename that you would use in an ordinary <A HREF> link tag.

After the <AREA> tags, you are finished defining the image map, so you insert a closing </MAP> tag.

To place the actual image map on the page, you use an ordinary <IMG> tag, and add a USEMAP attribute:

<IMG SRC="rushmore.gif" USEMAP="#heads">

Use the name you put in the <MAP> tag (and don't forget the # symbol). In Figure 15.3, I also included WIDTH and HEIGHT attributes, as you should for any image on a Web page.

---

Just A Minute: It is also possible to put the map definition in a separate file by including that file's name in the USEMAP attribute, like this:

<IMG SRC="/thisthat.gif" USEMAP="maps.asp#thisthat">

For instance, if you used an image map on every page in your Web site, you could just put the <MAP> and <AREA> tags for it on one page instead of repeating it on every single page where the image map appeared.

---

Figure 15.4 shows the image map in action. Notice that Netscape Navigator displays the link address for whatever region the mouse is moving over at the bottom of the window, just as it does for "normal" links. If someone clicked where the mouse cursor (the little hand) is shown in Figure 15.4, the page named george.asp would come up.

Figure 15.4. The image map defined in Figure 15.3 as it appears on the Web page.

---

Time Saver: Notice that I included text links on this page that go to the same pages as the image map links. This allows people who have older Web browsers--or who don't want to wait for the image to finish loading--to access those pages.

---

Image Maps with Non-rectangular Regions

Some images don't lend themselves to being broken up into neat rectangular regions. The image in Figure 15.5, for example, would make a great image map--but the regions you would want to click on couldn't be defined just by specifying the top-left and bottom-right corners.

Figure 15.5. To divide this image into regions, you need more shapes than just upright rectangles.

Fortunately, HTML image maps let you create polygonal regions with any number of corners. You can also define circular regions, which would be handy for the "ETHER" region in Figure 15.5.

I've sketched the clickable regions for this image map in Figure 15.6.

Figure 15.7 shows the HTML to define the actual image map, and Figure 15.8 shows the resulting Web page. To make polygonal regions, use SHAPE="poly" in the <AREA> tag, and put each of the corner points in the COORDS attribute. For circular regions, use SHAPE="circle" and put the center point and radius (in pixels) in the COORDS attribute.

Figure 15.6. Triangular and circular regions would work much better than rec-tangular ones for the image in Figure 15.5.

Figure 15.7. A page defining the image map regions shown in Figure 15.6.

Figure 15.8. This is how the image map in Figure 15.7 appears to a reader about to click on the "AIR" link.

Instead of including text links on the page in Figures 15.7 and 15.8, I used a tricky little attribute of the <IMG> tag called ISMAP. If you put ISMAP in an image tag, you can also put an <A HREF> link around the image. That link will only work for older browsers that don't support client-side image maps. The nomaps.asp file I linked to might lead to a page of text links, or simply a page saying Sorry, your browser is too old and feeble to handle the client-side image map on my awesome Web page (not necessarily in so many words).

---

Server-Side Image Maps

The old-fashioned way to create an image map is to let the server computer where the Web page resides do all the work. Most Web authors don't bother with server-side image maps anymore, because it's easier and just as effective to provide text links for people using older browsers. But there are still an awful lot of people out there using pre-1995 Web browsers, and it isn't really that hard to make your image maps work for them. You can read the following explanation of what's involved and decide for yourself whether it's worth your time to provide server-side image maps.

When the user clicks an image that has been mapped this way, the browser program just sends the x,y coordinates of the mouse pointer's location to a special script on the server. Usually, this script is located in some subdirectory of cgi-bin on the server, and the HTML to implement the image map is just a normal anchor link.

<A HREF="/cgi-bin/imagemap/thisthat"><IMG SRC="thisthat.gif" ISMAP></A>

Simple. But when you install a Web page including such a link, you need to tell the image map script which parts of the image should be associated with which link addresses. This is normally done in a map file. Each line in the map file is simply the word rect followed by a URL address and two sets of x,y coordinates representing the top-left corner and the bottom-right corner of a region of the image. Some server scripts also support non-rectangular regions with the word poly and circle (or round).

The first line in a map file begins with the word default followed by the URL address that should be used if the user happens to click outside any rectangular region defined by a rect line. A map file named thisthat.map might look like this:

default /top/this.asp

rect /top/this.asp 0,0,102,99

rect /top/that.asp 103,0,205,99

The final step in setting up a server-side image map is telling the image map script which map file to use for which image by adding a line to a system file named imagemap.conf. This file will already exist and includes entries for every image map defined on the server. You simply add a line with the name used in the HREF attribute of the <A> tag, a colon, and then the actual location and name of the associated map file. For example, the previous reference is HREF="/cgi-bin/imagemap/thisthat", and the preceding map file is named thisthat.map. If this map file was in a directory named /mapfiles, the line in imagemap.conf would read

thisthat : /mapfiles/thisthat.map

All this isn't nearly as difficult as it may sound if you've never set up an image map before, but it can be a hassle, especially if your pages reside on somebody else's server and you don't have the rights to modify system files such as imagemap.conf yourself. What's worse, server-side image maps don't work at all on Web pages located on your hard drive, a CD-ROM, or most local networks.

There are also some variations in the exact syntax for image map implementation, depending on the software installed on your server. So if you move your pages to a different server, the image maps may not work anymore. Yuck.

Fortunately, the latest versions of all the major browsers support the client-side image maps discussed earlier in this chapter, where the association of links with specific regions in an image is handled by the browser itself instead of a server script. This means that you can include image maps in your HTML files without imposing an additional burden on your Internet service provider's server, and you can be more certain that they will be processed correctly and dependably.

Combined Client/Server Image Maps

There is a way for you to provide client-side image maps that automatically switch to server-side image maps if the user's browser doesn't support client-side maps. With a single line of code, you can allow an image map to be interpreted either by the end user's software or by the server by including the ISMAP attribute in the <IMG> tag, then including both a USEMAP= attribute and cgi-bin/imagemap reference.

<MAP "#thisthat">

<AREA SHAPE="rect" COORDS="0,0,102,99" HREF="this.asp">

<AREA SHAPE="rect" COORDS="103,0,205,99" HREF="that.asp"></MAP>

<A HREF="/cgi-bin/imagemap/thisthat">

<IMG SRC="thisthat.gif" USEMAP="#thisthat" ISMAP></A>

Here, as with any unrecognized tag, browsers that don't support client-side image maps will simply ignore the <USEMAP> and <ISMAP> tags and treat the preceding code like an old-fashioned server-side image map.

Summary

This chapter explained how to create image maps--links that lead to more than one place, depending on where you click on an image. You saw how to define rectangular and circular link regions within an image, as well as irregularly shaped polygonal regions. You also learned to provide an alternate link just for people using older browsers that don't support the current image map standard. Finally, you got a quick rundown on providing server-side image maps on most types of Web servers--just in case you want to provide the best possible experience for users of outdated browsers.

Table 15.1 is a summary of the tags and attributes covered in this chapter.

Table 15.1. HTML tags and attributes covered in Chapter 15.

Q&A

Q I'd like to know exactly which browsers support client-side image maps, and which ones support server-side image maps.

A All browsers that display graphics support server-side image maps. All versions of Netscape Navigator and Microsoft Internet Explorer with version numbers 2.0 or higher also support client-side image maps. Any other Web browser produced after 1995 probably supports client-side image maps, too.

Q My image maps with polygonal and circular regions don't seem to work right in Netscape 2.0. Why?

A Netscape Navigator version 2.0 and Microsoft Internet Explorer version 2.0 only support rectangular regions in client-side image maps. Only people using version 3.0 or later of these browsers will be able to click on non-rectangular regions.

Q I don't have Paint Shop Pro and my graphics software doesn't tell me x,y coordinates. How do I figure out the coordinates for my image maps?

A Here's a sneaky way to do it using Netscape Navigator. Put the image on a page with the ISMAP attribute and an <A> tag around it, like this:
<A HREF="nowhere"><IMG SRC="myimage.gif" ISMAP></A>

When you view that page with Navigator, move the mouse over the image. You will see the coordinates in the message box at the bottom of the window.

Quiz Questions

1. You have a 200x200-pixel image named quarters.gif for your Web page. When someone clicks in the top-left quarter of the image, you want them to get a page named toplft.asp. When they click on the top-right quarter, they should get toprgt.asp. Clicking on the bottom left should bring up btmlft.asp, and the bottom right should lead to btmrgt.asp. Write the HTML to implement this as a client-side image map.

2. If you wanted people using older browsers that don't support client-side image maps to get a page named oldies.asp when they click on any part of the image map, how would you modify the HTML you wrote for Question 1?

3. How could you implement the effect described in Question 1 without using image maps at all?

Answers

1. <MAP NAME="quartersmap"> <AREA SHAPE="rect" COORDS="0,0,99,99" HREF="toplft.asp"> <AREA SHAPE="rect" COORDS="100,0,199,99" HREF="toprgt.asp"> <AREA SHAPE="rect" COORDS="0,100,99,199" HREF="btmlft.asp"> <AREA SHAPE="rect" COORDS="100,100,199,199" HREF="btmrgt.asp"> </MAP> <IMG SRC="quarters.gif" WIDTH=200 HEIGHT=200 USEMAP="#quartersmap">

2. Replace the <IMG> tag above with
<A HREF="oldies.asp"> <IMG SRC="quarters.gif WIDTH=200 HEIGHT=200 ISMAP USEMAP="#quartersmap"></A>

3. Use a graphics program such as Paint Shop Pro to chop the image into quarters, and save them as separate images named toplft.gif, toprgt.gif, btmlft.gif, and btmrgt.gif. Then type

<A HREF="toplft.asp"><IMG SRC="toplft.gif" WIDTH=100 HEIGHT=100 BORDER=0></A><A HREF="toprgt.asp"><IMG SRC="toprgt.gif" WIDTH=100 HEIGHT=100 BORDER=0></A><BR> <A HREF="btmlft.asp"><IMG SRC="btmlft.gif" WIDTH=100 HEIGHT=100 BORDER=0></A><A HREF="btmrgt.asp"><IMG SRC="btmrgt.gif" WIDTH=100 HEIGHT=100 BORDER=0></A>

(Be careful to break the lines of the HTML inside the tags as shown above, to avoid introducing any spaces between the images.)

Activities

• If you have some pages containing short lists of links, see if you can cook up an interesting image map to use instead.
• Image maps are usually more engaging and attractive than a row of repetitive-looking icons or buttons. Can you come up with a visual metaphor related to your site that would make it easier--and maybe more fun--for people to navigate through your pages? (Thinking along these lines is a good preparation for the issues you'll be tackling in Part VI, "Building a Web Site," by the way.)