How To Create images with
multiple links (IMAGE MAPS)
Many web sites use a single image for multiple links These multi-link images are called Image maps There are 2 ways to create image maps (1) Client side image mapsThese are the easiest to do. The first task is to divide your image into coordinates in terms of pixels. On our earlier versions of this site we used a banner as an imagemap to navigate (here it is in condensed form)  The Original banner is around 450 pixels wide and 75 high. Most paint packages will give you the coordinates, our banner is broken down as shown 
Image maps use sets of coordinates to define areas in an x,y fashion (e.g. the upper left corner coordinates for the home link are are 0,45 and the lower right by 70,75) Our imagemap can be defined by the following bits of HTML <map name="banner">
<area shape="rect" coords="0,45,70,75" href="home.htm" alt="home">
<area shape="rect" coords="71,45,170,75" href="emailme.htm" alt="contact us">
<area shape="rect" coords="171,45,230,75" href="links.htm" alt="links">
<area shape="rect" coords="240,45,330,75" href="question.htm" alt="FAQ and questions">
<area shape="rect" coords="331,45,420,75" href="other.htm" alt="our review pages">
</map>
<img src="grapix/banner.gif" border="0" width="450" height="75" usemap="#banner"> (composer and frontpage express users should use add HTML functions for these) Lets break the code down <map name="banner">
The <map> tag determines the start of the image map. The name attribute defines the name of the map (doesn't need to be the name of the image)
<area shape="rect" coords="0,45,70,75" href="home.htm" alt="home">
Each of the following <area> tags define the area for each of the links and the link. In this case shape of link are is a rectangle (hence shape="rect"). The 2 corner coordinates are use to define the position of the rectangle with the upper right (0,45) before lower left (70,75) corner (coords="0,45,70,75"). The href & alt just define the target of the link and the message that appears when the mouse passes over this link (as with any image)
<area shape="rect" coords="71,45,170,75" href="emailme.htm" alt="contact us">
<area shape="rect" coords="171,45,230,75" href="links.htm" alt="links">
<area shape="rect" coords="240,45,330,75" href="question.htm" alt="FAQ and questions">
<area shape="rect" coords="331,45,420,75" href="other.htm" alt="our review pages">
</map>
Closes imagemap (essential!!)
<img src="grapix/banner.gif" border="0" width="450" height="75" usemap="#banner">
The <img> tag defines what image you use and its location with the usemap attribute linking it to the defined map (banner) in the form of usemap="#banner". All other attributes are as described earlier Please note that you should avoid your link areas overlapping Instead of rectangle ("rect") for shapes you can also use | Type | Shape Attribute | Coords attributes | | Rectangle | rect | x1,y1,x2,y2
where x1,y1 defines upper left corner and x2,y2 defines lower right | | Circle | circ | x,y,r
Where x,y define centre of circle and r its radius | polygon
(from triangle up) | poly | x1,y1,x2,y2,x3,y3 etc.
for each of shapes corners |
(2) Server side Image mapsThese require the use of a CGI program on the server. Hence are more complicated and we therefore do not define them here. 
|
