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.htm"><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.
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.
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:
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.htm#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.htm 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.
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.htm 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).
Coffee Break: You can often avoid even the minimal hassle involved in creating an image map by breaking up the map into separate images and simply placing them next to each other on a Web page. For an example, go to the page at
http://www.mcp.com/sams/books/235-8/cwg/welcome.htm
The three graphical links at the bottom of that page look like an image map, but they're actually just three regular old images with an <A HREF> tag around each of them. If you try this yourself, be careful not to put a space or line break between the <IMG> tags, or the images won't meet at the edges. Wherever you can avoid image maps, do so; individual images are easier to maintain, and you can often use the pieces again in creative and useful ways. (Click on the links at the above address to see what I mean.) I've prepared a little quiz to help you learn to tell when image maps are necessary and when they aren't. Check it out by clicking on the Pop Quiz icon in the new image map at
http://www.mcp.com/sams/books/235-8/cafe15.htm
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.htm rect /top/this.htm 0,0,102,99 rect /top/that.htm 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.
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.htm"> <AREA SHAPE="rect" COORDS="103,0,205,99" HREF="that.htm"></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.
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.
| Tag | Attribute | Function |
| <IMG> |
|
Inserts an image into the document. |
|
|
ISMAP | This image is a clickable image map. |
|
|
SRC="..." | The URL of the image. |
|
|
USEMAP="..." | The name of an image map specification for client-side image mapping. Used with <MAP> and <AREA>. |
| <MAP>...</MAP> |
|
A client-side image map, referenced by <IMG USEMAP="...">. Includes one or more <AREA> tags. |
| <AREA> |
|
Defines a clickable link within a client-side image map. |
|
|
SHAPE="..." | The shape of the clickable area. Currently, rect, poly, and circle (or round) are the valid options. |
|
|
COORDS="..." | The left, top, right, and bottom coordinates of the clickable region within an image. |
|
|
HREF="..." | The URL that should be loaded when the area is clicked. |
