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.

  Return to top of page