Полезная информация

Special Edition Using HTML 4

Previous chapterNext chapterContents

- 10 -
Building Navigational Imagemaps

by Jerry Honeycutt, John Jung, and Mark R. Brown

Introducing Imagemaps

Because imagemaps make use of pictures, they let users navigate content-related links in a friendly fashion. The Web uses the first Internet standard (HTML) that allows for the easy display of graphics. This is in sharp contrast to past standards, which were all text-based, such as Gopher, WAIS, and FTP. Although these older standards could transport images, this capability was never designed into them (see Figure 10.1).

FIG. 10.1
Using imagemaps is easier than text links because most folks relate to pictures better than words.

NOTE: In the wide world of HTML, you also see imagemaps referred to as area maps or clickable maps.

Different parts of an imagemap's graphic point to different URLs. Because the user has to know where these clickable regions are in the imagemap, you'll often find borders around each region, as shown in Figure 10.2. Note these borders are part of the graphic itself and are not created by the Web server.

You can use two different types of imagemaps: server-side and client-side. Here's how each type of imagemap works:

Server side  The browser sends the mouse pointer's coordinates to the Web server when the user clicks somewhere on the imagemap. Then the server looks up the coordinates and determines the region on which the user clicked. With this information, the server looks up the corresponding URL and returns it to the browser. As a result, the browser opens the URL.

FIG. 10.2
For imagemaps to be useful, the user must be able to easily distinguish each region in the imagemap.

Client side  You define an imagemap's region within the Web page. When the user clicks somewhere on the imagemap, the browser looks up the region in the HTML file, determines the associated URL, and opens that URL. The browser doesn't communicate with the Web server at all.

When to Use Imagemaps

In many situations, you should consider using imagemaps instead of hypertext links. Here's a short list of some instances when using imagemaps is appropriate:

FIG. 10.3
By using imagemaps as a navigational tool for the user, you make getting around your home page easier.

When Not to Use Imagemaps

Although imagemaps might be useful in most situations, sometimes you shouldn't use them--for example,

ON THE WEB: Server-side imagemaps require a Web server capable of handling them properly. You can get a free copy of Microsoft's Personal Web Server at Microsoft's Web site: http://www.microsoft.com.

FIG. 10.4
Making textual alternatives for your imagemaps is essential for users with text-based browsers or users who have disabled graphics in their graphical browser.

As their names imply, the differences between server-side and client-side imagemaps lie in whether the control logic is implemented on the Web server, or in the browser client. We'll cover how to use both in this chapter.

Using Server-Side Imagemaps

In order to add a server-side imagemap to your Web page, you need four things:

Creating the Imagemap Graphic

The first thing you want to look at when building an imagemap is the imagemap graphics. If you're building a company Web site, for example, you might want to duplicate the look and feel of your corporate stationery. Chapter 22, "Graphics," 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:

NOTE: If you use transparent GIFs as imagemap graphics, define a default region type, as described later in this chapter. When you use Transparent GIFs (see Chapter 22) as imagemap graphics, users might be confused because the imagemap doesn't have any borders (see Figure 10.5).

FIG. 10.5
Yahoo!'s masthead is a transparent GIF, and the main navigational interface for the user. It's not always obvious when you're in the imagemap and when you're not.

Understanding Imagemap Definition Files

To create a server-side imagemap, you're going to need more than just a pretty picture. You're going to need an imagemap definition file, which identifies where each specific region is within the imagemap.

An imagemap definition file can come in two forms: CERN and NCSA. Both contain the same basic information for the clickable regions within an imagemap. Both of them also use the same region types. The coordinates used to define the regions are also the same. The only difference between the two is the manner in which the information is presented. Because of this incompatibility, you must find out from your system administrator which format your Web server supports.

All entries in a imagemap definition file must include the URL to be accessed (see Listing 10.1). The URL can be either an absolute path or a relative path. If you're using relative paths to specify a URL, be sure to make them relative to the directory where the imagemap definition file resides, not where the imagemap resides.

Listing 10.1  Imagemap Definition File

# Sample Imagemap Definition File
# File Format: NCSA
# Define the default region
default http://www.myserver.com/mypage/index.htm
# Define a rectangle region
rect http://www.myserver.com/mypage/rectangle.htm 50,40 100,120
# Define a circle region
circle http://www.myserver.com/mypage/rectangle.htm 50,40 100,60
# Define a polygon region
poly http://www.myserver.com/mypage/rectangle.htm 10,20 24,70 84,45 07,11 10,20

