developer.com - Reference Click here to support our advertisers SOFTWAREFOR SALE BOOKSFOR SALE SEARCH CENTRAL JOB BANK CLASSIFIED ADS DIRECTORIES REFERENCE Online Library Reports TRAINING CENTER JOURNAL NEWS CENTRAL DOWNLOADS DISCUSSIONS CALENDAR ABOUT US Journal: Get the weekly email highlights from the most popular online Journal for developers! Current issue developer.com developerdirect.com htmlgoodies.com javagoodies.com jars.com intranetjournal.com javascripts.com All Categories : HTML Chapter 17 Client-Side Image Maps CONTENTS What's a Client-Side Image Map? Determining Your Hot Zones Example: Creating a Map Definition File Adding a Client-Side Map to Your Web Page The <IMG> Tag The <MAP> Tag The <AREA> Tag Example: Creating a Client-Side Button Bar Total Image Maps Using Both Sides Adding Text Links The Clickable Image Fallback Example: A Complex, Complete Map Summary Review Questions Review Exercises 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. 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. 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. Determining Your Hot Zones 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. Example: Creating 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: Uncomplicate your hot zones. You won't be using this map definition file directly-you'll be using it as a guide to create hot zones in your HTML document. So, you're best off if all of your shapes and coordinates make sense to you just by looking at them in the definition file. How can you do this? Keep them simple. Determine the coordinates of your entire graphic. Client-side maps don't have a default like server-side maps do, so you'll need to know the coordinates of your entire graphic to create your own default. 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 Page 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. The <IMG> 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 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. The <AREA> Tag 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: RECT-The rectangular hot zone requires four coordinates: the top left corner and the bottom right corner. An example would be 1,0,55,54 which places the left at pixel 1, the top at pixel 0, the right at 55, and the bottom at 54. CIRCLE-A circular zone requires three different coordinates: center-x, center-y, and a radius. An example might be 20,20,5, which would represent a circle with its center at 20,20 and a radius of 5 pixels. POLYGON-For a polygon, each vertex requires a pair of points as its definition. (This is nearly the same as is created by most map definition programs.) A COORD value of 1,2,55,56,1,99 would create a polygon (triangle) with a vertex at 1,2, one at 55,56, and a third at 1,99. 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> Example: Creating a Client-Side Button Bar 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. Figure 17.5: Notice that the <MAP> data doesn't appear in the browser window of the client-side image map. Total Image Maps 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. Using Both Sides 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> Adding Text Links 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. The Clickable Image Fallback 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. Example: A Complex, Complete Map 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. Summary 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. Review Questions What's the main different between a server-side image map and a client-side image map? Do client-side maps require map definition files? Why is it sometimes important to include HTML coding for both client-side and server-side maps for the same image? True or false. Client-side maps required you to define your own default hot zone. Which attribute to the <IMG> tag is used to create a link to the client-side map data? What tag is used to contain that data? What are the three shapes for client-side hot zones? Why is it important for text-based browsers to be updated to recognize the client-side image map specification? Why would it be advantageous to make an image both a "clickable" image and a client-side map? Review Exercises Create two different map definition files for the same graphic, and then compare them. Are the coordinates the exact same? If not, what are the most appropriate coordinates? Create a client-side map with overlapping hot zones (as defined in your <MAP> container). Test it in a browser. Notice how the order of your <AREA> tags really matter to your client-side map? Using a fairly simple graphic, create a client-side image map without the help of a map definition file from a map editing program. Just use simple shapes and try to estimate the appropriate coordinates for hot zones. Use of this site is subject to certain Terms & Conditions. Copyright (c) 1996-1998 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 the Acceptable Usage Statement. Contact [e-mail] with questions or comments. Copyright 1998 Macmillan Computer Publishing. All rights reserved.