Design and use of image maps

Checked with Netscape Navigator 3.0 Gold (32-bits)

These are the basic ingredients of a clickable map:

 
<MAP NAME="mapdata">
<AREA SHAPE=RECT COORDS="5,6,25,94" HREF="red rectangle">
<AREA SHAPE=CIRCLE COORDS="63,31,25" HREF="yellow circle">
<AREA COORDS="98,7,148,57" HREF="green square">
<AREA SHAPE=POLY COORDS="46,72,172,72,160,7,219,7,203,87,46,80" HREF="blue pipe">
</MAP>
<IMG USEMAP="#mapdata" SRC="imagemap.gif" BORDER=0 HEIGHT=100 WIDTH=300>

The lines between the tags <MAP> and </MAP> describe the 'sensitive' areas in the GIF-file 'imagemap.gif'.
HTML knows three shapes: a rectangle (RECT) (optional), a circle (CIRCLE) and a polygon(POLY). These are defined in the SHAPE label.
The COORDS label contains the coordinates of the angular points (vertex) of the rectangle or polygon, and circle data of the circle (see below).

A rectangle is defined by its upper left corner (x,y coordinates) and its lower right corner (x2,y2).
The COORDS label : "x,y,x2,y2".
A circle is defined by the coordinates of its centre (x,y) and its radius (r).
The COORDS label : "x,y,r".
A polygon is defined by all of its angular points (x1,y1, x2,y2, x3,y3, x4,y4, x5,y5) for instance.
The COORDS label : "x1,y1,x2,y2,x3,y3,x4,y4,x5,y5".
With complex shapes a mistake is easily made...

With Paint Shop Pro or any other good drawing programme, the pixel-coodinates can be found.

The texts red rectangle, yellow circle, green square and blue pipe should of course be replaced by appropriate URL's. I used these texts so you can immediately check if your browser shows these words if you move your mouse cursor over the coloured areas in the figure below.
Note: these are not working links, in your own page you must replace the texts between HREF=" until " (see the source of this page) by the URLs of the links.

Back to HTML page

Back to my home page