Back to Index
Client-side imagemaps

Imagemaps

Any image can be divided up into sections, usually rectangles, each of which is associated with an address or URL. These regions or "hot spots" are defined in a map file, made up of a line for each region. The map file contains the coordinates of each region.

In the example above the gif file is divided into five regions by rectangles, so when you click on one of them you are linked to the appropriate address

The image here is a gif file called "menu.gif". Information about the coordinates and shapes of the regions or rectangles as well as the URL's or addresses each region will connect to are kept in the map file. In this examplt the map file is called "menu.map". The map file reads like this:

rect http://www.chepd.mq.edu.au/boomerang/teaching.www/index.htm 205,0 246,18

rect http://www.chepd.mq.edu.au/boomerang/teachhc 245,0 330,18

rect http://www.ancient.mq.edu.au/boomerang/ahist/ 89,0 206,18

rect http://www.chepd.mq.edu.au/boomerang 54,0 90,18

rect http://www.chepd.mq.edu.au 0,0 55,18

The word rect (for rectangle) is followed by the URL and then the coordinates of the region or "hot spot".

Once the map file is created for an image, an anchor is added to the html document that contains the clickable image. For instance this document contains the line

<a href="menu.map"><img src="menu.gif" ismap></a>

Most servers require a cgi program to decipher the links to follow based on the map file information. So the html script might look like this

<a href="cgi-bin/menu.map><img src="menu.gif" ismap></a>

The "ismap" attribute indicates that gif file is an imagemap.


Finding the Coordinates

One way of finding the coordinates for any imagemap is by using a script that has a false or nonexistant map file name. Lets use the image we started with menu.gif. The map file will be called false.map and the code we need to show the image and allow us to find the coordinates is

<a href="false.map"><img src="menu.gif" ismap></a>

Try it out. Run the mouse over the image and watch the coordinates appear at the very bottom of your browser! (Actually this only works if you're running this tutorial from your own computer rather than the server)


Return to top of page