EarthWeb sites:

Chapter 12

Clickable Image Maps and Graphical Interfaces

CONTENTS

• Image Maps Defined
  • Example: The Apple Web Site
• Understanding How Image Maps Work
  • The Map Server Program
  • The Map Definition File
  • The Various Shapes of Hot Zones
• Defining Your Image map Hot Zones
  • MapEdit for Microsoft Windows and X-Windows
  • Example: MapEdit and a Simple Button Bar
  • WebMap for Macintosh
• Adding Image Maps to Your Web Page
  • The Image Map URL
  • Example: Testing Your Link
• Image Map Design Tips
• Summary
• Review Questions]
• Review Exercises

In Chapter 11, "Using Links with Other HTML Tags," you spent some time creating clickable images, which make Web pages more graphically appealing and (ideally) a little more intuitive. This chapter takes creating a graphical interface to your Web site one step further.

With image maps, you can create an entire interface for your Web pages and sites that rivals the interfaces of popular multimedia games, graphical operating environments, and interactive kiosks. The first 11 chapters of this book have said that the Web is about text, but that fact doesn't mean that you can't use some great graphics to spice up your presentation.

Image Maps Defined

The map part of image map conjures up two separate images. First, image maps on Web sites often act like road maps for the Web site, adding interface elements that make it easier to get around on the Web site. Second, the word map also suggests the way that image maps are created. Image maps begin life as normal graphics (usually in GIF or JPEG format), designed with the Web in mind. Then another program is used to map hot zones (clickable areas) on top of the graphics.

When put in place on a Web page, an image map allows users to access different HTML pages by clicking different parts of the graphic. Because each hot zone has an associated URL, and because each hot zone corresponds to part of the graphic, maneuvering about a Web site becomes more interesting, graphical, and interactive.

Example: The Apple Web Site

