by Jerry Honeycutt, John Jung, and Mark R. Brown
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.
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.
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.
In order to add a server-side imagemap to your Web page, you need four things:
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.
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.
# # 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.
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 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:
rect http://www.myserver.com/mypage/rectangle.htm 30,20 130,80
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.
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.
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.
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.
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.
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]> </MAP>
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.
| 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.
<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> </MAP> <IMG SRC=mymap.gif USEMAP=#mymap>
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.
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> </A>
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.
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.
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.
| 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.
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
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.
<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> <BR> <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.
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.
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:
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.
FIG. 10.12
In imagemaps used as toolbars, text labels help the user understand what each icon
represents.
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
<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.
© Copyright, Macmillan Computer Publishing. All rights reserved.