<!-- utterly simple mapping ©2001ank, see more at http://www.theoryofeight.com --><img src="yourimage.jpg" border="0" USEMAP="#yourimage"><MAP NAME="nameofthismap"> <AREA SHAPE="rect" COORDS="c1,c2,c3,c4" HREF="yourfile.html" Target="framename" alt="nameof link">

</MAP> <!-- end of mapping code -->

Note: To make a 'live' circle in your image map use this line in the code above:-

<AREA SHAPE="circle" COORDS="xx,yy,rr" HREF="yourfile.html" Target="framename" alt="nameof link">

in which xx is the horizontal coordinate of the center of the circle and yy is the vertical coordinate, and rr is the radius of the circle (in pixels).

You don't need a sophisticated graphics program at all. As far as I am concerned the simpler the better. I use the Paint program that comes with Windows because it loads all images into the top left hand corner of its window.

First, you have to make or obtain the graphics image that you want to use as a clickable map. Get it to look exactly how you want it to look (you can use a sophisticated program for this), then follow these steps.

1. Make a copy of the image in case you make mistakes. Always make a fresh copy before you start work.

2. Load your image into Paint (or whatever you are using).

3. Click on the graphics tool for drawing boxes (usually indicated by a box in solid lines on your tool bar). At the bottom of the window you will see a pair of numbers that changes rapidly as you move the cursor around the screen. These numbers are the co-ordinates of the cursor. Top left hand corner is 0,0. The right hand number of this pair increases as you go down the screen, and the left hand number increases as you go along the screen to the right.

3. Draw the first box to enclose the area of the map you wish to make 'live'. This box is only temporary so DON'T save the image while you have a box drawn on it. You can use the 'select area' tool (box in dotted lines) if you are worried about leaving boxes drawn all over your image, but you lose the exact coordinates when the area is selected, and anyway, you don't want to overlap previously selected areas. Drawing boxes allows you to see exactly what the area you've selected looks like in relation to the other areas. Besides, you have made a clean copy of the image, haven't you?

4. Place your cursor at the top left hand corner of the box and note down the pair of cordinates (we'll call these c1,c2). Then place your cursor at the bottom right hand corner of the box and note down these coordinates (we'll call these c3,c4). These four numbers define the area of the box. If you want to get rid of this box, click on EDIT and UNDO to remove it. If you draw more boxes, don't let them overlap.

5. Take a look at the html code opposite. To turn this into your 'live' image, copy and paste the code into the html of your web page where you want it to be and then edit it as follows:

1. Replace yourimage.jpg with the name and extension of your image file (it doesn't have to be a jpg image, but it shouldn't be a bmp image). Replace #yourimage with the same image file name without the extension (keep the #). Give the MAP NAME a name. If you want a border to your image then delete the border="0" or give your border a number to indicate the size of border you want. If you want to resize the image then insert the tags width="X" height="Y" before the border="0" tag.

2. Replace c1,c2,c3,c4 with your actual numbers

3. Replace yourfile.html with the name of the file you want to link to.

4. The Target tag is optional. If you have a frame in which you want your html file to appear in, then put its name here. Otherwise delete it.

5. Change nameoflink to the name you want to appear when the mouse hovers over the live area on the map. If you don't want a name to appear when you place the cursor over the area, delete the alt="...." from the line.

6. If you want to make another area 'live' then copy the whole <AREA SHAPE....> line and paste below it, then follow the steps above. You can have as many 'live' areas as you want.

6. When you upload the page, don't forget to upload the image into the same directory. You can place the image in another directory but then you will have to change the name of your image to include the directory path.

Warning:

Some html editors, and especially Frontpage Express, like to rearrange html code to their convenience. If you open the web page with one of these editors and then save it, you will find this code is re-written. Frontpage Express 2.0 does not recognise frames so it deletes all your TARGET tag information. You will have to put this in again by hand. (Open web page in your browser, click on SOURCE and edit the code).

All rights to text and designs©1999-2001ANK