Yale C/AIM Web Style Guide

Contents

Web Graphics

Introduction

Color display primer

Graphic file formats

Interlaced GIF

Transparent GIF

JPEG graphics

Summary-File formats

Illustrations

Optimizing graphics I

Optimizing graphics II

Height & width tags

Colored backgrounds

Imagemaps

Imagemaps offer a means to define multiple "live" link areas within a single graphic on a Web page. Thus you can make a banner graphic for the top of your page, and imbed multiple "button" areas within the graphic. The header and footer graphics used in this style guide are simple imagemaps. This is how the header graphic would look if you could see the "live" areas defined in the imagemap:
Diagram of page header imagemap and links.

Server-side imagemaps vs client-side imagemaps
Until recently Web imagemaps had a reputation for being complex to implement and slow to execute, because the original procedure for creating imagemaps on Web pages required reference to a separate file on the host Web server every time a user clicked on an imagemap. This "server-side" imagemap technology was needlessly complex and very inefficient. Since early 1996 the major Web browsers have supported "client-side" imagemaps, where the information on what areas of a graphic are "live" links is incorporated within the HTML code for the Web page, where it belongs. Most Web page layout programs now incorporate easy graphic interfaces for setting up imagemaps, so we will not cover the HTML technical details here. (See the reference links below for more information on the technical details of creating web imagemaps, or look at the HTML source of any page in this style guide.)

Space-efficient graphic impact
Imagemaps have become a standard feature of most professionally-designed Web sites because they offer an effective combination of visual appeal and, when used properly, space-efficient functionality. Imagemaps are particularly effective when incorporated into moderately-sized "splash" graphics at the top of home pages, or into the "signature" graphics or logos that define your pages. For example, Apple Computer uses an imagemap at the top of their education page that offers 12 different link choices within a distinctive graphic that instantly marks the page as part of Apple's Web site:

Apple Higher Education home page imagemap example.

Graphic has been reduced from the original size.   hed.info.apple.com/

Graphic flexibility
Imagemaps are the only means to incorporate multiple links into a graphic illustration, such as this anatomic example:

Diagram of anatomic artwork as an imagemap.


Imagemaps are also the ultimate means to overcome the vertical, list-oriented, graphically inflexible norms of conventional Web pages built with standard HTML tags. With imagemaps you can simply abandon HTML page layout, and build links into large graphics, just as you might in CD-ROM authoring programs. This example incorporates very large graphics, and is not suitable for users accessing this guide via modem. In the example the whole page is defined with a JPEG imagemap, placed over another small JPEG used as a background pattern. Designs like these are only suitable for audiences with high bandwidth access to the Web or the local intranet, but this kind of graphic flexibility offers a glimpse at the future of Web page design.

References

Apple Computer, Inc. - Higher Education site

Copyright 1997 P. Lynch and S. Horton,
   all rights reserved. Yale University   Revised January 1997.