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.
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.
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.