Client-side Image Mapping:

An image map is a set of locations within a GIF or JPEG image.
These locations are a map on the surface of the image.
The map can define active clickable areas which link to URLs.
These clickable areas can be rectangles, circles and irregular polygons.

The JPEG image above could use some rectangular maps to link to Areas A thru D, a circle could link from the alien's head, and a polgon could link from the alien's body. The active shapes have been drawn on a temporary Photoshop layer in the example below. It is only a guide for selecting the map coordinates.

The coordinates for the active areas are given in pixels. The upper left corner of the image is the zero point; the x-axis is 0 and the y-axis is 0 and any position on the image has an x and y value.

Be sure you have the ruler units set to read in pixels. This is set in the Preferences for Units and Rulers. The x and y positions of the cursor appear in the Info Window as shown below.

Mapped active layers are Rectangles, Circles, or Polygons. Rectangles are defined by the upper right and lower left corners. Circles use the center and the radius. Polygons use a connect-the-dots string of all the vertices. Below is the HTML for this map.

<map name="AlienAreas">
<area shape="rect" coords="14,45,202,94" href="areaA.htm">
<area shape="circle" coords="396,62,48" href="headfull.htm">
<area shape="poly" coords="361,152,397,150,434,210,425,261,303,253" href="bellyfull.htm">
<area shape="rect" coords="14,98,202,146" href="areaB.htm">
<area shape="rect" coords="13,153,201,200" href="areaC.htm">
<area shape="rect" coords="14,206,202,251" href="areaD.htm">
</map>

With the map built, all that remains is to apply it to an image. This is done in the tag for the image, shown below.

<img src="original.jpg" width="550" height="320" usemap="#AlienAreas" border="0">

Include these items in your HTML file and you are done.