The CERN Format  Originally, CERN (Conséil Européen pour la Recherche Nucléaire) was founded as a research group of European physicists. The group slowly expanded its research into the field of computers. Because they were the ones who thought of the idea, they rightfully claim 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 (x1 and x2) and vertical (y1 and y2) 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 "Working with 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 NCSA Format  The first wildly popular browser, Mosaic, came from the University of Illinois' 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 this:

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, as with 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

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 a URL. When a pound sign is in the middle of a URL, it specifies an internal destination point.

Working with Imagemap Region Types

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 Figure 10.6).

NOTE: 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.

The Rectangle Region  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 activate the region. Here's an example using the NCSA format:

rect http://www.rectangle.com/ 100,100 120,120

FIG. 10.6
Excepting the default type, you can use any combination of these region types.

If your Web server is a CERN imagemap server, the previous example will look like this:

rect (100,100) (120,120) http://www.rectangle.com/

TIP: Whenever multiple region types overlap, the first one with an entry in the imagemap definition file is used.

The Polygon Region  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. Note that you should close the polygon. That is, the first and last set of coordinates should be the same. Here's an example using the NCSA format:

poly http://www.polygon.com/ 0,0 100,100 120,120 80,60 40,50 10,10 0,0

If your Web server is a CERN imagemap server, the previous example will look like this:

poly (0,0) (100,100) (120,120) (80,60) (40,50) (10,10) (0,0) http://www.polygon.com/

The Circle Region  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, like this:

circle http://www.circle.com/ 100,100 150,150

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. Here's an example:

circle (100,100) 50 http://www.circle.com/

The Point Region  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--for example,

point http://www.point.com/ 88,65

The Default Region  If the user clicks in an imagemap and doesn't activate any region, the default region type is used. This element requires no coordinates. For example, assume you have the following two lines in your imagemap definition file:

rect http://www.rectangle.com/ 0,0 100,100
default http://www.rectangle.com/helpme

If the user clicks anywhere within the first rectangle, the browser opens http://www.rectangle.com. On the other hand, if the user clicks anywhere outside of the first rectangle, the browser opens http://www.rectangle.com/helpme because this URL is associated with the default region.

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. Try using small circles instead.

TIP: An imagemap definition file should, whenever possible, be configured with a default region. The default region opens a specified URL when the user clicks outside of any region. This URL can provide the user with feedback or helpful information about using that particular imagemap.

Creating Imagemap Definition Files

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. You learn more about these programs in the section "Working with Mapping Programs," later in this chapter.

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. Here's how:

1. Print a hard copy of the image you're using as an imagemap and mark where you want each clickable region.

2. Load the image in a graphics program. (The program should display the coordinates of the mouse.)

3. Create a new text file for your imagemap and open it in your favorite text editor (Notepad). Consider using the MAP file extension as this is standard across the Internet.

4. For each region in your sketch, add an entry to the imagemap definition file. Use the graphics program to locate the coordinates required for each region. For example, if you are creating a region for the rectangle in Figure 10.6, place your mouse pointer at the upper-left corner of the rectangle and note the coordinates (30,20); place the mouse pointer at the lower-right corner of the rectangle and note the coordinates (130, 80); and add the following entry to your imagemap definition file:
rect http://www.myserver.com/mypage/rectangle.htm 30,20 130,80
5. Save your imagemap definition file.

CAUTION: When using a graphics program to get coordinates for use in an imagemap, be careful not to actually change the image.

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, where each will have the appropriate extension.

Using a CGI Program to Look Up Mouse Clicks

As noted earlier in this chapter, you must use a CGI program to translate a user's mouse click into a URL. The user's browser invokes your CGI program, passing to it the coordinates of the mouse click. Then, within your imagemap definition file, your program finds the region in which the user clicks. If the program finds a matching region, it returns the corresponding URL; otherwise, it returns an error.

Chapter 34, "CGI Scripting," shows you how to create CGI programs. In most cases, however, your ISP already provides a CGI program that you can use to look up URLs in an imagemap definition file.

Invoking the CGI Program  By now you might have asked yourself how you invoke the CGI script from within the Web page. You learn more about the HTML you use to create imagemaps in the next section. For now, however, imagemaps within your HTML look a bit like the following example:

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

The HREF in the example anchor specifies a link, not to another Web page or Internet resource, but to an imagemap. Depending on how you create your imagemap and how your ISP works with imagemaps, you may also link to the actual CGI program. When the user clicks on the imagemap, the browser attempts to open this URL, passing to it the coordinates of the mouse pointer as a parameter. The server then replies by returning the URL that the CGI program determined is associated with those coordinates.

Working with an ISP  Most Internet service providers (ISPs) work alike, right down to the tilde (~) that many ISPs prefix to your username when creating the directory for your home page. Thus, if you're creating a personal home page on an ISP's Web server, you can bet that you'll use a format similar to the following when invoking an imagemap:

<a href="/cgi-bin/imagemap/~username/image.map">
<img src="myimage.gif"></a>

The HREF points to /cgi-bin/imagemap/~username/image.map. You simply substitute your username for username and the name of your imagemap file for image.map. Also note that most ISPs have requirements for how you store your map files. For example, my ISP requires that I store all imagemap files in the root directory of my home page, called /PUBLIC_HTML, regardless of the directory structure that my Web site uses. Your ISP may have different requirements.

Putting the HTML on the Web Page

Now that you have all the elements in place for an imagemap, you're ready to actually put it in your Web page. You do so by building from what you learn in Chapter 22. There, you can see 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 Web page on your 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 MAPFILE.MAP, and its graphic is called IMAGEMAP.GIF. To put an imagemap in an HTML document, you use the following HTML code:

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

When the imagemap is selected, the Web server runs the imagemap CGI program. The program then takes over and translates 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.

Putting Your Imagemap Through a Dry Run

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 have 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: Keep your FTP client open and ready. Then, you can quickly change and test your imagemap by flipping back and forth between the text editor, FTP client, and Web browser (don't forget to reload the Web page if you're changing the graphic).

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.

Building Client-Side Imagemaps

Until HTML 3.2, the client-side imagemap was an extension limited to Netscape Navigator and Internet Explorer. Now, client-side imagemaps are no longer an extension; they are part of the standard.

Client-side imagemaps are similar to server-side imagemaps. The only difference is that instead of using an imagemap file and CGI script on the server, you use an imagemap that you store right in the HTML file. The greatest benefit is in the reduced network traffic. That is, instead of hitting the Web server to look up a URL, the browser handles the imagemap itself.

Defining a Client-Side Imagemap

Remember the formats of the NCSA and CERN imagemap definition files? The HTML format for an imagemap definition contains the same types of information, but it uses HTML tags. Here's what the syntax of an imagemap definition in HTML looks like:

<MAP NAME="mapname">
<AREA [SHAPE="shape"] COORDS="x,y,..." [HREF="URL"][NOHREF]>

The imagemap definition starts with the <MAP> tag and ends with the </MAP> tag. It's a container. So that you can refer to the imagemap definition later, you give it a name by using the NAME attribute.

You define each region, or hot spot, by using the AREA tag. The coordinate system starts from the upper-left corner of the imagemap. Table 10.1 describes each of the AREA tag's attributes.

Table 10.1  The <AREA> Tag's Attributes

Attribute Description
SHAPE Defines the shape of the region. Just like the server-side imagemap definition files, you can use rect, poly, circle, or default. If this attribute is missing, the browser assumes rect. When two regions overlap, the browser uses the first one in the list.
COORDS Defines a comma-separated list of coordinates. Note there is a comma between each set of coordinates.
HREF Defines the URL of the Internet resource to which the region is linked. All relative links are relative to the document containing the MAP tag, not the one containing the USEMAP attribute, if different. If you use a BASE tag in the HTML file containing the MAP tag, that URL is used.
NOHREF Specifies the region is a dead area within the imagemap. That is, that area is not linked to any Internet resource. Note HREF and NOHREF are mutually exclusive.

Listing 10.2 shows you a complete example of an imagemap definition in HTML. Figure 10.7 shows the Web page created by this HTML code.

Listing 10.2  A Client-Side Imagemap

<MAP NAME=mymap>
<AREA SHAPE=RECT COORDS="0,0,100,100" HREF=item1.html>
<AREA SHAPE=RECT COORDS="101,0,200,100" HREF=item2.html>
<AREA SHAPE=RECT COORDS="201,0,300,100" HREF=item3.html>
<IMG SRC=mymap.gif USEMAP=#mymap>

Referencing the Client-Side Imagemap Definition

The final line of the previous example shows how to reference an imagemap after it's built:

<IMG SRC=mymap.gif USEMAP=#mymap>

