PSP Tutorial

The first thing to do is either choose or create a graphic, and decide what areas are going to correspond to your links. Open your image in PSP, and now it's time to recall your geometry! Put your cursor over the position you will want to start. In the lower left corner of PSP you will see the coordinate values (x,y). This is your first value. Now continue to create your selections and record your coordinate values. After you define the coordinates in your image you can set it up as a link with the HTML code.

Your shapes can be:
rectangles (4 coordinates)
circles (3 coordinates)
points (2 coordinates)
and polygons (or multi-sided shapes)(2 coordinates for each point).

Now for the HTML coding:

First you name your image map to reference for the USEMAP command.
<MAP NAME="what-ever-the-name-of-your-map-is">

Then you establish the shape, add your link, then fill in the coordinates.
<AREA SHAPE="RECT" HREF="yourlink.html" COORDS="10,30,78,90">

Now you must point to the map (make sure you put a # in front of your USEMAP name).
<IMG USEMAP="#what-ever-the-name-of-your-map-is" SRC="your.gif" BORDER=0 WIDTH=100 HEIGHT=100>

This tag just tells the browser that that any part of the image that is not defined with coordinates and a link - will not have a link.
<AREA SHAPE="default" NOHREF>

Don't forget the closing tag </MAP>

Here is our shapes as an image map. Move your mouse cursor over the images and watch in the lower left hand corner of your browser to see the path to the URL (these links here do not go anywhere, they actually are not even real pages). Right click on this page to view the source and see the entire code of this image map. You will need to scroll down to the end to see it.

Image Maps The Easy Way