Introduction
Overview
History
Advice
IDE
Books
Tutorials

Beginners
Introduction
Text Formatting
Images
Tables
Forms
Entities/Colors

Advanced
Frames
Image Maps
Stylesheets
Reference

Community
Web Sites
Mailing Lists
USENET
Vendors
News

GBIC >> HTML >> Image Maps

Image Maps
HTML supports the anchor tag, which allows a web page designer to treat a word or phrase as a link to another web page. Just click on the anchor (link) and the browser will take you to the new URL. There are many occasions where it is useful to be able to click on a graphic, such as a map of the USA, and to go to a particular page based on where you clicked. For example, going to the population statistics of the state you clicked on. This approach can be much more intuitive for a web site visitor than looking through a list of state names and clicking on the state of choice.

HTML supports this capability through the use of an attribute of the <img> tag coupled with a <map> tag. Inside the image tag is a list of coordinates which correspond to positions on the image. The browser uses the information in the image map to identify the URL to which it should transfer when the image is clicked.

Basic Image Map Tools

Return to top of document

Basic Image Map

To create a clickable image you must first create an image map (using the <map> tag), which is a listing of the coordinates on an image that correspond to the URLs you want the browser to transfer to when the image is clicked. Here's a sample <map> tag filled with information for an image that is 80x80 in size:

   <map name="testmap">
      <area shape="rect" coords="0,0,  40,40"  href="index.htm">
      <area shape="rect" coords="40,0, 80,40"  href="htm-over.htm">
      <area shape="rect" coords="0,40, 80,80"  href="htm-adv.htm">
   </map>

This image map must then be assigned to an <img> tag using the usemap attribute as follows:

   <img src="../images/imagemap.gif" usemap="#testmap">

Here's a repeat of the code and resulting clickable image:

Code Resulting Clickable Image

<img> src="../images/imagemap.gif" usemap="#testmap"> <map name="testmap"> <area shape="rect" coords=" 0, 0,40,40" href="index.htm"> <area shape="rect" coords="40, 0,80,40" href="htm-over.htm"> <area shape="rect" coords=" 0,40,80,80" href="htm-adv.htm"> </map>

In this example the image map is divided into three rectangular areas, bounded by the coordinates listed in the image map. For each rectangular area a URL is defined to which the browser will transfer if that area of the image is clicked.

When moving the mouse over the image the status bar of the browser will change to reflect the URL that will be used if the image is clicked.

An image map supports three different shape types - a rectangle, a circle, and a polyline area. In the above example, rectangles were used. The exact format of the coordinates will vary depending on the shape that is used. For rectangular shapes, the coordinates must reflect opposite corners of the rectangular area (upper-left/lower-right or upper-right/lower-left).

The approach to an image map that we've just discussed is called a client-side image map, where the image map is included in the web page and the browser handles the transfer to a new URL when the image is clicked.

Another approach that is not used all that much these days is called server-side image maps, where the browser sends only the coordinates of the point on the image that was clicked. The server then runs a CGI program that translates the coordinates into a URL that is returned to the browser. Client-side image maps are favored because they take processing load off the server and put it onto the client machine.

Return to top of document

Tools

I use a small number of image maps at this site and have generated them all by hand. I call up the image I'm using in my image editor (Paint Shop Pro) and use the rubber-band selector to draw a selection border around the clickable areas. Like Paint Shop Pro, most image editors will display the coordinates of the selected area. I simply copy those down into the image map and repeat for each clickable area of interest.

Even so, it's still a manual process that I don't particularly enjoy. If I were doing new image maps on a regular basis I would plan to use one of the many tools on the market that will create image maps in a more automated fashion. You'll at least have to type in the URL associated with a clickable area, but pretty much all the rest can be done by these applications.

Almost all of the major HTML Editors come with built-in image map creation capabilities. Even top end image or popular editors such as PhotoShop and Paint Shop Pro include such capabilities.

If you have need of a stand alone tool, check out MapEdit for a $10 shareware program that's been around a long time and will satisfy most web page designers needs for generating image maps.