Manual Clickable Image Maps

Last Modified: 10/25/00

Here is a German translation translated by Baccarat

And here is a Russian translation translated by Babur Muradov

Obtain the image: you can get GIF or JPEG images from archives, create them for yourself, or convert other formats into GIF or JPEG format, and then store them in your public_html directory. For this example we will use the following GIF image named mymap.gif:

You can acquire this from my anonymous FTP archive:
ftp://ftp.u.washington.edu/pub/user-supported/larryg

Create lists of coordinates: most paint or display packages show you the coordinates of any point in the image. For example,

Microsoft "Paint" displays the X,Y coordinates of your current mouse position in the middle of the status line at the bottom of the display
PhotoShop shows you the pixel coordinates of your mouse position provided that
- you activate the INFO display by clicking on WINDOW, then PALETTES, then SHOW INFO
- you activate the PALETTE OPTIONS in the INFO display (click on the black triangle near the right top) and select the PIXELS option for mouse coordinates.
The Unix program xv displays the mouse coordinates if you press mouse button 2

Note that pixel values always start at "0,0" in the upper left corner and get larger as you move down and to the right. The coordinates may define polygons or rectangles (or other shapes that we won't deal with here). For example, the coordinates for a polygon region might be defined as follows:

     ...SHAPE="POLY" COORDS="32,36 32,188 65,136 133,124 82,36 ...

Create the HTML for the map: the syntax for a clickable map is:

{some HTML code here}
<MAP NAME = "name">
  <AREA SHAPE="shape" COORDS="x,y ..." HREF="link-for-this-region">
  ...
  <AREA SHAPE="shape" COORDS="x,y ..." HREF="link-for-this-region">
  <AREA SHAPE="DEFAULT"                HREF="link-for-default">
</MAP>
<IMG SRC="location-of-image" USEMAP="#name">
{some HTML code here}

where you supply the values that appear in lower case. The "shapes" can be RECT, CIRCLE, POLY, or DEFAULT.

In the following example, an image contains two regions: a left yellow polygon, and a right green polygon. The HTML links for the left and right regions are named lf.html, rt.html and are stored in a sub-directory named Image in my public_html directory, and are activated when I click on those regions. The GIF image itself is named mymap.gif and is stored in the same sub-directory. Here is the HTML code for that map:

 
<MAP NAME = "shapes">
  <AREA SHAPE="POLY" COORDS= 
      "32,36 32,188 93,188 65,136 133,124 82,36" HREF="Image/lf.html">
  <AREA SHAPE="POLY" COORDS=
      "93,188 245,188 244,36 82,36 133,124 65,136" HREF="Image/rt.html">
</MAP>
<IMG SRC="Image/mymap.gif" USEMAP="#shapes">

And here is the actual map which you can click on: