ACOM: Web Design Tutorial Site

The <AREA> tag

This tag is the real meat of image maps. It won't work without the others - the <MAP> tags have to enclose <AREA> tags or they won't work, and you then need the USEMAP attribute to point to the map. But it's through the <AREA> tag that you "draw" out the hot spots; the equivalent of making those felt-pen marks on the overhead transparency. For each hot spot you want to trace, you need an <AREA> tag. (There is no closing tag.)

The first thing we need to tell the browser, then, is the SHAPE of the hot spot. SHAPE wasn't in capitals for emphasis alone, but because it's the name of the relevant attribute in this case. It can take three values, though each of the three can appear in shorthand or the full version, as given in the table below. The next thing you need to tell the browser is the co-ordinates of the shape, in other words, where it actually is on the "transparency". Have a look at the table first, and then I'll explain how the co-ordinates can be established.

The co-ordinates of a point on an image are worked out in terms of pixels. Those who remember their GCSE maths should know that the x axis is the horizontal one, the y axis the vertical. However, unlike Cartesian co-ordinates, point (0, 0) is in the top left of an image. The map of South America, as should be clear from the HEIGHT and WIDTH attributes, is 218 pixels wide (x axis) and 300 pixels high (y axis), so the bottom right pixel is (218, 300). The other point I've marked on the picture here - which happens to be, roughly, the northernmost tip of Bolivia - has its own unique pair of co-ordinates, and so indeed does every other one of the 65,400 pixels in this image.

Elaborating on the table above, then, the COORDS attribute takes the following values depending on the SHAPE:

• circle: the x and y co-ordinate of the centre of the circle, then the radius of the circle in pixels. For instance: <AREA SHAPE=circ COORDS="55, 75, 20"> would create a hot spot 40 pixels in diameter centred on point 55, 75.
• rectangle: x1 and y1 are the co-ordinates of the top left of the rectangle; x2 and y2, bottom right.
• polygon: start with any vertex of the polygon and call this x1, y1. Then trace round each vertex in turn. The fewest you'll have, therefore, is three pairs of x, y co-ordinates (which would create a triangle). The "Bolivia" example below would have seven pairs. Note that you don't need to repeat the first vertex at the end; the browser will fill in the final "line" for you. Also please realise that you don't have to be absolutely precise, tracing round every last crinkle in some map or other. Similiarly, the faces traced out on the example at the end of this page are just circles; you don't have to go round ears, hair etc.! Something vaguely right is enough - and also, make sure hot spots don't overlap.

To actually work out where co-ordinates lie, you will need to load the image up into a graphics editor such as Paint Shop Pro or Photoshop. These have "information windows" which, when you place the cursor over a point in the image, will give you the x and y co-ordinates of that point. It doesn't take that long to write these down and work out where your hot spot shapes are located. However, there's an even quicker way, if you have access to Dreamweaver - indeed, this is the one aspect of web design where Dreamweaver saves you a lot of bother.

Simply load your page up into Dreamweaver, head for the image which you wish to associate with a map, and "expand" the Properties Window (this may well be gobbledegook if you've never used Dreamweaver, but hey, that's why Help menus exist). You will see something like the screen shot to the left and it should be fairly clear what's going on: choose your shape and then simply click around the image until the hot spot is created, as in the example of Bolivia here. Add the hot spot's destination in the "Link" box. Once all are done, come back out of Dreamweaver and you will see that it has created the map for you, with all COORDS in place. This is a great time-saver.

Finally, you will of course need to tell the browser where the hot spot links to. Normally this is done with an HREF attribute in the <AREA> tag, in the same way as for <A> tags. If you want to use a TARGET attribute for whatever reason, stick that in there as well. By now you should know how to create the full version of the "South America" image map as was given on the introductory page of this lesson. You can return there to look at the code, but it shouldn't be all that surprising.

There are some other tags which can be used on image maps. To create a hot spot that doesn't actually link anywhere, instead of the HREF attribute, put NOHREF in instead (this takes no values). ALT is also an attribute which can appear in <AREA> tags, giving different floating captions over different parts of the image. You might even try using onClick events to produce alerts or other effects.

Trouble is that these are shakily supported by browsers at the present time. Using NOHREF does create a hot spot but means that the cursor will not change to a "hand" when over that hot spot. This means the spot could be easily missed. Netscape doesn't support the ALT attribute in <AREA> tags either, which means that a NOHREF hot spot in Netscape is effectively nonexistent.

The map below, therefore, might look no different from a normal image to you, if viewing in Netscape. The two faces to the left, including my own mug, have been rendered as dummy links (HREF="#here", where "here" is an anchor tag lying just above the image - a dummy link of HREF="#" would return me to the top of the page each time) rather than NOHREF to give you an indication of the difference. The upshot of it all is, this map should work a lot better than it does! But at least it might serve as an indication of where things don't quite work as expected, and along the way, suggest another use of image maps on web pages beyond the actual maps I've used in the other two examples.

The Northern Travelling Seagulls - Port Vale Championship Party, 20/4/02

Remember - any image can be turned into an image map. Of course, not all do so logically, but that's not the point. It's not the image that matters, it's the "transparency" you lay over it. The best uses of image mpas are when information you want to present is directly related to different parts of an image, and this is why it is particularly appropriate for use with images such as (actual) maps, blueprints and diagrams: types of image which are already presenting graphical information. Photographs are usually more inherently illustrative, rather than informative, and it is more likely therefore that using a map on a photograph will be gratuitous or contrived. But that doesn't mean there aren't creative uses here. Just remember: always provide some alternative means of reaching the information in question for those that cannot or do not want to view images.

Back to the top

Back to the menu for lesson 7