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:
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:
This .map file (named fortune.map) must be transferred to your web site via FTP to reside alongside your .htm and .gif files.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
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.