Platinum Edition Using HTML 4, XML, and Java 1.2
(Publisher: Macmillan Computer Publishing)
Author(s): Eric Ladd
ISBN: 078971759x
Publication Date: 11/01/98

Using Server-Side and Client-Side Imagemaps Together

Client-side imagemaps are a great idea because they permit faster imagemap processing and enhance the portability of your HTML documents. Unfortunately, you can’t be certain all graphical browsers are compliant with the HTML 4.0 recommendation and support the client-side imagemap approach just described. To be on the safe side, you can combine server-side and client-side imagemaps, essentially implementing both at the same time, to ensure your imagemaps are accessible to the broadest possible audience.

To combine a server-side imagemap with a client-side imagemap for the main page example discussed earlier, you can modify the earlier HTML as follows:

<A HREF=“<http://www.server/maps/mainpage.map>”>
<IMG SRC=“images/map2.gif” USEMAP=“#mainpage” ISMAP></A>

Flanking the <IMG> tag with <A> and </A> tags makes it point to the mainpage.map file on the server. You need to include the ISMAP attribute in the <IMG> tag to let the browser know that the image is linked as a server-side imagemap as well.

---

NOTE:  You can link NCSA- and CERN-style server-side imagemaps to client-side imagemaps by having the HREF in the <A> tag point to the imagemap script instead of pointing directly to the map file.

---

Providing a Text Alternative to an Imagemap

When you use an imagemap—in particular, a server-side imagemap—it is important to provide a text-based alternative to users who have a text-only browser, who have image loading turned off, or who are using a nonvisual browser. These users won’t be able to view your image, so the entire imagemap will be lost on them if a text-based alternative is not supplied.

Additionally, not all Web robots can follow the links set up in a server-side imagemap. By providing a text-based set of links that replicate the links in the imagemap, you give the robots a way to better index your pages.

---

NOTE:  Text-based alternatives are less critical for client-side imagemaps because of the ALT attribute of the <AREA> tag. You are still free to include such alternatives, however, if you are willing to make the effort.

---

Most sites place their text-based alternatives to an imagemap just below the imagemap graphic. Usually the links are in a smaller font size and are separated by vertical bars or some such separator character (see Figure 4.3).

Imagemap Tools

Whether you are creating a server-side or client-side imagemap, it can be cumbersome determining and typing in all the coordinates of all the points needed to define hot regions. Luckily, programs are available to help you through this process. They enable you to load your imagemap image, trace out the hot regions right onscreen, and then write the appropriate map file or HTML file to implement the imagemap. The following sections describe two of these programs: Mapedit and Microsoft’s FrontPage.

Mapedit

Mapedit 2.31 is a shareware imagemap tool produced by Boutell.Com, Inc. This version of Mapedit supports client-side images and targeting of individual frames when you use an imagemap within a framed document.

FIGURE 4.3  Duplicating imagemap links with hypertext links makes it possible for users with text-only browsers to navigate your site.

Using Mapedit is easy. From the File menu, choose Open HTML Document to begin. In the dialog box that appears, you won’t see a choice between doing a server-side and a client-side imagemap. Rather, you first tell Mapedit which HTML file contains the image for which you’re building the imagemap. Next, tell Mapedit which file contains the imagemap image. When you click OK, the image file is loaded into the Mapedit window, and you’re ready to start defining hot regions.

You can choose Rectangle, Circle, or Polygon tools from the Mapedit Tools menu or from the toolbar just below the menus. Each tool enables you to trace out a hot region shaped like the name of the tool. To use the Rectangle tool, point your mouse to the upper-left corner of the rectangular hot region and click the left mouse button. Then move your mouse pointer to the lower-right corner of the region. As you do so, a black rectangular outline is dragged along with the pointer, eventually opening up to enclose your hot region (see Figure 4.4).

With the mouse pointer pointing at the lower-right corner, left-click the mouse again. When you do, you see a dialog box like the one shown in Figure 4.5. Type the URL associated with the hot region you are defining into the dialog box, along with any comments you want to include, and click OK. Mapedit puts this information into the file it is building and is then ready to define another hot region or to save the file and exit.

Mapedit’s Circle and Polygon tools work similarly. With the Circle tool, you place your mouse pointer at the center of the circular region (which is sometimes difficult to estimate!) and left-click. Then move the pointer to a point on the circle and left-click again to define the region and call up the dialog box. To use the Polygon tool, just left-click the vertices of the polygon in sequence. When you hit the last unique vertex (that is, the next vertex in the sequence is the first one you clicked), right-click instead to define the region and reveal the dialog box.

FIGURE 4.4  Mapedit’s hot region tracing tools are easy to use.

FIGURE 4.5  After your hot region is defined, Mapedit prompts you for the URL to associate with it.

	If you are unhappy with how your trace is coming out, just press the Esc key to erase your trace and start over.

Other Mapedit Tool menu options enable you to move an entire hot region (Move), add points (Add Points), or remove points (Remove Points) from a polygon and test the imagemap file as it currently stands. The Edit Default URL option, under the File menu, enables you to specify a default URL to go to if a user clicks somewhere other than a hot region. Mapedit’s test mode (choose Tools, Test+Edit) presents the imagemap graphic to you and enables you to click it. If you click a hot region, the URL dialog box opens and displays the URL associated with the region you clicked.

The most recent version of Mapedit for Windows 95 and Windows NT places a heavy emphasis on creating client-side imagemaps, but you can still use Mapedit to create server-side maps as well. Under the File menu, you’ll now find Import Old Server Map and Export Old Server Map options that read in or write out a map file, respectively.

	NOTE: Mapedit is available for all Windows platforms, Macintosh, and many kinds of UNIX. You can find Mapedit on the CD-ROM that comes with this book. After a 30-day evaluation period, you must license Mapedit at a cost of $25. Site licenses are also available. Educational and nonprofit users do not have to pay for a license, but should register their copies of Mapedit. For more information, visit http://www.boutell.com/.