|
As I said earlier, you don't have to use a rectangle to create the linkable area in an Image Map, you can also use circles and free polygons. With a polygon there is a lot more to think about, but with circles the theory is very similar to using rectangles, in fact I think it is easier.
Circles:
You start of with an image like the one below, move your cursor over the image and you will see (a) for convenience, the hyperlinks are aimed at this page, but that doesn't matter at this stage, and (b) if you pause over each hyperlink the 'Alt=...' is different so you can see the area of the link better.
So far we have an HTML of:
<img src="images/tplogo.gif" width="175" height="35" alt="" border="0" align="absmiddle">
Then we add the map name as we did with a rectangle:
<img src="images/tplogo.gif" width="175" height="35" alt="" border="0" align="absmiddle" usemap="#logo">
In this instance I have called the map '#logo'. The entire coding looks like this:
<MAP NAME="logo">
<AREA SHAPE=CIRCLE COORDS="16,17,17" HREF="imagemaps2.html" ALT="Area One">
<AREA SHAPE=CIRCLE COORDS="55,17,17" HREF="imagemaps2.html" ALT="Area Two">
<AREA SHAPE=CIRCLE COORDS="95,17,17" HREF="imagemaps2.html" ALT="Area Three">
<AREA SHAPE=CIRCLE COORDS="135,17,17" HREF="imagemaps2.html" ALT="Area Four">
</MAP>
The area shape is now 'CIRCLE' instead of 'RECT', and you may also have noticed that there are only 3 co-ordinates instead of 4.
The first set of co-ordinates on the top line (16,17,17) reflect the area of the first circle (obviously!). In this instance the circle is 16 pixels in from the left, 17 pixels from the top, and finally the circle is 17 pixels wide. That was easy!
The second circle is 55 pixels in from the left, 17 pixels down from the top and 17 pixels wide. I expect you are beginning to see a pattern forming here!
Circle three is 95 pixels from the left-hand edge, 17 pixels from the top edge and again 17 pixels wide.
Circle four is 135 pixels from the left-hand edge, 17 down and the circle is 17 pixels wide.
I have produced the logo again so you don't have to keep running up and down the page!
Remember, these measurements are to the centre of the circle! If you click and hold the left mouse button on the image links you will again see the 'dotted lines' around the links, and you can get a better idea of where they are.
Naturally, you would probably use circles when the image is basically circular in style, but there are no hard and fast rules to using an Image Map!
So what happens when the image is neither circular nor rectangular, or its a map of a country which has odd shapes inside it? Click here to find out!
[1] [2] [3] [4]
Top
<<< Previous page
| 