Apple Computer offers a very interesting example of an image map on the main page of its Web site. To check out the page, load your graphical Web browser, connect to the Internet (if you're not already connected), and enter http://www.apple.com/.

When the page loads in your browser, you'll see the interface, which looks a little like a futuristic hand-held computer, on-screen.

This example isn't terribly structured, but it allows you to play with the image map interface. You may already have a good deal of experience with such interfaces, especially if you've spent a lot of time on the Web.

By simply pointing at part of the graphic, you may be able to bring up a URL in the status bar at the bottom of your browser bar (see fig. 12.1). This bar shows you where the various hot zones for the image map are and at what coordinates your mouse pointer appears.

Figure 12.1 : The image map interface at Apple Computer's Web site.

Check out one more thing. If the image map fills your screen, scroll down in your browser window so that you can see what's below the interface on Apple's Web page. The text directly below the interface almost exactly mirrors the hyperlink options you have with the image map, because image maps, unlike clickable graphics, don't offer an ALT statement for the various hot zones. So you have to include additional links to cater to your users of nongraphical browsers.

Understanding How Image Maps Work

Creating an image map involves three steps: creating the graphic, mapping the graphic for hot zones, and placing the correct information (along with the correct programs) on the Web server itself. This section discusses the Web server; the next section talks about defining hot zones.

For more information on creating graphic images for Web pages, see Chapter 9, "Creating and Embedding Graphics."

To offer your users the option of using image maps, you must have a special map server program running on your Web server. For UNIX-based servers, this program will most often be NCSA Imagemap; other platforms have their own map server programs.

The Map Server Program

When a user clicks an image map on a Web page, the browser determines the coordinates of the graphic (in pixels) that describe where the user clicked. The browser then passes these numbers to the map server program, along with the name of the file that contains the URLs that correspond to these coordinates.

NCSA Imagemap, then, simply accepts the coordinates and looks them up in the database file that defines the hot zones for that image map. When NCSA Imagemap finds those coordinates and their associated URL, it sends a "connect to URL" command (just as a hypertext link does) that causes your browser to load the appropriate HTML document.

The Map Definition File

To determine which parts of the image map are linked to which URLs, the map server program must have a map definition file at its disposal. This file is generally a text file with the extension MAP, stored somewhere in the CGI-BIN directory for your Web site. Exactly where this file is stored depends on the combination of your Web server and map server. Let it suffice to say that you'll need to consult your server's documentation or your ISP.

The map definition file looks something like figure 12.2. You can create this file and save it as a standard ASCII text file with the appropriate extension; fortunately, you probably won't have to.

Figure 12.2 : A map definition file.

You can define different shapes in the file; these shapes correspond to the shapes of the hot zones that overlay the graphic that you want to use for your image. Each set of coordinates creates a point on the graphic. The coordinates are expressed in pixels, with each pair of numbers representing the number of pixels to the right and down, respectively, from the top left corner of your graphic.

The shapes require a different number of points to define them. Rectangles require two points, for example, and polygons require as many points as necessary. Luckily, the number of points involved isn't something that you'll have to worry about. Simply by using a map editing program for Windows or Macintosh (discussed later in this chapter in the sections, "MapEdit for Microsoft Windows and XWindows" and "WebMap for Macintosh"), you can automatically create the map definition file required for your map server.

The Various Shapes of Hot Zones

This section briefly defines the shapes of hot zones. Hot zones can be in any of the following shapes:

• rect (rectangle)-This shape requires two points: the upper left coordinates and the lower right coordinates.
• circle-To create a circular region, you need coordinates for a center point and an edge point. The circle is then computed with that radius.
• point-A point requires only one coordinate. The map server software decides which point the mouse pointer was closest to when the shape was clicked (provided that the click didn't occur in another hot zone).
• poly (polygon)-You can use up to 100 sets of coordinates to determine all the vertices for the polygon region.
• default-Any part of the graphic that is not included in another hot zone is considered to be part of the default region, as long as no point zones are defined. If a point is defined, then default is redundant, since the map server will evaluate any click (outside of a hot zone) and choose the nearest point.

Defining Your Image Map Hot Zones

As a designer, you are responsible for doing two things in the hot zone definition process. First, you need to define the hot zones to create the image map-that is, you need to decide what URL the coordinates will correspond to when the image map is clicked. Second, you need to create the map definition file that makes the hot zone information available to the Web server. For Windows and Macintosh users, luckily, programs that do both are available.

MapEdit for Microsoft Windows and X-Windows

Available for all flavors of Windows (Windows 95, Windows 3.1, and Windows NT) and for most types of UNIX, MapEdit is a powerful program that allows you to graphically define the hot zones for your image maps. You can access and download the latest version of this program via the MapEdit Web site (http://www.boutell.com/mapedit/).

When you have the program installed and you double-click its icon to start it, follow these steps to define your map:

1. Choose File, Open/Create from the MapEdit menu. The Open/Create Map dialog box appears.
2. In the Open/Create Map dialog box, enter the name of the map definition file you want to create and the name of the graphic file you want to use for your map. You should also use the radio buttons to determine whether you'll use CERN or NCSA map definitions. (Consult your map server software or ISP if you're not sure whether to use CERN or NCSA.)
3. Click the OK button. The Creating New Map File dialog box appears. In this dialog box, click Yes. After a moment, MapEdit displays your image file.
4. To create a new hot zone, choose the shape from the Tools menu; then click one time for each point required for the shape. For a rectangle, click once to start the rectangle and then click where you'd like the opposite corner of the triangle to appear. For a circle, click for the middle, and then drag out the circle and click when you've got the right radius. The triangle tool is actually a "polygon" tool, so click for each point in the polygon. Then, right-click at the last point (to connect your last point to the first point and complete the shape).
5. When the shape is created, the Object URL dialog box appears (see fig. 12.3). Enter the URL that you want to associate with your new hot zone. (You also can enter comments, if you want.) Then click OK to continue.
6. Add more shapes by following steps 4 and 5 until you finish mapping your graphic.
7. Choose File, Save. Now you have a .MAP file for your image map.

Figure 12.3 : Associating an URL with the hot zone.

Example: MapEdit and a Simple Button Bar

In this example, you use MapEdit to create a simple button bar-a little like the menu bar that you created with clickable graphics in Chapter 11, except for the fact that this one is an image map. Start by drawing an appropriate graphic in a graphics application and saving it as a GIF file. For this example, name the file testbar.gif. Then follow these steps:

1. Open MapEdit, and choose File, Open/Create. The Open/Create Map dialog box appears.
2. In this dialog box, enter testbar.map for the map file and testbar.gif for the graphics file. (If you saved the GIF file in a different directory, use the Browse button to find and load it.)
3. When the graphic loads, pull down the Tools menu and make sure that Rect is selected.
4. Draw rectangles for the buttons, providing an appropriate URL for each button. For this example (four buttons in all), use the following URLs:
   http://www.fakecorp.com/index.html
   http://www.fakecorp.com/product.html
   http://www.fakecorp.com/service.html
   http://www.fakecorp.com/help.html
5. Choose File, Edit Default URL. The Default URL dialog box appears.
6. Enter the following URL:
   http://www.fakecorp.com/error.html
7. Choose File, Save.
8. Choose File, _Quit.

You've created your map definition file. To look at the file, open Notepad (or a similar text editor), and load the file testbar.map into it. The file should look something like figure 12.4 (although the coordinates are bound to be slightly different).

Figure 12.4 : A successful map definition file created in MapEdit.

WebMap for Macintosh

If you're a Macintosh user, you can use a program called WebMap, which is similar to MapEdit. You can download WebMap from http://www.city.net/cnx/software/webmap.html. Install the program; then double-click its icon to start it.

To create an image map in WebMap, follow these steps:

1. Choose File, Open.
2. In the Open dialog box, select the graphic that you want to use for your map and the name of the map definition file that you want to create.
3. Click the OK button. After a moment, MapEdit displays your image file.
4. To create a new hot zone, choose the shape from the floating tool palette, and drag to create a hot zone. For a rectangle, circle, or oval, click and hold the mouse in the top left corner of your shape, drag the mouse to make the shape the desired size, and then release the mouse button. To create a polygon, choose the polygon shape from the tool palette and then click once on the graphic for each point in your polygon. To complete the shape, click once on the first point you created.
5. When the shape is created, enter the URL in the space provided above the graphic file (see fig. 12.5). You can use the pointer tool (the one that looks like a mouse pointer) to select different shapes that you've created and then edit their URLs.
6. To create a default URL, use the pointer tool to click the graphic background (not a shape). Default URL should appear in the comment window. Then enter the default URL in the URL text box.

Figure 12.5 : Using WebMap to create hot zones.

To create your map definition file, pull down the File menu and choose Export As Text. In the resulting dialog box, you can name your map file and save it in CERN or NCSA format. Now you're free to save the graphic and quit the program.

Adding Image Maps to Your Web Page

After you create your image map and your map definition file, you're ready to add a link for your image map to your HTML page. You can accomplish this task in a couple of ways, depending on your Web server. In essence, though, the only major difference between an image map and a clickable image (refer to Chapter 11) is a new attribute for the <IMG> tag: ISMAP.

Image maps follow this format:

<IMG SRC="graphic.ext" ISMAP>

Using the ISMAP attribute doesn't do much for you unless the image map is also a hyperlink, so the following code is everything that you need to add an image map to your Web page:

<A HREF="URL"><IMG SRC="graphic.ext" ISMAP></A>

Our next step is to figure out what to use as the URL in this hyperlink.

The Image Map URL

The URL that you're interested in accessing isn't a particular Web page, because using an URL to a particular Web page would defeat the image map concept; the link would act like a regular clickable graphic. Instead, you want the URL to access the map definition file. You'll have to ask your ISP (or figure out for yourself) where on the server the map file is stored.

Some Web servers allow you to store the map definition file anywhere on the server; the servers are smart enough to figure out that you're accessing a map definition file and take care of the rest. In that case, you could simply store the map definition file in the current directory and access it as follows:

<A HREF="mymap.map"><IMG SRC="mymap.gif" ISMAP></A>

If you have an understanding server, this method may work for you.

Other servers may require you to access a particular directory on the server, such as the /cgi-bin/ or /bin/ directory, where server scripts (mini computer programs) are stored. In such a case, something like the following examples may be the way to access the image map:

<A HREF="http://www.myserver.com/cgi-bin/mymap.map><IMG SRC="mymap.gif" ISMAP></A>

or

<A HREF="http://www.myserver.com/bin/mymap.map><IMG SRC="mymap.gif" ISMAP></A>

If the server requires you to access one of these scripting directories, though, it may not want you to access the map definition file directly. Instead, the server will want you to use an alias.

Some servers store all map information in a single database file (often called imagemap.conf) and require you to access information within the database by using an alias. You and your Web server administrator have to determine what this alias is. In that case, your link would look more like the following:

<A HREF="http://www.myserver.com/bin/mymap><IMG SRC="mymap.gif" ISMAP></A>

Example: Testing Your Link

The best way by far to participate in this example is to confer with your ISP, place your map definition file on the Web server, and test it from a remote location using the correct URL. If that procedure doesn't work, you can manage some testing on your own.

Save your template as a new HTML file, and have an image-mapped graphic handy in the same directory. Then enter Listing 12.1 between the <BODY> tags.

Listing 12.1  img_map.html  Adding Image Maps in HTML

<BODY>
<A HREF="http://www.server.com/mymap.map><IMG SRC="mymap.gif" ISMAP ALT=
"My Image Map"></A>
<H2>Welcome to my page!</H2>
</BODY>

Save the HTML file and then load it in a graphical browser. If your graphic came up, chances are that you set the <IMG> tag correctly. Notice that many browsers do not display a colored link border around the graphic, because the graphic is now considered to be an image map.

Before clicking any of the hot zones, move your mouse pointer around on the image map graphic. If you have a status bar at the bottom of your browser window, you may notice that the link keeps changing (see fig. 12.6). Along with the URL of your map definition file, you should be seeing the current coordinates of your pointer. All this information is sent to the map server to help it figure out what region you clicked. (If you're testing this image map from your local drive, the status bar test is the only part of the example that will work.)

Figure 12.6 : An example image map, showing the URL and the coordinates that it will access if clicked.

Now, if you are testing your image map on the Web server, go ahead and click the map to make sure that all the links work. If you're viewing the image map locally, turn off the graphics-loading option in your browser, and reload the page. You should notice that there's now no way to access the hyperlinks in the image map-that's why you also need text links for your image map pages.

Image Map Design Tips

This chapter has covered creating and linking an image map to your Web page fairly thoroughly. Image maps are a bit of a departure from standard text-markup HTML, however, so you should learn a little bit of design theory and Web-related netiquette before you leave this chapter. Please try to keep some of the following suggestions in mind when you add image maps to your Web pages:

• Use image maps sparingly. The best way to use an image map is as a clickable menu bar or some other easy-to-recognize interface element. The point isn't really to see how graphical you can make your Web pages-just how intuitive.
• Remember that image maps are usually little more than big graphics files. Ultimately, the key to graphics on the Web is keeping them small. Even if your image map is incredibly attractive, users will be annoyed if they have to wait many minutes for their four possible choices to download to their browsers. Use all the tips in Chapter 9 to keep your graphic as small as possible, and use image maps only to enhance usability.
• Image maps require redundant text links. Unless you plan to leave out everyone who can't view your graphics, you need to create text links that do everything that your image map does. Remember that with clickable graphics, the ALT attribute takes care of the problem. The ALT attribute doesn't work for image maps, because a single image map graphic can have many links, so you need to create an identical text link on your page for every hot zone link in your image map.
• Stick to normal shapes whenever possible. Rules are made to be broken, but in general, you should try to be conservative with your image maps (see fig. 12.7). A graphic that looks as though it has rectangular buttons should function as though it has rectangular buttons. In other words, make your hot zones correspond logically to the image map graphics. Random hot zones randomly annoy users.

Figure 12.7 : Some sites make it their business to use image maps that break the rules. This one doesn't.

Summary

Image maps allow you to create hot zones in individual graphics files. These hot zones point to different URLs, effectively turning a single graphic into a Web interface. By creating creative graphics and pointing different sections of those graphics to pages in your site, you can make it very easy for Web users to get around on your site.

Image maps work in conjunction with your Web server, which must be running a special map server program. In such a case, you need to create a graphic and a map definition file. Fortunately, programs for Windows, UNIX, and Macintosh exist to help you create this definition file.

In conjunction with your system administrator, you place the map definition file in the correct directory on your Web server (most often in the /cgi-bin or /bin directory), and create a link to the image map on your Web page. Placing the image map in your HTML document requires the same anchor and <IMG> tags, but you need to include the ISMAP attribute in the <IMG> tag.

After you finish with all your tags, test your new image map. If all goes well, you'll have a new interface for your Web pages.

You should consider some design rules. Basically, keep the graphics small and fairly standard, so that you don't annoy or confuse your users.

Review Questions

1. Why are the graphics discussed in this chapter called image maps?
2. What three steps do you follow to create an image map?
3. What file format is the map definition file saved in?
4. Is it important to know what type of map server program your Web server is using? Why or why not?
5. How do you find out where to store your map definition file?
6. How many points are required for a rectangle in a map definition file? What is the maximum number of points that you can use for a polygon?
7. True or false. You can create an image map without a map editing program.
8. Which files must you create for an image map to work?
9. Do the shapes (rect, poly, point, and so on) that you draw in a map editing program show up in the Web browser window? Why or why not?
10. Why is defining a default map definition redundant if you have already defined a point?
11. Aside from the URL to the map definition file, what information does the Web browser send to the Web server? What does the designer do to make this happen?

Review Exercises

1. Create two different map definition files for the same graphic, one using the CERN method and one using NCSA. Compare the two definition files and notice the differences.
2. Again create two different map definition files for the same graphic, this time using all polygon shapes for one of the definitions and all squares for the other definition. Compare the two definition files. Are polygons considerably more complicated than standard shapes?
3. Create a button bar (or menu bar) using a series of clickable graphics. Then, create a similar button bar using an image map. Which takes more work? Which will take more time to download to a browser (i.e., which method takes up more drive space)?