An imagemap is a way of allowing users of your site to access different documents by clicking different areas of an image. The actual documents may be on your own site or elsewhere. In the example below, the green area is a link to Dale's events site, the yellow area is a link to head-space.
The image is defined in the HTML as usual, but with the addition of a USEMAP attribute, plus the name of map to use preceded by a #.
<IMG SRC="example.gif" WIDTH=200 HEIGHT=200 ALT="umr imagemap" USEMAP="#example_map">The map itself is defined elsewhere in the document, by convention just before the </BODY> tag. For the above image, the map looks like this:
<MAP NAME="example_map"> <AREA SHAPE="RECT" COORDS="0,0,200,100" HREF="http://www.sorted.org/london" ALT="Events"> <AREA SHAPE="RECT" COORDS="0,100,200,200" HREF="http://www.head-space.com" ALT="head-space"> </MAP>The first line describes this as the map example_map (note there is no #). For each link you want to create in the image, there is an <AREA> line with three elements: the SHAPE of the "hot" area, in this case RECT for rectangular; two pairs of numbers giving the coordinates of the top-left and bottom-right points of the area; and an HREF tag giving the link URL.
| The tricky bit is the coordinates. The first number in each pair gives the horizontal position in pixels, the second number gives the vertical position. In this case, the image as a whole is 200 by 200 pixels. The first AREA line describes an area from the top left of the image (0,0) to halfway down the right edge (200,100). The second AREA line describes an area from halfway down the left edge (0,100) to the bottom right of the image (200,200). Hopefully the diagram on the right will help to clarify this. |
|
In the example above, the whole of the image was made clickable. However, you can just specify particular areas of the image as links. This is the case for the umr webring image. There are two link areas, one covering "this way" (pointing in this example at Dale's site) and one covering "that way" (pointing at head-space).
The HTML to do this is similar to the first example. The image is specified with
<IMG SRC="umrothim.gif" WIDTH=372 HEIGHT=73 USEMAP="#umrring_map">and the map definition, immediately before the </BODY> tag, reads
<MAP NAME="umrring_map"> <AREA SHAPE="RECT" COORDS="273,8,365,38" HREF="http://www.sorted.org/london" ALT="Events"> <AREA SHAPE="RECT" COORDS="273,39,365,65" HREF="http://www.head-space.com/" ALT="head-space"> </MAP>
That's enough to get the webring image working, but you can do more with imagemaps.
You can have more than one imagemap on a page, as this one does. Just give a unique name
to the USEMAP attribute and put all the individual map definitions at the bottom.
You can also have more or less than two clickable areas on an image; just put an
<AREA ... > line in the map definition for each clickable area.
The area doesn't have to be rectangular although most are. You can also use CIRC for
circular areas and POLY for user-defined shapes. A circle is defined using the center
point and the radius (COORDS=centerx,centery,radius) and a polygon is defined as a
series of coordinate pairs (COORDS=point1x,point1y,point2x,point2y...)
If there are any mistakes on this page, or something is not clear, drop a line to
webring@drbob.co.uk.