|
|
|||
|
|
|
|
|
EarthWeb sites:
|
|
Chapter 17Client-Side Image Maps
CONTENTS
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.
What's a Client-Side Image Map?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.
Determining Your Hot ZonesThis 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. Example: Creating a Map Definition FileYou'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. Adding a Client-Side Map to Your Web PageClient-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. The <IMG> TagLet'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> TagThe <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"> 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">
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!
The <AREA> TagBefore 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"> Example: Creating a Client-Side Button BarLet'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> 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. Total Image MapsThere 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. Using Both SidesThe 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"> 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"> Adding Text LinksAnother 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"> Once this is fully supported by browsers, it should allow text-only viewers access to the client-side map's links. The Clickable Image FallbackPerhaps 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"> 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. Example: A Complex, Complete MapLet'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> 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.
SummaryAn 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. Review Questions
Review Exercises
|
|
|
|
Use of this site is subject certain Terms & Conditions. Copyright (c) 1996-1999 EarthWeb, Inc.. All rights reserved. Reproduction in whole or in part in any form or medium without express written permission of EarthWeb is prohibited. Please read our privacy policy for details. |
