Images: Coordinates

Finding the coordinates with a paint program such as Photoshop, Paint, Gimp, Paintbrush (Mac)

Rectangle shapes ("rect") uses four coordinates:

1. the horizontal position of the top-left corner
2. the vertical position (from the top of the image) of the top-left corner
3. the horizontal position of the bottom-right corner
4. and the vertical position of the bottom-right corner

Circle shapes ("circle") uses three coordinates:

1. the horizontal position of the centre
2. the vertical position of the centre
3. the radius of the circle (straight line from center to circle's perimeter)

Polygon shapes (poly) uses as many pairs of coordinates needed to a polygon. This can be any shape and can have sloping lines, like the triangle (which uses 3 coordinates). All coordinates are specified as horizontal position then vertical position, with all of them in a long list, separated by commas. The last pair of coordinates should match the first -- or the browser will calculate it for you!

There are free online "image-map generators" which can write the mapping code for your image, which you can just copy into your HTML document. But understanding how to do it yourself is a good thing to learn.