Using Image Map Software (WebMapper)

  Run WebMapper

It will look like this:

Please notice the various areas:

1. Menu area where you can save your work, and draw 3 kinds of shape (rectangle, circle, or free-hand)
2. Image area – where your working image will appear
3. Behaviour area – where notes on how each shape behaves are displayed later

  Name your graphic file

You must also make up a name for your image map and give an URL for those areas not specified by your shapes.

  Draw the first shape

After clicking on the rectangle tool, draw a rectangle around the "Page1" area. This triggers an automatic dialog box shown below.

Fill this dialog box with the relevant information. Leave "What is the Target Frame…" blank unless you are using frames on your site.

 Map your first area

Notice that the area round "Page1" is now covered with a red lattice. This signifies a hot-spot for our image map. Details of how this "hot-spot" will behave are contained in the behaviour area.

  Map all other areas

Please note the following:

1. There are different shapes available to draw
2. Each shape drawn is signified by a red lattice
3. You can review or edit the hot-spots created

Note: Drawing a free-hand shape is easy. However, you must right-click to tell WebMapper that you are finished drawing your shape!

  Insert the Code

Click on the Globe Icon to bring up this dialog box. You can then cut the code, and paste it into your web page.

Warning: Remember to have your image map in the same folder as your web page.

  Preview your Image Map

OPen your web page in a broswer. Notice that the cursor changes to a hand when you are "hovering" over a hot-spot. Congratulations! Your image map is complete.