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.
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.
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.
| Note |
Notice how long it can take a graphical interface to load over your connection, especially if you use a modem to access the Internet. |
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.
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.
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.
| Note |
If you're running your own WebStar or MacHTTP server from a Macintosh, you can use a map server called MapServe, which you can download from http://www.spub.ksu.edu/other/machttp_tools/mapserve/mapserve.html. For the most part, other commercial Web servers for UNIX and Windows NT include map server capabilities. |
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.
| Note |
You can create image maps without map servers and map definition files by using a technology called client-side image maps. Currently a Netscape technology, this technology eventually may become an HTML 3.0 standard. For more information, see Chapter 17, "Client-Side Image Maps." |
This section briefly defines the shapes of hot zones. Hot zones can be in any of the following shapes:
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.
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:
Figure 12.3 : Associating an URL with the hot zone.
| Tip |
By choosing File, Edit Default URL, you can determine whether your image map includes a default URL for clicks outside your hot zones. |
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:
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.
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:
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.
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>
| Note |
It's perfectly acceptable to add other <IMG> tag attributes (such as ALT) to your image map definition. |
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 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>
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>
| Note |
If you're going to test this example on an actual Web server, you need to replace the URL with the appropriate one for your Web site (and add the type of link to your map info file that's required for your server). Also, use the real name of the mapped GIF file in the <IMG> tag. |
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.)
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.
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:
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.