Two Minute Image Map

You can make an image map very quickly by following the steps below. This protocol assumes you have access to a web servable image, and a text editor for the html page you want to make the image map for.

What you need:

a gif or jpg image.
an idea/plan of what geometric shapes you want to divide your image into.
a list of URLs that you want each geometric shape to map to.
a web browser to use the imagemapper and see the result.
a text editor to edit the page you want to put the image map into.
The method below is for client side image maps (the html page will hold all the information for your map).

What to do:

Open your HTML page in your favorite HTML editor.
Select the html stuff below, copy it, paste it into your HTML page.
Edit the HTML for the client side image map by adding your own values.
- Place the web address (URL) for your image in the img src tag.
- replace the sample rectangle HTML stuff with your own shapes and URLS to point to in each <area> tag. Add or delete tags as you see fit.
- Now you simply need to fill in the coordinates for all your shapes from the image. This is the next step.
Place the URL for your image into this box:
Get ready to click on the places that define the coordinates of the shapes in your image. (i.e. to define a rectangle click on the upper left corner, note the result, then click on the lower right corner, and note the result.).
Push this button. You'll get a page with your image in it. Clicking on your image will show you the location (x,y) of your mouse clicks.
Place the values returned from your mouse clicks into the coordinate locations of the <area> tags.
Save the results, and test your imagemap.
Congratulations! You're done.

Client Side Image Map HTML Template (copy the text below and paste it into your html page, then customize it):

<!-- You can put comments within brackets like this -->
<img src="http://www.yourserver.com/yourdirectory_or_whatever/yourimage.gif" border=0 usemap="#mymap">

<!-- add or delete the elements below with your own shapes (i.e. rectangles, circles, etc.) -->
<!-- replace the coordinates and URLs below with your own values -->
<map name="mymap">
<!-- sample rectangle1 -->
<area shape=rect coords="73,103,131,145" href="http://www.whatever_you_want.com/to_point/to1.html">
<!-- sample rectangle2 -->
<area shape=rect coords="35,170,94,211" href="http://www.whatever_you_want.com/to_point/to2.html">
<!-- sample rectangle3 -->
<area shape=rect coords="109,171,168,212" href="http://www.whatever_you_want.com/to_point/to3.html">
<!-- everywhere else -->
<area shape=default href="http://www.whatever_you_want.com/to_point/default.html">
</map>