Images are rather large so please click the links provided to get the full advantage to this tutorial!

With image maps the possibilities are endless as long as you're willing to find all of the coordinates for the particular shape you desire. The different shapes possible are:

• Squares
• Circles
• Polygons

Example Code

Open Notepad and paste the following code. You can erase the coordinates I've provided as an example and fill them in with your own that you can find using the methods I've described below.

Finding the Coordinates

Note: The first coordinate is on the x-axis which runs from left to right. The second coordinate is on the y-axis which runs up and down.

To find the coordinates, open the image you've chosen for your image map into an image editor (preferably Paint, as it's the easiest and what my examples will be using). You might want to make a rough outline for all of the shapes you plan on using over your image so it's easier to determine exactly where the coordinates lie without them overlapping. If you're using the example image, just follow the steps below for each shape.

Note: Here is a sample as to where to find coordinates for Photoshop
For anyone who doesn't have the "Info" tab available, its available under "Window" at the top bar. This was in CS2, so, I assume that previous versions are similar.

In order to get the coordinates please look at the arrows in the example pictures for the Square, as it identifies where the coordinates are displayed in Paint. You can use the pencil or any form of a pointer tool to obtain the coordinates. I suggest using the magnifier to make the image larger in order to get a more precise point.

Squares/Rectangles
In order do this properly you must start art the Top-Left Corner to get the first coordinates. These will be your first set of numbers and should be placed directly following the URL in your iMap code, as show in the example. Next you'll need to put your cursor over the Bottom-Right Corner of the square/rectangle to get the last pair of coordinates for the script. With these two numbers you have covered the surface area within the rectangle's outline. This will make the whole 'fenced' off area a link to whatever a specific URL you inserted into the rectangle's code.

Circles
If your target for your link is a circle, you will need to create a square that the circle is 'eclipsing' over in order to cover the area. So treat it like a rectangle and follow the instructions above, but be sure that you use "circle" in the actual code.

Polygons
A polygon is anything with multiple sides that requires more then your traditional "xx,xx xx,xx" coordinate that the square/circle use. Polygons are actually really simple to work with, unlike circles since they are more precise. You basically start in the top or top-left corner and work your way around clock-wise until you've recorded all of the coordinates to cover the area you plan on linking with a URL.

Instead of making this a novel, I've made a picture for an example of how to get the coordinates for a polygon. I used different colored squares to mark each point (the black spot in the middle of each colored square is the actual coordinate). Following the arrows, as well as the color guide next to the example link, will take you clockwise around the shape to get you the complete coordinates required for code to work successfully.

Example of the order for polygons: blue, red, green, yellow, pink, maroon, brown