Cube

Creating an Image Map is easy. All you need is a picture, a program that can determine coordinates (such as Paint Shop Pro) and a couple URL's to link the map to.
First you must determine which areas are linked.
- To do this, you must open your image in Paint Shop Pro.
- Use the Selection option (on the left side tool bar) and outline the area you want linked. Do not let go!!!! Letting go will make the coordinates disappear.
- Look in the bottom left corner and it will have the top left corner Coordinate and the bottom right corner Coordinate. You need both of these for your Image Map so write them down somewhere.
- Repeat this step with every spot you want linked.
Now open your HTML document. In the image tag add: usemap="#mapname" then go down to the map tag and add a name="mapname" attribute. The opening Map tag should look like this: <map name="mapname">
We define the different areas and links with <Area> tags. Then you need to tell the computer what shape you used (shape=rect), in this we have just used rectangles (you can also use circles and polygons but to coordinates are different and a bit confusing) then the coordinates come next (coords="0,0,50,90") then the link (href="http://somewhere.com"). Your <area> tag should end up looking like this:
<area shape=rect coords="0,0,50,90" href="http://somewhere.com">
Do this for every area and you have yourself a nice image map and don't forget to close the map tag; </map>

Back to Main Page