Create your own Image Map

Create Your Own Image Map

Here is a very simple and effective way to make your Image Map.
What's an Image Map you say? Well it's a very effective way of creating "Hot Spots" on an Image and using them to create links.

Each "Hot Spot" requires four coordinates, which are separated by commas, to create a link. The first two define the top left position of the "Hot Spot" and the second two define its bottom right position.

It is mandatory that the size of the image be known for the map to work properly. Take your image to The Professor's Image Sizer before attempting a map with one of your own images.

Please first read the instructions

Click the School House

Move the arrow to the top left of the left 4 pane window

Now click it and you will see the School House Image

Now look at the Status Bar and you will see
schoolhouse.gif?25,92

Write these Nos down as they are the 1st set of coordinates

Now tap your Back Button and click The School House again. You will have to tap the Back Button twice at the Test Bed

Move the arrow to the bottom right of the left 4 pane window

Now click it and you will see the School House Image

Now look at the Status Bar and you will see
schoolhouse.gif?41,108

Write these Nos down as they are the 2nd set of coordinates

Repeat the above 10 steps for each "Hot Spot" that you wish to create. The coordinates are then placed in this basic Image Map Code. This code is set for 3 "Hot Spots but can be easily adjusted by just increasing or decreasing the No of <area shapes. The usemap name and the map name must be the same.

Lets Do It

Just C & P this code and take it to the Prof's Test Bed by entering the door into School House. Replace the ? marks with the appropriate image values, enter the coordinates that you determine and watch your own Image Map develop right before your eyes.

Then C & P the finished code into your sig box or Web Page.

copyrite 2001 by The Professor