by John Jung
A number of advanced home pages make use of a feature commonly known as imagemaps. They are just pictures in which well-defined areas are marked to go to different URLs. In most cases, clicking on a picture is easier than clicking on plain text hyperlinks.
So what is involved in creating imagemaps and putting them on your home page? A lot of work. You also should consider some drawbacks to using imagemaps before including them.
In this chapter, you learn about the following:
Because imagemaps make use of pictures, they let users navigate content-related links in a friendly fashion. The World Wide Web is the first Internet standard that allows for the easy display of graphics. This is a sharp contrast to past standards, which were all text-based, such as Gopher, WAIS, and FTP. Although these older standards couldn't transport images; I'm just saying that this capability was never designed into them (see fig. 12.1).
Figure 12.2 : Clicking on pictures is easier than reading text.
Simply put, imagemaps are pictures that have certain defined areas. Each of these defined areas points to different URLs to which a user can go. Because the user has to know where these clickable regions are, borders often appear around each region (see fig. 12.2). These borders are a part of the graphic itself, and not created by the Web server.
Figure 12.2 : For imagemaps to be useful, they should have distinct borders around them.
When a user clicks somewhere in the imagemap, his or her browser sends the coordinates of the mouse pointer to the Web server. The server then looks up the coordinates and determines which clickable region was accessed. The server finds the corresponding URL and goes there. Finally, the browser displays the contents of the new URL to the user.
Using imagemaps offers obvious benefits, mainly the ease of use for users. But as with almost everything else on the Net, you can always find a reason not to use imagemaps. Most of the pluses to using imagemaps are strictly for making tasks easier and friendlier for the user. The reasons not to use imagemaps are generally technical.
In many situations, you should consider using imagemaps instead of hypertext links. Here's a short list of some times when using imagemaps is appropriate:
Although imagemaps might be useful in most situations, sometimes you shouldn't use them. Here's a short list of times when you shouldn't use imagemaps:
Figure 12.4 : Making textual alternatives for your imagemaps is essential.
To create an imagemap, you're going to need more than just a pretty picture and an idea of where the regions are. You're also going to need an imagemap definition file, which specifies where each particular region is. You also need a CGI (Common Gateway Interface) program to build the relation between the picture and the imagemap definition file. (You learn about CGI programs for imagemaps later in this chapter, and more about CGI programming in chapter 23, "All About CGI Scripts.") In this section, you focus on the imagemap definition file, which specifies the regions.
An imagemap definition file can come in two forms: CERN and NCSA. Both contain the same basic information for the clickable regions. Both of them also use the same region types (see "Imagemap Region Types" later in this chapter). The coordinates used to define the regions are also the same. The only difference between the two is the manner that the information is presented. Because of this incompatibility, you must find out from your system administrator which format your Web server supports.
Originally, CERN (Conseil Europeen pour la Recherche Nucleaire) was foundedas a research group of European physicists. The group slowly expanded itsresearch into the field of computers. Because it was the one who first thought of the idea, it rightfully claims the honor of being "the birthplace of the Web." When imagemaps were deemed necessary, CERN developed its format for the imagemap definition file. On Web servers that follow the CERN format, you can find files that look like this:
region_type (x1,y1) (x2,y2) ... URL
The horizontal (x) and vertical (y) coordinates must be in parentheses and separated by a comma. Each pair of coordinates means something different for each region type. The ... specifies additional coordinates, such as for the poly region type (see "Imagemap Region Types" later in the chapter). Here's an example of a CERN imagemap definition:
rect (60,40) (340,280) http://www.rectangle.com/
The first wildly popular browser, Mosaic, came from the University of Illinois's National Center for Supercomputing Applications (NCSA). When this group heard of the demand for imagemaps, it came up with its own imagemap definition file format. A typical entry in one of its files would look like
region_type URL x1,y1 x2,y2 ...
Subtle (but significant) differences distinguish the CERN and NCSA formats. The URL for the region type comes before the coordinates with NCSA, not after, like CERN. The coordinates defining the region need to be separated by commas, but they don't need the parentheses around them. Here's an example of an NCSA imagemap definition:
rect http://www.rectangle.com/ 60,40 340,280
Netscape Navigator 2.0 introduced the concept of client-side imagemaps. With these new imagemaps, the HTML document being displayed has all the necessary information. The current page contains the points specifying each region along with the corresponding URLs. When the user clicks inside a client-side imagemap graphic, Netscape (not the Web server) looks up the region. The browser then fetches the appropriate home page, without ever talking to the Web server (see chapter 15, "Netscape-Specific Extensions to HTML").
Several terms relate to different aspects of using imagemaps. In the following sections, you learn some of the terms and what they refer to.
The first thing the user sees when he or she comes across an imagemap is the image itself. This picture is typically called the imagemap graphic. The image can be anything, but it must be in the GIF graphics file format; whether it's interlaced or noninterlaced doesn't matter. The imagemap graphic is the main interface between the user and the imagemap itself.
An imagemap depends on a file to hold the locations of hot spots. This file is known as the imagemap definition file. This text file, which usually has the extension .map, holds the coordinates and URLs for each hot spot region. The regions can be made from any of the standard imagemap region types (see "Imagemap Region Types" later in this chapter). This file must follow either the CERN or NCSA file format. Be sure to ask your system administrator which format your Web server supports.
Most servers don't have built-in imagemap support, which means you have to add the support yourself. You have to write your own CGI program to interpret the mouse-click location and find the appropriate URL. The CGI program that does all this work is called the imagemap program. Also, you should ask your Web master if you can even run CGI programs on your Web server. Some Web masters, citing a security risk, disallow anybody from running CGI programs.
All the previously mentioned components make up the whole imagemap concept, which is known as imagemap, image map, area map, or clickable map. Don't let the terms fool you; they all mean the same thing: a picture that goes to different URLs. Which URL is dependent on where the user clicked his or her mouse button in the imagemap graphic.
| Tip |
Each imagemap depends on its own imagemap definition file to hold the information about clickable regions. This means that if your Web site has many different imagemaps, you need an imagemap definition file for each of them. |
Each entry in the definition file specifies a region type. It also tells the exact points that define the region for that type. The coordinates used by each region type are an offset, in pixels, from the upper-left corner of the imagemap graphic. The available region types are mostly geometric (see fig. 12.5).
Figure 12.5 : You can use any combination of these region types, except for the default type.
To get a hot spot in the shape of a circle, you should use the circle region type. This element takes in two coordinates, but they are different values for different Web servers. If your Web server is an NCSA imagemap server, the two coordinates specify the coordinates for the center of the circle and a point on that circle. If your Web server is a CERN imagemap server, you really need only one coordinate and one value. The coordinates specify the center of the circle, whereas the value defines its radius. The clickable region of this type is everything enclosed within the circle.
To specify a geometric shape of an arbitrary number of sides, use the poly region type. This element looks for up to 100 coordinates, each referring to a vertex of the polygon. The active region is the area within the polygon.
To get a clickable rectangle in your imagemap, use the rect region type. This element takes in two coordinates, the upper-left and lower-right corners of the rectangle. Any mouse-clicks inside the rectangle that are within these corners trigger this element.
You can easily create hot spots the size of small circles with the point region type. This element requires just one set of coordinates to specify the center of the circle. The area enclosed within that point is considered the active region.
If the user clicks in an imagemap and doesn't activate any region, the default region type is accessed. This element requires no coordinates.
All entries in the imagemap definition file must include the URL to be accessed (see fig. 12.6). The URL can either be an absolute path or a relative path. If you're using relative paths to specify an URL, be sure to make them relative to the directory where the imagemap definition file resides, not where the imagemap resides. Whenever multiple region types overlap, the first one with an entry in the imagemap definition file is accessed.
| Caution |
Whenever possible, try to avoid putting in a point alone with a default region type. Because the point region is so small, a user can easily miss it. As a result, the default region will be accessed instead. The user will be frustrated by not getting to the URL he or she wants. |
| Tip |
You can use the point and default region types, but you have to overlap some regions. Whenever you put down a point region type, be sure to put down another (larger) region type on top of it. Try not to make the larger region too much larger than the point. Make sure that both region types refer to the same URL. This way, users can access the point region's URL more easily. |
| Tip |
An imagemap definition file should, whenever possible, be configured with a default HTML link. The default link takes a user to an area that isn't designated as being an active link. This URL should provide the user with feedback or helpful information about using that particular imagemap. |
| Note |
You can put comments to yourself in an imagemap definition file. Simply put a pound character (#) at the beginning of any line. Everything else on the same line after the pound sign will be ignored by the Web server. Comments are useful for putting in bits of information to yourself about the referenced URL, the imagemap graphic, or anything else. For corporate Web pages, comments are particularly useful for telling others when the file was last modified, who did it, and why it was changed. |
The pound sign at the beginning of the line is different than the pound sign in the middle of an URL. When a pound sign is in the middle of an URL, it specifies an internal destination point.
Now that you understand all the parts of the imagemap, you're ready to learn how they all work together. You should now know what components contain what information and how elements relate to each other. But you may not know how everything works together. When you click your mouse anywhere in an imagemap map, the following occurs:
To create an imagemap, you need tools and information; you also need to make some decisions. You need the imagemap graphic and mapping tools and some important information about the Web server.
The first thing you want to look at in building an imagemap is the imagemap graphics. They are what the user will see and interact with the most. You should decide what types of graphics you want and how they should look. If you're building a company Web site, you might want to duplicate the look and feel of your corporate stationery. Chapter 11, "Handling Images," has some good information if you're planning to create fresh, new graphics or modify existing ones.
In choosing your imagemap graphic, you have many considerations. Along with general image considerations (see chapter 10, "Adding Graphics to Your Home Page"), you need to watch out for a number of specific imagemap graphic issues. Here are some things you should do when choosing an imagemap graphic:
| Note |
When you use Transparent GIFs (see chapter 10, "Adding Graphics to Your Home Page") as imagemap graphics, you could face some problems. Because Transparent GIFs can appear to have no border, users might be easily confused. Users may not know when they're in an imagemap and when they aren't (see fig. 12.7). If you do use Transparent GIFs as imagemap graphics, be sure to define a default region type. |
The imagemap graphic is just part of the whole imagemap. You still need to create an imagemap definition file. Creating the imagemap definition file can be a tiring part of creating the imagemap for your Web site. You can create this file in two ways: the easy way and the hard way. The easy way is to use an imagemap creation program. This type of program lets you draw imagemap region types on top of an imagemap graphic of your choice and specify the appropriate URL.
The hard way of creating the file is to do it by hand. Creating
the file this way really isn't as difficult as you might think,
but it is dull and repetitious. You need two programs to create
an imagemap definition file by hand: a graphics program and a
text editor. Before you begin, decide where you want to place
clickable regions. Using the graphics program, get the coordinates
of the places where you want to put each point of each region
type. Write down the region type, pixel coordinates, and appropriate
URL using the text editor. Be careful not to actually edit the
image itself using the graphics program.
| Tip |
If you choose to have multiple imagemaps using different imagemap graphics, you should organize everything. A good way to do this is to create a separate directory for each group of files for each imagemap. Another way of keeping multiple imagemap files distinct from each other is to keep the same file name for each imagemap component. |
Now that you have all the elements in place for an imagemap, you're ready to actually put it in your home page. You do so by building from what you learned in chapter 10, "Adding Graphics to Your Home Page." There, you saw how to make an image clickable and go to a certain URL. All you have to do is enclose the <IMG SRC> tag within an anchor element and have the anchor reference point to the appropriate Web page.
Two steps are needed to make an imagemap an integral part of a home page on your Web site. First, you need to change the anchor element reference from an HTML document to point to your imagemap definition file. Second, you must add the attribute ISMAP to the <IMG SRC> tag. For example, say that you've created an imagemap definition file called my_map.map, and its graphic is called my_map.gif. To put an imagemap in an HTML document, you use the following HTML code:
<A HREF="my_map.map"> <IMG SRC="my_map.gif" ISMAP> </A>
When the imagemap is selected, the Web server runs the imagemap CGI program. The program then takes over and processes the mouse-click coordinates into a corresponding URL
.
| Note |
Be sure to ask your Web master where the imagemap definition file will be stored. These file locations are determined by the configuration of your Web server. |
| Note |
You can use the ISMAP attribute with any other image attributes. Just because you're specifying an imagemap doesn't restrict your ability to control the graphic. You can still use any other image controlling attributes you want. |
As mentioned previously, you can create the imagemap definition file the easy way or the hard way. The easy way is to use one of the many programs that will create the file for you. These programs are called mapping tools, and they let you draw various imagemap region types on top of a specified image.
Many map-editing programs are available for both Windows 95 and the Macintosh. Generally speaking, most map-editing programs have the same basic features. They all support the three basic geometric region types, rect, poly, and circle. Some of the more advanced map-editing programs support the point and default region types. The only thing you should look for in imagemap-editing programs is how the user interface feels. Because such a wide variety is available, if one doesn't feel right to you, you don't have to use it.
Mapedit is a shareware, no frills map-editing program for Windows 95 and UNIX. It was written by Thomas Boutell, maintainer of the FAQ (frequently asked questions) for the World Wide Web. This program allows you to create imagemap definition files in either CERN or NCSA format. Mapedit provides support for the basic geometric shapes, although the point region type isn't supported. A minor drawback is that it can load only GIF graphics files.
Navigating Mapedit is pretty straightforward. To create a new imagemap definition file for your imagemap graphic, simply choose File and then choose Open/Create. Mapedit's Open dialog box then appears. You must have an existing imagemap graphic, which you can find using the Browse button under the Image Filename heading. Mapedit supports GIF, JPEG, and the little-used PNG (Portable Network Graphics) image format for imagemap graphics.
To edit an existing imagemap definition file, you can use the Browse button under the Map or HTML File heading (see fig. 12.8). To create a new imagemap definition file, simply type in the file name you want to use. Be sure to also specify whether you want a CERN or NCSA imagemap definition file, using the appropriate radio buttons. Mapedit then asks you to confirm that you want to create a new imagemap.
After you click the OK button, the shareware notification appears.
After the graphic is loaded, the shareware dialog box is dimissed,
and the whole image is loaded into Mapedit. If the image is bigger
than the current screen resolution, you can use the scroll bars
to see different parts of the picture.
| Note |
If the colors on the imagemap graphic you specified look a little weird, don't worry. Mapedit isn't concerned with the way the picture looks; it's more concerned with the imagemap region types. |
You can create any number of imagemap region types by choosing
options from the Tools menu. You can create circle, polygon,
or rectangle region types. For people accustomed to many paint
programs, or other imagemap creation programs, the region creation
interface is counterintuitive (see table 12.1). Generally speaking,
you can create shapes in other programs by clicking and holding
the right mouse button, dragging the shape, and then releasing
the mouse button. Unfortunately, in Mapedit, it's a matter of
clicking and releasing the mouse button, dragging the shape, then
reclicking and
re-releasing the mouse button. After you have created a region
type on the imagemap graphic, you can't delete it using Mapedit.
| Region Type | How to Create |
| Circle | Click on the left mouse button to specify the center of the desired circle. Use the mouse to specify the size of the circle. Click on the right mouse button when the circle is the desired size. |
| Rectangle | Click on the left mouse button to specify one corner of the rectangle. Use the mouse to specify the size of the rectangle. Click on the right mouse button to specify the diagonally opposite corner of the first corner. |
| Polygon | Click the left mouse button to specify a corner of the polygon. Move the mouse to the next corner you want to specify. Repeat these steps for each corner of the polygon. When you're back to the first corner, click the right mouse button. |
| Caution |
Mapedit works in very distinct "modes." That is, whatever option you last selected from the Tools menu is still active. If, for example, you just specified an URL for a rectangle region type, the next region type you'll create is a rectangle. If you just selected the Test+Edit menu item, you remain in "Test+Edit" mode until you specify a region type. |
After you create a region type, the Object URL window opens (see fig. 12.9). Simply type in the URL to associate with the newly created region. You can define the default URL for the entire imagemap graphic by choosing File and then Edit Default URL.
If you can't see the outline of the region type as you're creating
it, don't worry. Mapedit doesn't care about the appearance of
the image in its window. To change the color of the outlines for
each region type, choose File and then Edit Hotspot Color.
| Tip |
If you make a mistake in the location of the region type, you can cancel its creation in two ways. You can either press Escape while you're specifying the size of the region, or you can click the Cancel button in the Object URL dialog box. |
Using Mapedit, you can test the regions you've created. You choose Tools and then Test+Edit. Using your mouse to move around the imagemap graphic, whenever you press the left mouse button, the URL for the corresponding region shows up. This testing capability is a function of Mapedit, and doesn't require a Web browser or server to use.
You can save your current imagemap definition file by choosing
File and then either Save or Save As.
| Note |
Mapedit doesn't force any file-name extensions on you. As a result, when you're creating a new imagemap definition file, you need to specify the extension yourself. Most imagemap servers look for a file with the .map extension. |
Mapedit also allows you to easily change the position of hotspot regions. To move any clickable region, simply select the Tools menu heading, followed by the Move menu item. Next, click on the region you want to move, and a number of "control points" will show up. By clicking and dragging on any of the control points that bound the region, you can reshape or resize it. If you click and drag the control point in the middle of the region, you'll move the entire region itself. Since Mapedit will still be in the Move mode, you can fine-tune the position of the clickable region.
Polygon regions can also be reshaped by adding or removing points in Mapedit. Just click the Tools menu heading, and choose either the Add Points or Remove Points menu items. These two options only work on polygon region types, and do as their name implies. With the Add Points option, click on the polygon you want to add a point to, then put your mouse on roughly where you want the new point to appear. Similarly, for Remove Points, you click on the polygon to remove a point from, then select the point to remove.
Mapedit can also be used to create client-side imagemaps. Instead of loading in a MAP file, you specify an HTML file. Mapedit will look for any HTML that mentions including a graphic. Whatever images are found, it'll present a dialog box with the pictures that were found (see fig. 12.10). Select the picture you want to create a client-side imagemap for, and click the OK button. The filename for the image is automatically filled in Mapedit's Open dialog box. Once you click the OK button, you'll be taken into Mapedit as usual. After you've created all the shapes you want, saving the changes will cause the HTML file to be updated. You can get Mapedit from http://www.boutell.com/mapedit/.
WebMap, a capable Macintosh map-editing program, is currently free, until it's released commercially. It lets you create all the geometric region types from rectangles to circles and ellipses to polygons to points. It can create imagemap definition files for CERN, NCSA, or MacHTTP Web servers. It also enables you to easily move and change regions that have already been defined.
With this user-friendly program, you can easily create imagemap definition files. Simply choose File and then New. Then, using the Mac file selector, find the location of your imagemap graphic. This picture can be in either GIF or PICT graphics formats.
You can create as many imagemap region types as you want using the floating toolbox next to the WebMap window (see fig. 12.11). The interface is similar to drawing programs (see table 12.2). The only difference between the circle and ellipse region type is that the circle has a constant radius. If you make a mistake in either the placement, size, or mere existence of a region type, you can fix it.
Figure 12.11: All the standard geometric region types are accessible through WebMap's toolbox.
| Region Type | How to Create |
| Circle | Click and hold the mouse button to specify a corner of the square to contain the circle. Hold down the mouse button and move the mouse to specify the size of the circle. Release the mouse button when the circle is the desired size. |
| Ellipse | Click and hold the mouse button to indicate a corner of the square in which the ellipse will reside. While holding down the mouse button, move the mouse to size the ellipse. Let go of the mouse button when the ellipse is at the size and shape you want. |
| Rectangle | Click and hold the mouse button to indicate a corner of the rectangle. Release the mouse button when the rectangle is the size you want. |
| Polygon | Click the mouse button to specify a corner of the polygon. Release the mouse button. Move the mouse pointer to the next corner you want to indicate. Repeat these steps for each corner of the polygon. After you specify the last corner, move the mouse pointer close to the first vertex and then click the mouse button. |
| Caution |
With WebMap, you can't create a smaller region on top of a larger one. However, you can easily place larger region types on top of smaller ones. As a result, you have to plan carefully which regions you place when. You should place the smaller region types first and then work your way up to the largest regions. |
After you've created all the regions you want, you can save the
imagemap definition file by choosing File and then Save. This
saves the imagemap definition file with an .m extension, which
is the default extension that MacHTTP looks for in an imagemap
definition file. WebMap also automatically saves the file in MacHTTP's
custom format, making it unusable for the prevalent Web servers
around. To create an imagemap definition file that other Web servers
can use, choose File, Export As Text. You can specify to create
either a CERN- or NCSA-compatible file. You can get WebMap from
http://www.city.net/cnx/software/webmap.html.
| Caution |
WebMap assumes that your imagemap definition file has the same name as the graphic. When you're editing an existing imagemap definition file, WebMap looks for an .m file based on the imagemap graphic's name. You therefore can't simply rename one of the files; you have to rename both of them. Otherwise, WebMap cannot see the other and will assume that you're creating a new imagemap definition file. |
| Tip |
Sometimes the Undo feature doesn't work with WebMap. If you've accidentally created a region and Undo doesn't work, just clear the region. Go to the toolbox and select the Arrow icon. Then use the mouse to select the region you created by accident. Next, choose Edit and then Clear. |
After you've created the files for your imagemap, the only thing left to do is to test it. Even though some map-editing programs let you try the region types within the program, this built-in facility is often imperfect. The programmers have made certain assumptions with the imagemap process. The best way to test the imagemap is to put it on your Web server and act like an average user.
By testing the imagemap in this fashion, you can see different
aspects that you might've overlooked. If the imagemap graphic
file is too large and takes a long time to download, you'll see
it. You'll also be able to see if the imagemap regions are distinct
enough for the average person. Finally, you can see if the URLs
for each region actually work as they should. If you're using
relative links, testing the imagemap on the server is especially
important.
| Tip |
Before releasing your imagemap for everyone's perusal, find someone else to try it. Get a friend with a different Internet Service Provider to access your new imagemap. He or she can give you a (somewhat) unbiased opinion of the imagemap graphic and region types. |
Imagemaps and graphics in general don't translate particularly well to text. In fact, they don't translate at all. For this reason, you should provide some alternatives for people who don't have graphical browsers. Also bear in mind that some people have configured their browsers so that they don't automatically load pictures. People who access the Web through UNIX's command-line mode and people with slow modems fall into these categories. Because they are a strong minority, you have to provide some support for them.
You can let nongraphics people access the various points on your imagemap in a number of ways. You can provide a separate home page for these people and mention it in your graphics-heavy page. You also can put in regular hypertext links at the top or bottom of all your home pages. These links can point to the same links accessible through the imagemaps. Whichever approach meets your fancy, you should take one of them. If you ignore the text-only crowd, you're alienating a large group of people.