Chapter 12, ® Clickable Image Maps and Graphical Interfaces,-discussed the use of image maps in interface design, and you found that creating these image maps made your Web sites more attractive and, often, more intuitive for users. The original, and now expired, HTML 3.0 working paper used the <FIG> tag to create something called a client-side image map. As mentioned before, it looks like the <FIG> tag may not ever make it in the HTML world. But client-side image maps will.
The current HTML 3.0-related draft has been offered for consideration
by Spyglass, Inc. Fortunately, it agrees with the methods currently
in use by Netscape and others-at least for the most part. Again,
we'll try to take the least common denominator and come up with
a specification that works for as many browsers as possible.
| Note |
I'm basing this chapter on current drafts and market forces. Of course, the HTML 3.0 folks don't always agree with the market in general, and the "official" client-side image map specification may change. Keep a lookout at http://www.w3.org/ just to be sure. |
You've probably heard of client/server technology before, even if you weren't sure what it meant. Essentially, client/server describes the relationship between computers on the Internet (as well as elsewhere in computer networking). In most cases on the Web, for instance, the server is the Web server. The client is the Web browser program you use to access information on that server.
The image maps discussed in Chapter 12 were all server-side image maps, in that they required a special map server program to determine what coordinates matched up with what URLs. Instead of having your browser send an URL to the Web server, the map server program sent it.
Client-side image maps don't require a special map server to determine
where the user clicked and what URL should be accessed. Instead,
if properly marked-up by the Web designer, a client-side image
map is interpreted by the browser itself, which simply loads the
URL as if a regular hypertext link were clicked. This clearly
requires a client-side aware browser like Netscape Navigator,
MS Internet Explorer, NCSA Mosaic, or a Spyglass, Inc. product.
| Advantages of Client-Side Image Maps |
It may seem a bit redundant to talk about two different styles of image map creation in separate chapters of the book. You've already learned one, so why not stick to it? If I wrote this book next year, I'd probably only cover client-side image maps. They're that much of an improvement. Unfortunately, as you'll see later is this chapter, the relative youth of the client-side concept can force you, at this point, to use both types of image maps on your Web sites. But the inherent advantages in using client-side image maps are considerable. First, they do away with the need for extra files and programs on the Web server, which should be a great relief to non-programming Web designers. Client-side maps are just more HTML markup-and no CGI-BIN programming. Related to that is the control that client-side maps offer you. As a designer, you're not forced to deal with your Web administrator to offer image maps to your users. If you don't think that's a big deal, try putting a server-side map on a Web page that's served by one of the major online services (like AOL's member pages). Finally, client-side maps don't require a Web server-or the HTTP protocol-at all. In fact, they don't even have to be on the Internet. It will become more and more common to see non-Web applications for HTML in the future (like CD-ROM based HTML archives) where a Web server isn't part of the picture. With client-side maps, you don't need a server to create an interface. |
| Tip |
As with most HTML extensions, you'll want to warn users when certain browsers are required to access features on your site. |
This chapter assumes you've read about image maps in Chapter 12, Clickable Image Maps and Graphical Interfaces.-Client-side maps and the server-side maps discussed in Chapter 12 are very similar.
What you need to start with for your client-side maps is an appropriate graphic. Although client-side maps don't require a map definition file, using a map editing program (like MapEdit for Windows/UNIX or WebMap for Mac) is a sneaky way to come up with the information you do need for your client-side map.
Using your map editor, you can create hot zones (the clickable ® shapes-that work as hyperlinks) that you'd like to use for your map (see fig. 17.1). If you need instructions for this, refer to Chapter 12. When you've created your hot zones for a particular graphic, save your map definition file. You now have the information you need to create a client-side map.
Figure 17.1: Creating hot zones for a map definition file.
You've done this once already in Chapter 12, but how about doing it again, with some attention paid to the specifics of client-side maps? There are basically two things to remember about client-side maps:
For this example, create a map definition file for the graphic you want to use as a client-side image map. Do your best to use simple shapes for your hot zones. Also remember to create a hot zone that covers the whole graphic. When you're done, you'll have a map definition file like the one shown in figure 17.2. Print this file out or save it somewhere where you can get at it. You'll use this as a reference when you create the client-side map.
Figure 17.2: Keeping the map definition file simple.
Client-side maps require two different sections of code-the <IMG> tag and a new tag, the <MAP> container. <MAP> acts much like a map definition file does, except that it is part of the HTML document. You created the map definition file in the last section to help you with this new tag.
Let's look at the <IMG> tag first. In order to create a client-side image map, you need to add the new attribute USEMAP, as follows:
<IMG SRC="map_name.gif" USEMAP="#section_name">
Notice that USEMAP accepts a section-style hyperlink. That's how you can store the map definition information in the same HTML document. Here's an example:
<IMG SRC="mymap.gif" USEMAP="#mymap">
That's all you need in order to display the image and tell the browser that this is a client-side image map. Now, however, you need to create the definition that the browser will use for that map.
The <MAP> tag is a container tag that is referenced using a section-style NAME attribute. Inside the <MAP> container, you use the <AREA> tag to define each hot zone for the client-side map. Here's how it works:
<MAP NAME="section_name">
<AREA SHAPE="shape1" COORDS="coordinate numbers" HREF="URL">
<AREA SHAPE"shape2" COORDS="coordinate numbers" HREF="URL">
...
</MAP>
Notice that most of the information required for the <AREA> tag is available to you in your map definition file. See how easy this is going to be? Based on the map definition file you create in a map editing program, you can come up with a complete client-side <MAP> like the following one:
<MAP NAME="mymap">
<AREA SHAPE="POLY" COORDS="1,0,1,72,108,0"" HREF="index.html">
<AREA SHAPE="POLY" COORDS="154,0,109,0,88,14,154,71"" HREF="ftp.html">
<AREA SHAPE="RECT" COORDS="157,0,287,35" HREF="about.html">
<AREA SHAPE="RECT" COORDS="158,38,288,71" HREF="support.html">
<AREA SHAPE="RECT" COORDS="0,0,288,71" HREF="help.html">
</MAP>
That last <AREA> tag
is the one you're using to define your entire graphic. According
to the client-side specification, the area defined first takes
precedence when two areas overlap. So, if someone clicks in one
of the first four hot zones, they'll be taken to the appropriate
URL. If they miss a hot zone, though, they'll be taken to help.html,
where you'll tell them how to use the map. That's all there is
to it!
| Note |
If you elect not to create your own default hot zone, client-side maps will automatically ignore clicks that fall outside of your other hot zones. This may frustrate users, but at least they won't be sent to URLs at random. |
Before you see an example, I need to point out to you that the shapes for client-side hot zones differ a bit from those for server-side maps. There are only three basic shapes. (Remember this is when you use your map editing program to determine coordinates.) The SHAPE attribute is used to accept these values. The numbers are given to the COORD attribute. The three basic shapes are as follows:
The HREF attribute is used to give the appropriate URL for each hot zone. If no URL is desired, then the attribute NOHREF can be used to make a particular hot zone useless.
Three different examples of <AREA> tags might be:
<AREA SHAPE="RECT" COORDS="0,0,49,49" HREF="about_me.html">
<AREA SHAPE="CIRCLE" COORDS="75,49,10" HREF="resume.html">
<AREA SHAPE="POLYGON" COORDS="50,0,65,0,80,10,65,20,50,20" NOHREF>
Let's pull this all together into an example. You can create a client-side version of the button bar you used as an image map in Chapter 12. Figure 17.3 shows that graphic again.
Figure 17.3: Button bar example.
The first step is to use an image map editing application to create hot zones for the entire graphic. With a button bar, creating a default zone is up to you. If you think it's possible for your user to miss the other hot zones you define, and you want them to go to a specific page if they do, then create a hot zone for the entire graphic.
By necessity, all of the hot zones defined for the button bar will be rectangles. Figure 17.4 shows the map definition file to work with.
Figure 17.4: Map definition information.
Now we'll start by creating a new HTML document that uses this graphic as a client-side image map (see Listing 17.1).
Listing 17.1 client_map.html Inserting a Client-Side Image Map
<BODY>
<IMG SRC="menu.gif" USEMAP="#menu_map">
<H3> Welcome to My Home Page </H3>
<P> I'm just getting everything started, but you can use the button bar
above>to go to a couple of different places, like my <A HREF="news.html">
News Page</A>, my <A HREF="email.html">Email Tutorial</A> or to come back
to this Index. <B>Note the above button bar requires a browser capable of using client-side image maps.</B></P>
<MAP NAME="menu_map">
<AREA SHAPE="RECT" COORDS="0,0,88,37" HREF="index.html">
<AREA SHAPE="RECT" COORDS="91,0,191,37" HREF="product.html">
<AREA SHAPE="RECT" COORDS="195,0,296,37" HREF="service.html">
<AREA SHAPE="RECT" COORDS="300,0,393,37" HREF="help.html">
</MAP>
</BODY>
First of all, it's nice to see that your map definition information translates so nicely, isn't it? Second, notice that, even though the map definition file gives 36 as the bottom coordinate for your first hot zone, with client-side image maps you have the freedom to line that up with your others, and choose 37 instead. Most likely, you just clicked a pixel too high in the map editing program. Figure 17.5 shows the final product.
There are a few other things you can do with the <IMG> tag and client-side maps to make them more compatible and useful for all of your browsers. As more and more browsers support client-side maps, these suggestions may become less relevant. For now, though, it's important to at least consider these options.
The first tactic you can take will allow both types of image map-client-side and server-side-to coexist peacefully. If a browser is capable of offering client-side maps, it will choose that route. If not, it'll ignore the USEMAP attribute and consult the Web server for a map server program's help. The following example shows how it's done:
<A HREF="Map Definition URL">
<IMG SRC="map.gif" USEMAP="#name" ISMAP></A>
This is a basically a hybrid of the two systems. Any graphical browser-client-side savvy or not-can handle this image map. All you've got to do is set it up with both client-side data and a map definition file as described in Chapter 12. The following is an example:
<A HREF="http://www.fakecorp.com/cgi-bin/mymap.map">
<IMG SRC="mymap.gif" USEMAP="#map_data" ISMAP></A>
Another advantage of the client-side system is that it allows you to create individual links that display as text using the ALT attribute for the <AREA> tag. For a while, you'll probably still need to supply text links outside of your image map, since text-based browsers need to be updated to recognize the <AREA> tag, if only so that they can display the ALT text.
From an earlier example, you can add the ALT attribute like this:
<MAP NAME="menu_map">
<AREA SHAPE="RECT" COORDS="0,0,88,37" HREF="index.html" ALT="To Index">
<AREA SHAPE="RECT" COORDS="91,0,191,37" HREF="product.html" ALT="To Products">
<AREA SHAPE="RECT" COORDS="195,0,296,37" HREF="service.html" ALT="To Service">
<AREA SHAPE="RECT" COORDS="300,0,393,37" HREF="help.html" ALT="To Help">
</MAP>
Once this is fully supported by browsers, it should allow text-only viewers access to the client-side map's links.
Perhaps you want to offer a solution to browsers that can't accept client-side image maps, but don't have access to your Web server for offering a server-side map. In that case, you can make an image both a client-side map and a clickable graphic. Just assign the graphic as a whole to a link that explains that you're using a client-side map, like in the following example:
<A HREF="error_map.html">
<IMG SRC="mymap.gif" USEMAP="#map_data"></A>
In this example, if users click somewhere on the graphic, but their browser can't deal with client-side maps, they'll be taken to a page called error_map.html where you can explain the problem to them, and perhaps offer a series of clickable graphics or text links for them to use.
Let's take everything we've discussed and throw it together into a complete client-side image map-complete, that is, with some non-client-side failsafes. For this one, use a graphic that's a little more exciting and appealing for your intro page interface.
Start by creating the graphic. Be as wild as you want, but remember to keep the graphic itself fairly small (kilobyte wise) and remember that you want your client-side map hot zones to be relatively simple. Figure 17.6 shows the image.
Figure 17.6: A more complete Web interface for your client-side map.
Keep your hot zones basic geometric shapes and you won't be entering coordinates for the rest of your life. Now, use a map editing program to generate a map definition file, so you can get a basic feel for the coordinates you'll need to enter (see fig. 17.7).
Figure 17.7: The map definition file for your Web interface.
Finally, with the information in hand, you can enter the HTML in Listing 17.2 to activate this client-side map.
Listing 17.2 Activating the Client-Side Map with Failsafes
<BODY>
<A HREF="text_index.html">Click here for text menu</A><BR>
<HR>
<A HREF="http://www.fakecorp.com/cgi-bin/mainmap">
<IMG SRC="mainmap.gif" ISMAP USEMAP="#client_map"></A>
<HR>
<H3>Today's News:</H3>
<P>Read our latest <A HREF="releases.html">press releases</A> concerning
our Midwest exapansion.</P>
<P><B>Next week:</B> chat with the CEO! Tuesday at 9pm Eastern time, Mr.
Bigbucks is on IRC channel #bigchat on the Undernet.</P>
<HR>
<MAP NAME="client_map">
<AREA SHAPE="RECT" COORDS="9,13,331,51" HREF="products.html" ALT="To Products">
<AREA SHAPE="RECT" COORDS="113,142,230,207" HREF="about.html" ALT="About the Company">
<AREA SHAPE="CIRCLE" COORDS="49,171,37" HREF="releases.html" ALT="Press Releases">
<AREA SHAPE="CIRCLE" COORDS="298,173,37" HREF="support.html" ALT="To Support">
<AREA SHAPE="RECT" COORDS="0,0,342,216" HREF="help.html" ALT="To Help">
</MAP>
</BODY>
Clearly, an image map is a quick way to take up a lot of space on your Web page without a great deal of HTML and other text (see fig. 17.8). This page allows any graphical browser access to the image map, whether it chooses to process it as a client-side map or a server-side map. You've also defined a link at the top for a text-based menu that users can click if they're using a non-graphical browser, or if they don't want to wait for the image map to download.
Figure 17.8: The into page in action.
| Note |
For the map definition file in figure 17.8 to work properly as a server-side map, you should delete the last rectangle (your client-side default) and assign help.html as the official default value in the definition file. |
An emerging standard for HTML 3.0 allows you to create client-side image maps using the <IMG> tag and the USEMAP attribute. These client-side maps define hot zones within the HTML document, instead of relying on a special map server program.
Creating a client-side map can be made much easier if you use a map editing program to determine the appropriate coordinates for your particular graphic. With that information, you can create the <MAP> container element, which includes the information relevant to each hot zone.
You should keep the hot zone shapes fairly uncomplicated for client-side maps, since there are only three shapes to work with, and the hot zone coordinates have to be entered by hand. Past that, though, you have a very powerful tool with client-side image maps that eliminate the need for help from a Web server-based application.