The image map wizard is the third button on the Images tab menu:

Here's the window that will open :

Start by giving a name to your image map and place that name in the first field. For this example, I used the name of "menu".

Now you need to define the zones that will be activated in your image. These zones will be processed as an hyperlink when your visitor clicks on them.

Let's start with the simplest zone, the rectangle:

Click on the second button from the Preview part, , which is the button for shapes. Make sure you select the rectangle option from the little menu after you have clicked on the button. Then place your mouse cursor on the upper left corner of the rectangle and click your mouse. Hold the pressure and drag your mouse cursor to the opposite corner of the rectangle, then release. You'll then see a slashed-line frame around the green rectangle. You can move this frame around with your mouse, if needed. You have just defined a zone!

Now you have to define what will happen when your visitor clicks on that zone. Click on the third button, , to add the zone. Select the external link from the little menu, which will open the external link wizard. In our case, simply enter pagec.html in the top field and click OK. You'll see the new zone added in the Defined Areas section just above the preview. Your job is complete for that shape.

Now let's do the circle:

Begin by clicking the shapes button, , and then select the circle shape. Place your mouse cursor a bit off the circle, in the upper left corner. Click on your mouse and drag the cursor across the red circle to make a circle of about the same size. Click in the middle of the zone you just created to move it correctly just over the red circle.

Now click on the add button, , and chose the external link again. Enter pagea.html as the destination and click OK. You will see your second zone added in the list above.

And, finally, let's do the triangle:

To define the zone around the triangle, you need to use the polygon shape. In the cases of the rectangle and the circle, we started at a point A and dragged the mouse cursor to a point B to form the zone.

In the polygon case, the approach is totally different. This shape is used to define the outer limits of an irregular shape—not a circle or a rectangle. You then have to identify the different points between which will be drawn lines to form the shape. To complete the form, you need to click on the place where you have already defined a line.

For the triangle, you could click on the summit, then go to the bottom corners, and then return to the summit. You may find it easier to start in the middle of a side since it would be easier for you to identify where you have already defined a line, thus making it easier to complete your shape. For the destination, make another external link and use the page pageb.html.

Once you are done, here's what your image map wizard will look like:

Click on the OK button to insert the code in your HTML page, and the code will look something like this:

Then if you look at your Web page and move your mouse cursor over it, you'll notice that the cursor converts to a hand when it's over the shapes, telling you that these areas aren't just simple images but are hyperlinks. Of course, if you click on them, you'll be transferred to one of the three pages we defined.

Have any comments? Please give us your feedback.