These are the basic ingredients of a clickable map:
The lines between the tags <MAP> and
</MAP> describe the 'sensitive' areas in the GIF-file
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