Linking Images

An image can easily be linked; just place it between the <A HREF> and </A> tags. A more powerful technique, called image mapping, can associate links with specific areas of an image.

Example:

<MAP NAME="map">
<AREA href="page1.html" alt="Access Guide" shape="rect" coords="0,0,100,100">
<AREA href="page2.html" shape="poly" coords="200,200,200,0,300,20,300,180">
<AREA href="page3.html" shape="circle" coords="150,150,50">
</MAP>
<IMG SRC="image.gif" usemap="#map">

We have created three link areas in the image.gif image. They are grouped together under a <MAP> tag which maps them onto the image by means of the usemap attribute of the <IMG> tag. Each region is defined precisely with an <AREA> tag.

• The first area is a rectangle (with the shape="rect" attribute), the upper left and lower right corners of which are defined by the pixel coordinates (0,0) and (100,100), respectively. Its associated link points to the page1.html page.
  
  
• The second area is a polygon (with the shape="poly" attribute), the vertices of which are defined by the coordinates (200,200), (200,0), (300,20), and (300,180). The resulting shape is a kind of trapezoid, the right side of which is smaller than the left. Its associated link points to the page2.html page.
  
  
• The third area is a circle (with the shape="circle" attribute), which has a centre defined by the coordinates (150,150) and a radius of 50 pixels. Its associated link points to the page3.html page.
  
  

In each case, these coordinates are relative to the image; the coordinates (0,0) denote the upper left corner of the image.