This <IMG> tag loads the image called MYMAP.GIF. The USEMAP attribute specifies the name of the imagemap definition, which you define elsewhere in the HTML file using the <MAP> tag.

FIG. 10.7
The client-side imagemap produced by the example HTML code.

Combining Client-Side and Server-Side Imagemaps

If you want to take care of those folks with browsers that don't support client-side imagemaps while reducing network traffic for those folks with browsers that do support client-side imagemaps, you can combine the best of both worlds. You can define an imagemap that works with both client-side and server-side imagemaps. Combine both definitions within the <IMG> tag, like this:

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

If the browser supports client-side imagemaps, it will use the map from the USEMAP attribute. Otherwise, the browser will use the map on the server.

NOTE: If you want to use client-side imagemaps but don't want to or can't create a server-side imagemap, you can create an alternative, like this:
<A HREF=textmenu.html><IMG SRC=mymap.gif USEMAP=mymap></A>

The user will see the image whether or not the his browser supports imagemaps. If a user clicks the image and his browser doesn't support imagemaps, he'll see a text menu from which he can choose an URL.

Working with Mapping Programs

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 and 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, you don't have to use one if it doesn't feel right to you.

TIP: Even though a map-editing program might not support every region type, you can still add other region types by editing the imagemap definition file after you have saved it.

Working with Mapedit

Mapedit 2.24 is a shareware, no-frills, map-editing program for Windows 95 and UNIX. You can get Mapedit from http://www.boutell.com/mapedit. 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.

