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.
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
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
- 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
Once you have the coordinates written down, you're
ready to create an HTML image map. Just after the <BODY> tag in your Web
(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
- SHAPE="RECT" indicates that the
region is rectangular. You'll see how to create regions with other shapes later in this
- 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:
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
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
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).
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:
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.
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.
<AREA SHAPE="rect" COORDS="0,0,102,99" HREF="this.asp">
<AREA SHAPE="rect" COORDS="103,0,205,99" HREF="that.asp"></MAP>
<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
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.
||Inserts an image into the document.
||This image is a clickable image map.
||The URL of the image.
||The name of an image map specification
for client-side image mapping. Used with <MAP> and <AREA>.
||A client-side image map, referenced by
<IMG USEMAP="...">. Includes one or more <AREA>
||Defines a clickable link within a
client-side image map.
||The shape of the clickable area.
Currently, rect, poly, and circle (or round) are the
||The left, top, right, and bottom
coordinates of the clickable region within an image.
||The URL that should be loaded when the
area is clicked.
- 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
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"
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.
- 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
- 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
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.)
- 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.)