Kaye and Geoff's web page documentation 

Introduction

Here we will look at how to create and use clickable image maps in web pages. A clickable map (it could be but does not have to be an actual map - it can be any image) is effectively a group of active links defined within a picture. Which link is taken (if any) depends on where in the image the user clicks.

Let's say you want people to be able to get information about local tourism. What would be better than to show them a map of the area, and allow them to click on regions in order to see a detailed description of tourist attractions there? That is what a clickable image map does. But they can have many other uses. For example, they can help users better understand a picture or diagram by allowing them to click on a component represented in the graphic to see an explanation or an enlarged image.

Clickable image maps obviously work only with graphically oriented web browsers - you should always try to provide alternate text-based methods of accessing the same information.

Creating a map

Creating a clickable map for your web pages is not difficult. It can be done on the server (server-side), requiring the webmaster to set up a link from the image-mapping software provided on your server, but this approach is not commonly used, so here we will only consider client-side image maps, which are entirely implemented in normal HTML.

There are two separate things you have to do to set up a client-side image map. We can look at the simpler part first. Select your image, which can be in any format which browsers understand (so normally GIF or JPEG - see 'Using graphics'). Use the normal HTML <img> tag to place your image where you want it in your web page. Now add a usemap attribute to the image specification, for example:

<img src="weevil.gif" align="left" usemap="#insect">

The usemap has two functions: it tells the browser that this is to be a clickable image, and it links the image to the code specifying the clickable regions and what is to happen when they are activated (as described below). Note that "insect" is just a name, it can be any text you choose, but it is very wise to always use names consisting only of alphanumeric characters. The # is required.

The HTML to to specify the active regions of the image and what to do with them can go anywhere in the body section of your page (well, not between a <table> and a <tr> tag, or similar places, but anywhere that you are allowed to put most other HTML - they are typically either put immediately under their <img> tag, or else at the end of the body). The following example would go with the image definition above:

<map name="insect"> <area shape="circle" coords="251,124,40" href="clickmap/weevil.html#abdomen" alt="abdomen"> <area shape="circle" coords="325,257,50" href="clickmap/weevil.html#thorax" alt="thorax"> <area shape="poly" coords="70,37,93,38,89,50,70,37" href="clickmap/weevil.html#eye" alt="eye"> <area shape="rect" coords="67,113,85,105" href="clickmap/weevil.html#wing" alt="wing"> <area shape="default" href="clickmap/weevil.html#nomatch" alt="No match"> </map>

It looks a bit complicated but we can break it down into simpler pieces. The whole block of HTML is enclosed by <map> tags. The opening tag must have a name attribute, whose value is the same as that used in the usemap attribute of the related image specification (as explained above). Note that here the parameter is not preceded by a #. This attribute links the image to its map description (remember that map block can be anywhere in the body of the HTML) and is also required because you could have more than one clickable map on a single web page.

Within the <map>...</map> tags are one or more <area> tags. Note that they do not require a closing tag. Each <area> tag specifies an active area (sometimes called a "hot spot") and what to do if the user clicks on that area. There is a choice of hot spot shapes, specified by the shape attribute, as follows:

  • circle: a circle defined by three values - the central coordinates and the radius (ie. x, y, radius)
  • poly: a polygon with at most 100 vertices; each coordinate pair define a vertex (ie. x1,y1, x2,y2, x3,y3, ...)
  • rect: a rectangle defined by four values - two coordinate pairs - upper-left and lower-right
  • default: the whole picture, so if used it is always placed last to provide an action to take if an otherwise undefined region is clicked on

As can be seen from the example the coordinates are specified by the coord attribute, with the values (in pixels relative to the top left corner of the image) separated by commas. Pixel coordinates are not easy to determine by just looking at an image on the screen, so software is available to help, either as a small specialised WYSIWYG utility, or as part of a generalised graphics program. A specialised utility will usually create the HTML for you to cut and paste into your own HTML, but you will have to write the HTML yourself if you use a graphics package, since it will only tell you what pixel coordinates at the location on the picture pointed to by your mouse.

If you want to use an image map utility, you could try the WYSIWYG Mapedit program. You can obtain it from the mapedit information site for Windows and X-windows (Unix) or for the Mac. Alternatively, have a look at what is on offer at Tucows or check out the Hotspots image map editors. Mapedit allows you to display the image and chose a shape which you can then "draw" with the mouse. From this it works out the coordinates of the shape and asks for a URL (see below) for that shape. At the end of the process it creates a file containing the required HTML map code. Alternatively you can write the HTML yourself but get a graphics program to show you the coordinates as you move the mouse. On a Macintosh GraphicConverter will do this for you (and lots of other things as well) and similar programs exist on other platforms (check out the Using graphics page).

The final part of the map code to consider is the href attribute. It means the same as it does when used with an <a> tag, requesting the browser to retrieve and display the file specified by the URL, but here this happens only when the user clicks on the associated hot spot. Each <area> tag can also have an alt attribute as shown, which displays the link destination in the status line when the cursor moves over the hot spot. There can also be a target attribute to specify the frame or window in which to display the file.

A few final comments. If the defined shapes overlap, it is the first in the "area" list which contains the mouse click which is actioned, which is why the default shape (it is equivalent to the entire picture), if used, must be at the end of the area list, and why it does not make sense to have more than one default. The default shape can be specified without any href attribute (or the nearly equivalent href="#" - this redraws the page in some browsers) but with an alt attribute which puts a suitable message (for example "no action") in the status line. Then again, you can just not have a default in which case nothing happens if the user clicks outside the defined shapes.

As a summary, here is the HTML for a simple but complete web page containing a clickable image map:

<html> <head><title>Image map example</title></head> <body bgcolor="#ffffff"> <center> <img src="southcoastmap.gif" usemap="#sw"> <p> Click on a location to get further information about that area </center> <map name="sw"> <area shape="rect" coords="251,24,262,25" href="clickmap/tourism.html#denmark" alt="Denmark"> <area shape="rect" coords="270,137,293,138" href="clickmap/tourism.html#albany" alt="Albany"> <area shape="circle" coords="362,149,28" href="clickmap/tourism.html#torbay" alt="Torbay"> <area shape="poly" coords="271,198,304,199,309,211,307,216,289,217,271,213,271,198" href="clickmap/tourism.html#wch" alt="Wychinicup"> <area shape="poly" coords="67,113,85,105,99,110,96,123,84,125,88,135,75,140" href="clickmap/tourism.html#torn" alt="Torndirrup"> <area shape="default" href="#" alt="No match"> </map> </body> </html>

To see how it all works in practice you can view a working clickable map.

Top
Previous
Next
Index
Home