NOTE: Other popular imagemap editors include CrossEye 1.0 (http://www.sausage.com), LiveImage 1.0 (http://www.mediatec.com), Map This 1.31 (http:// www.ecaetc.ohio-state.edu/tc/mt), and Web Hotspots 2.01 (http:// www.concentric.net/~automata/hotspots.shtml).
Imagemap editors are also included with most commercial Web page creation programs, such as FrontPage, Pagemill, and Backstage.

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 by 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.

NOTE: PNG (Portable Network Graphics) is a new graphics file format that's similar to GIF. It's lossless--that is, it doesn't throw away information just to compress an image, like JPEG does. So you don't lose colors when it's compressed and portable across multiple platforms. The biggest advantage of PNG over GIF is that you're not stepping on anyone's patents when you use it. In addition, PNG provides many technological benefits, such as interlaced images that appear on the screen quicker than GIF's interlaced images.

To edit an existing imagemap definition file, you can use the Browse button under the Map or HTML File heading (see Figure 10.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 option buttons. Mapedit then asks you to confirm that you want to create a new imagemap.

After you click OK, the shareware notification appears. After the graphic is loaded, the shareware dialog box is dismissed, 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.

FIG. 10.8
When you want to create or edit an imagemap file with Mapedit, you have to fill in the information for this dialog box.

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 may not make immediate sense (see Table 10.2). 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, and then reclicking and rereleasing the mouse button. After you have created a region type on the imagemap graphic, you can't delete it by using Mapedit.

Table 10.2  Creating Region Types by Using Mapedit

Region Type How to Create
Circle Click the left mouse button to specify the center of the desired circle and the size of the circle. Click the right mouse button when the circle is the desired size.
Rectangle Click the left mouse button to specify one corner of the rectangle and the size of the rectangle. Click 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 Figure 10.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.

FIG. 10.9
After you create a region type, Mapedit asks for the URL to which that region should refer.

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 each region type's outline colors, choose File, 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 Esc 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. When you press the left mouse button while moving the mouse over an imagemap, the URL for the corresponding region appears. 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 the region you want to move, and a number of control points will appear. By clicking and dragging 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. Because 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 work only on polygon region types, and do as their name implies. With the Add Points option, click the polygon you want to add a point to and then put your mouse roughly where you want the new point to appear. Similarly, for Remove Points, you click the polygon from which you want to remove a point and 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 includes a graphic. It will present a dialog box with whatever images were found (see Figure 10.10). Select the picture you want to create a client-side imagemap for and click OK. The file name for the image is automatically filled in Mapedit's Select Inline Image dialog box. Once you click OK, you'll be taken into Mapedit as usual. After you've created all the shapes you want, saving the changes will update the HTML file.

FIG. 10.10
To create client-side imagemaps, just select the picture you want to make an imagemap for.

Using Alternatives to Imagemaps

For whatever reason, you may not want to use HTML 4 imagemaps in your Web page. Maybe your audience is a group of text-only folks. Maybe your service provider doesn't support CGI scripts, and thus doesn't support server-side imagemaps, and you're afraid of abandoning those folks with older browsers. This section presents you with three alternatives to imagemaps: Image chunks

Scripting Textual alternatives

Image Chunks

Instead of defining rectangular regions within a larger image, you can divide the image into smaller images by using your favorite paint program. Then, you can insert each image into your Web page, causing it to appear to the user as a single image. Of course, you'll link each image to a different URL.

For example, if you divide a 100x100 image into four square chunks, each 50x50, you can combine them on the Web page like that shown in Listing 10.3.

Listing 10.3  An Imagemap Created from Individual Images

<A HREF=item1.html><IMG SRC=item1.gif WIDTH=50 HEIGHT=50 BORDER=0></A>
<A HREF=item2.html><IMG SRC=item2.gif WIDTH=50 HEIGHT=50 BORDER=0></A>
<A HREF=item3.html><IMG SRC=item3.gif WIDTH=50 HEIGHT=50 BORDER=0></A>
<A HREF=item4.html><IMG SRC=item4.gif WIDTH=50 HEIGHT=50 BORDER=0></A>

To the user, these four chunks will appear as one larger image. However, each chunk is linked to a different URL. Note that you must specify the exact height and width of the image and turn off borders.

TIP: You can also use tables to assemble each portion of the imagemap.


You can use VBScript or JavaScript to create client-side imagemaps. That is, you can associate a script with the mouse-click event of an image. Then, when the user clicks the mouse on that image, you can open a different URL depending on the area of the image the user clicked.

Textual Alternatives

Imagemaps and graphics in general don't translate particularly well into 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 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 should provide some support for them.

You can let nongraphics users 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-intensive 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 you like, you should take one of them. If you ignore the text-only crowd, you're alienating a large group of people.

Building an Imagemap

You've learned a lot of general information about creating imagemaps, but you'll benefit more from walking through an example, beginning to end. The example in this section is a simple imagemap that you can use as a toolbar. The image is straightforward. When creating your own imagemap, however, you can substitute images from your own favorite clip-art library or images you create by hand. The following instructions show you how to create an imagemap:

1. Decide what links you want in your imagemap and how you want to communicate those links to the user. Then, sketch out a rough idea of what you want the imagemap to look like before you start drawing it. In this example, I'm creating regions for the following links: http://rampages.onramp.net/~jerry, http://www.microsoft.com, http://www.netscape.com, and http://www.quecorp.com.

2. Open your graphics program (Micrografx Picture Publisher) and, in this example, create a new image that's 320 pixels in width and 80 pixels in height.

3. Add each graphic--which represents each link you're putting in the toolbar--to the image. Position the graphics so that they're spread evenly across the imagemap, as shown in Figure 10.11.

FIG. 10.11
An alternative to creating a transparent GIF is to fill the background with the same color as the Web pages' background color--white in this case.

4. Add text labels underneath each graphic so the user can easily discern what each image does (see Figure 10.12).

5. Save the image as a GIF file called IMAGEMAP.GIF.

6. Open IMAGEMAP.GIF in either Mapedit or your favorite imagemap editor.

FIG. 10.12
In imagemaps used as toolbars, text labels help the user understand what each icon represents.

Create a rectangular region around each graphic in the toolbar. Don't forget to include the text label that you added underneath each graphic in the region.

8. Save the imagemap definition to a file called IMAGEMAP.MAP. Listing 10.4 shows you what the imagemap definition file for this example looks like.

Listing 10.4  IMAGEMAP.MAP--Imagemap Definition File

rect http://rampages.onramp.net/~jerry 1,0 39,77
rect http://www.microsoft.com 75,8 169,79
rect http://www.netscape.com 199,4 251,79
rect http://www.mcp.com 273,4 323,82
9. Add the following line of code to your HTML file. You'll replace www.myserver.com/cgi-bin with the path that's appropriate for your Web server. Ask your Web server administrator if you're not sure what path to use. Alternatively, you can create a client-side imagemap by using the Mapedit as described earlier in this chapter. Figure 10.13 shows you what the completed example looks like.
<A HREF="http://www.myserver.com/cgi-bin/imagemap.map">
<IMG SRC=imagemap.gif ISMAP></A>

FIG. 10.13
You can position the toolbar at the top and bottom of the Web page to make it more accessible to the user.

Previous chapterNext chapterContents

© Copyright, Macmillan Computer Publishing. All rights reserved.