Making a Clickable Image

Professor John M. McCann
Fuqua School of Business
Duke University

Last update: March 13 1996

This document describes how to use Lview in the development of a clickable image map. Refer to the Resources for Clickable Maps page for more information and to Clickable Maps and the Duke WWW Server for instructions on the development of the HTML page that contains the image map. This page, you one your are now, reading, should be used in conjunction with the "Clickable Maps and the Duke WWW Server" page.

To build a clickable image map, you have to make areas or regions of the map "hot" by specifying their coordinates. These hot areas are the clickable regions of the image map. We will illustrate the use of Lview in determining these regions.

First, you need an image in gif format. I used Powerpoint and the associated clip art library to get my image onto a Powerpoint slide. Then I used Lview's Capture command to grab that image and produce this image:

The first job is to identify the regions that you want to make clickable. I plan to have four clickable areas:

  1. The female fortune teller
  2. The male
  3. The blue area above their heads
  4. The crystal ball
I will use rectangles to specify the areas for the man and women, a polygon for the blue area, and a circle for the crystal ball.

Load the image into Lview and use the crosshair to select an area that encloses the woman, as shown below:
As you use the mouse to draw the red dashed box over a portion of the image, the coordinates of that box are shown at the top of the Lview screen. These coordinates will be displayed as long as you hold down the mouse button.
In this example, the coordinates are 15,48 : 50x133. These coordinates are the x:y coordinates of the upper left hand corner of the box and the x,y distances to the lower right hand corner. This coordinate system has its 0:0 point at the upper left corner of the image. So, the point 15:48 is 15 pixels from the left edge of the image, and 48 pixels from the top edge. The other two numbers indicate the location of the lower right corner in terms of pixels from the upper left corner. So, the lower right corner is 50 pixels to the right of the upper left corner and 133 pixels down from the upper left corner. The actual location of the lower right corner is 65,181.

Once you get the desired red box on the screen, write down the coordinates. Then repeat this process for all the other rectangular regions on the image. When I appied this process to the man in the image, I came up with a clickable area defined by 115,48 166,221

A circle would be a good way to make the ball clickable. In Lview, put the cursor on the center of the ball, hold down the mouse button, read the coordinates of the center of the ball, and write them down. This locates the center of the hot area; next you need to locate the outer edge of the circle, which you do by using the cursor to locate the coordinates of a point, any point, on the circle. I put the cursor on the top of the ball and read 88,85 in the Livew title bar.

The blue cloud at the top can be captured with a polygon; I used these three points as a crude approximation: 15,42 105,3 160,39.

Having determined the coordinates for the four clickable areas, I then used Notepad to prepare a .map file:

default /~mccann/f-defaul.htm
rect  /~mccann/f-woman.htm 15,48 65,181
rect /~mccann/f-man.htm 115,48 166,221
circle /~mccann/f-ball.htm 88,103 88,85
poly /~mccann/f-future.htm 15,42 105,3 160,39
This .map file (named must be transferred to your web site via FTP to reside alongside your .htm and .gif files.

You can now use this mapfile in conjunction with the corresponding .gif image file in one or more HTML documents, as I have done in the fortune.htm file. This document contains the following tag:

This is a tedious process, and people are working on tools that make it easier to construct a clickable map and the associated files. Programs such as mapedit are available to assist in the construction of clickable image maps.

A short tutorial on building a Client-side Image Map is available.