Client-side Image Maps
Step 3 - Determine coordintes surrounding "hot spots"
Part of the definition of an image map requires certain coordinates that
describe the area to become a hot spot. Netscape supports three kinds
of areas that can be hots spots: rectangles, circles, and polygons.
Each shape requires a different number of points or information. The
following tables shows the list of points needed to define each shape.
| Shape | Points |
|---|
| Rectangle | Left, top, right, bottom |
| Circle | Center x, center y, radius |
| Polygon | Point1 (x,y), Point 2 (x,y)... |
We are going to make the three objects in the image below hot spots. The
image shows which points we should define to make the box, circle, and
triangle "hot".
If you're wondering, we will treat the triangle as a polygon.
Now that you know which points you will need to define the hot spots,
you need to know how to find the exact coordinates. There is a trick
you can do with Netscape that let's you obtain these coordinates.
Here's how you do it:
- Inside your HTML file ("imagemap.html"), between the <BODY> and
</BODY> flags, enter the following lines
<A HREF="">
<IMG SRC="sample.gif" ISMAP>
</A>
This will temporarily make Netscape think this image is a
server-side image map. The ISMAP is responsible for this.
Click here to see how
your document should look at this point.
- Now when you load up the "imagemap.html" page with Netscape,
you'll see a page with just the image on it.
- Now move the cursor over the image. If you look at the
bottom of the Netscape window, you will see the path to your file
along with a question mark and two numbers that change as you move
the cursor. These numbers represent the coordinates of the cursor
location.
The image on this page has already been set-up this way. Move
your cursor over the image to see an example of this
- Move the cursor to each of the red circled spots on the above
image and write down the coordinates. Refer to the table above to
see exactly which points are needed.
- To find the radius of the circle, first find the center of
it, note this coordinate, then move the cursor horizontally to
the edge of the circle. The difference between the first
number for each point is the radius
- To define the triangle, you will need just the three corner
points. The order of the points does not matter unless you were
dealing with something with more than three points. Basically,
Netscape will do a connect the dots to define the polygon.
- Lastly, you need to clean up your HTML file for using later.
Remove the lines before and after the <IMG...> line. Now,
delete the word "ISMAP" from the IMG tag.
Click here to see how your document
should look after cleaning up.
Make sure to hold onto those coordinates. You will need them for the
next step.
http://www.cgocable.net/~cassidyb/cis500/session9/tutorial/coords.html
Bill Cassidy, November 4, 1998