Professional Development Committee, Spring Technology Workshop
The Elements of Creating a Web PageHomePreviousNext



Whole site design

Page design

Color and Graphics

  • Formats
  • Browser safe color
  • File size
  • Using GIFs
  • Image maps




    Site map

  • Color and Graphics Image maps
    Image maps are text files containing information that allow <img> tags to talk to <a href> tags. This enables you to break a single image into multiple regions and target several URLs as links.

    Sample client-side image map

    Go to Go to Go to Go to Another sample image map, from HTML Goodies:

    Server-side image map
    Until recently, server-side image maps were the de facto standard on the Web. "Server-side" means that this type of image map requires software on the web server to work. Depending on the server to interpret each click and serve up the appropriate HTML file makes these image maps a little slower than client-side image maps.

    Client-side image map
    A client-side image map is an image map that is run by the browser rather than the web server. When your browser requests a page that contains a client-side image map, all the information needed to run that map comes down with the page.

    An advantage of client-side image maps is that they allow users to preview URLs before following a link. In server-side image maps, the status bar at the bottom of the browser displays only coordinate points when the user mouses over the image. But client-side image maps automatically display the target URL of the region the person's mousing over.

    Don't forget text-only browsers
    Only users with graphical browsers can display image maps. To enable Lynx users to access your page, provide a list of the image maps choices (links) as text links on the same page or on an alternative page that is accessible. For those with slow connections and those who turn off auto-display of images in their browser, text links are important alternatives.

    Cover your bases -- employ client- and server-side
    Below is a line of HTML linking to a server-side map.

    <a href="/cgi-bin/imagemap/"> <img src="my_image.gif" ismap width=160 height=140 border=0></a>

    To make this link look around for a client-side map, just add the usemap="#foo_map" modifier to its <img> tag.

    <a href="/cgi-bin/imagemap/"> <img src="my_image.gif" usemap="#my_image_map" width=160 height=140 border=0 ismap></a>

    In browsers that understand the usemap= modifier, the <img> tag will look for a map file before it lets the <a href> look for one. Other browsers, however, will ignore the usemap= modifier, read the ismap modifier, and go straight to the <a href>. It's important to place the ismap modifier last, so that compliant browsers will be sure to pick up usemap first.

    The one image per link approach
    Another option to support text-only access is to break up an image into smaller, individual graphic files -- each linking to a separate page. This is most useful with graphical navigation bars (like the ones at the top and bottom of this page). If each smaller graphic has descriptive text in an ALT element, the user will know which link to follow. This approach also eliminates the need for an image map. Just associate an <a href> tag with the <img> tag.

    Always provide an ALT element Provide a description for each link in an image map. Always.

    Links on image maps:

    Comments? Contact:
    Scott Britton, or
    Martin Hollick, or
    Julie Wetherill
    Copyright 1998, Harvard University. All rights reserved. Revised March 1998TopPreviousNext