Creating Image Maps

Brought to you by Inside Microsoft FrontPage, a ZD Journals publication. Click here for a free issue .

Microsoft FrontPage 98 gives you several ways to create navigation systems between pages. You can create text or image hyperlinks, or you can insert a navigation bar and let FrontPage create navigation buttons.

One of the most versatile methods, however, is to create an image map, which is a single image that links to multiple URLs. Image maps give you more design flexibility than single-image hyperlinks, and they're almost as easy to create, thanks to FrontPage. (By contrast, creating image maps in straight HTML is a real chore.)

In this article, we'll show you how to create image maps in FrontPage. First, we'll look at a few basics about creating the image itself.

Image tips

To the user, an image map is a single image (or a group of images) with a number of hotspots, or clickable areas. When the mouse hovers over one of these hotspots, the cursor turns into a hand and the target URL appears in the status bar. Clicking on the hotspot opens the target page.

When you're designing an image to use in your image map, be sure that the hotspots are easy to identify. Otherwise, the user may never figure out where to click. (You should also include explicit instructions so the user knows the image is clickable.) Similarly, it's important that you make the hotspots large enough so they are easy to click.

Designing your image

Now, let's look at two different ways to design your image. First, Figure A shows the Web's most popular page, Yahoo.com. The icons across the top -- as well as the Yahoo! logo -- are actually a single image. However, Yahoo!'s use of white space between the icons, which blends in with the page background, make the icons look separate. (The designers at Yahoo! could have created separate image files, but that would have required placing the images in a table to line them up properly.)

Figure A. Yahoo! uses white space to make a single image map look like several images

Southwest Airlines, meanwhile, makes the hotspots on its home page a little less obvious, as Figure B shows. In fact, the hotspots are almost hidden, which can add a sense of fun to the page. Notice, however, that Southwest uses several ticklers (like the "Try Me!" arrow) to make sure users find the hotspots. The page also includes text hyperlinks for those who still don't get the point.

Figure B. Southwest Airlines' Web site also uses an image map, but the hotspots are "hidden" in the image

Either technique will work as long as the hotspots are easy to understand -- and as long as an alternate navigation system is available. Now, let's look at how to implement image maps in FrontPage.