Image Maps

An image map usually consists of a MAP element, which contains one or more AREA elements.

The intention of an image map is to provide an easy way of linking various parts of an image without dividing the image into separate image files, they can also be used to create links which are non-rectangualar.

Creating an image map

The first thing to do is to insert an image, this is explained in the Image section of this manual. Maps can only work with IMG elements, not DIVs with background images.

We now need to set the usemap attribute of the IMG element using the Inspector.

Ensure your name starts with a '#' character. In this case, let's call it '#mymap'.

We now need to create a MAP element. It doesn't matter where we create it on the page, IMG elements do not permit child elements, so although it may seem logical to put the MAP element inside the image, we cannot. For this example, you can insert the element into the body element.

Once you have created the MAP element, we need to set the name of the MAP to 'mymap' (no '#' prefix this time.)

We have now created the MAP element, but by itself, it won't do anything, we need to create a AREA within it. To do this, select the MAP element, and choose a shape from the 'Area' submenu of the 'Misc' menu.

Once the circle has been created, you can move it by dragging the AREA tag, and resize it by dragging the handle at the bottom of the circle.

Rects works in a similar way to circles.

Editing Polygon Areas

Circles and Rectangles are, by nature, easy to edit, polygons can be a bit more complicated.

There are two types of handles on polygon areas, the resize ones, which are solid, and the 'add' ones which are white, and have a '+' in them.

The solid ones can be dragged to reshape the polygon, and they can also be doubled clicked, which gives you the option to remove that point of the polygon.

The '+' handles are simply clicked, to add a new point to the polygon.

By adding and manipulating the points, it's easy to create very advanced polygons with no knowledge of coding.