All about Image Maps

In this section, we assume you already know the “click here to go here and click there to go there” dynamic of the World Wide Web. You probably also know that you can turn a graphic into a hyperlink just as easily as you can turn a string of text into one.

Image maps bring another dimension to that dynamic. An image map is a graphic coupled with HTML instructions that describe how it should behave when clicked. Essentially, image maps have multiple hotspots, so that clicks on different places produce different results.

At its core, the graphic for an image map is no different from any other exported graphic (so we refer you to the previous strategies for good output). It’s the integration of the hotspot instructions that turns it into a more interesting creature.

	WARNING Image maps are not unanimously acclaimed in the Internet community. They are usually robust graphics with significant download times, and sites that neglect to provide a text-based alternative anger those who choose to navigate without graphics. If you are considering their use, avoid unnecessary file bloat as much as you can, and make sure to provide a text-based alternative.

One of our favorite image maps is devoted to Beatles trivia, and it is shown in Figure 22.2 (with the correct URL for fans who want to visit it). Each of the song titles, and the other parts of the label, represents a topic of discussion or interest, and clicking on any one of them takes you there.

FIGURE 22.2  This image map offers lots of fun clicks for Beatles enthusiasts.

This graphic is about 35KB, and that’s not chump change in Web currency, but it’s bytes well-spent, because it’s clever, effective, and provides excellent navigation.

Building an Image Map in DRAW

Again, an image map is a graphic with a set of instructions. It’s not magic or voodoo, and we nonprogramming mortals can look under the hood on this one and understand what’s going on. Keep the following key points in mind when creating an image map:

•  Make sure the graphic lends itself to an image map. In other words, make sure that the areas representing links to other places are graphically distinct. Many image maps include words that spell out the hotspots, and that is preferred over a vague graphic that would confuse your visitors.

•  Know the exact URL address of each hyperlink, whether it is another Web page on your own site or one somewhere out on the Internet.

Figure 22.3 shows the graphic elements for a simple image map that a high school might create for its students. The cork board is one rectangle inside of a rounded rectangle, filled with a texture pattern called Oatmeal (we changed the color from that lumpy white to a corky yellow). The notices are just two more stacked rectangles, the one in back filled black and the one in front skewed ever so slightly. The thumbtack came from Corel’s clipart library. Finally, the text is Corel’s Technical.

FIGURE 22.3  This is a good candidate for an image map because it is obvious where to click and what happens when you do.

In the following exercise through the creation of this image map, we have fabricated the URLs; if you want the hotspots to function, substitute ours with real ones. Here goes:

1.  Select the elements of each notice—in this case, the white rectangle, the black rectangle, and the thumbtack—and group them. This is not required, just recommended.

2.  Go to Window Ø Toolbars and check Internet Objects. At your option, either float this toolbar or dock it.

3.  Select one of the notices and place your cursor in the Internet Address field of the toolbar (the far-left drop-down list).

4.  Type a URL as we have done here.

5.  Press Enter to attach the URL to the selected object(s).

The next drop-down list is for creating a hyperlink to an element or page within your drawing—that is not relevant here. But the next five options are useful, and one of them is crucial. Here are descriptions of those options.

Show Hotspots

By clicking this, DRAW highlights the areas that have been defined so you can easily see them on screen, without having to laboriously select each object and consult the Internet Address window.

Use Object Shape to Define Hotspot

Conceivably, you might create an image map with very precise graphics for hotspots and you might want the object shape itself—and not the rectangular area it sits in—to be the hotspot. Most of the time, however, we recommend against this option (too bad it’s the default). If the object shape is unusual, DRAW will have to plot the entire shape, spinning out dozens of kilobytes of HTML code. This is classic file bloat.

Use Bounding Box to Define Hotspot

Choosing this option instead of Object Shape makes DRAW’s job much easier, and the jobs of those who visit your page. All DRAW has to do now is define a simple rectangle for each hotspot, which it can do in about six words of HTML. Only an extraordinarily shaped graphic would truly need more than a rectangle to have its hotspot defined, and most of the time your visitors will appreciate being able to click a bit more lazily.

With our high school corkboard, using the object shapes as hotspots resulted in an 18KB HTML file. Using the bounding box brought that number all the way down to 4KB.

Foreground and Background Colors of Hotspot

Only relevant if Show Hotspots is clicked, this determines how the hotspot appears. Choosing a background color seems only to blanket the entire hotspot with a solid color; choosing a foreground color makes more sense, as we have done here.

Select each notice on the bulletin board and enter a URL for it. We used http://www.rhs.com/ for the main address and sports, seniors, government, and yearbook to complete the URL for each of these four links. You can use any URLs you want to, including corel.com, altman.com, sybex.com, or your own Web site.