Contents:

---

Any .gif, .jpg or .png image can be used for an imagemap. All you need to do is create the co-ordinates on the image in order to get it to work as a map. Your image editor will probably have a grid system on it to help you find the coordinates.

image | light green rectangle | dark green triangle | large blue circle

Move your cursor over the image to the right and choose the various sections to discover how to get the co-ordinates for encoding that part of the imagemap.

Remember that images on the www are pixel images. The image on this page is 300 pixels by 250 pixels. The first pixel on the x-axis is at the top of the image. The first pixel on the y-axis is on the left of the image.

To make an image into an imagemap, add usemap="#usemapname" into the image tag. Your alt tag should also describe roughly where on the image the links are: alt="imagemap circle:circle contents, rect:rectangle contents, poly:polygon contents" The image tag is then followed by the map tag.

Here is an example of how the code will look - obviously the width and height specs will be filled in with numerical values that are the same as the width and height of the image used for the usemap:

code:

N.B. Please do not be tempted to leave out the alt specs. They are there for people who use text-to-speech browsers. (Yes, the blind do use the internet.) Also, please ensure that you place simple text links as well as the links on your image map. Not all browsers support imagemaps.

rectangle

image | light green rectangle | dark green triangle | large blue circle

  0
  :  
  :      ___________ 
  :     |           |
  :     |___________|          
  : 
  :
0-+-------------------X
  :
  Y

In the above image, the top left corner of the rectangle area is 0 pixels from the left and 160 pixels from the top. The bottom right corner is 180 pixels from the left and 195 pixels from the top.

To find the co-ordinates, put the image into your image editor and place a grid overtop.

rect co-ordinate format: x, topleft-y, x, bottomright-y

code for the image on this page (rectangle code in bold):

triangle (polygon)

image | light green rectangle | dark green triangle | large blue circle

  0
  :  
  :                 ,|
  :               ,  |
  :             ,    |
  :           ,      |
  :         ,        |
  :       ,          |
  :     ,____________|          
  :                   
  :
0-+-------------------X
  :
  Y

In the above image, the polygon(triangle) area has one point 300 pixels from the left and 70 from the top, one point 300 pixels from the left and 200 from the top and one point 165 pixels from the left and 250 from the top.

To find the co-ordinates, put the image into your image editor and place a grid overtop.

poly co-ordinate format: x1,y1,x2,y2,x3,y3,x4,y4,x5,y5, etc.etc.

code used for image on this page (triangle code in bold):

circle

image | light green rectangle | dark green triangle | large blue circle

  0

  :         _      
  :      ,'   `.      
  :     :       :   
  :     :       ;             
  :      `. _ ,'
  :                             
  :          
0-+-------------------X
  :
  Y

In the image on this page, the center of the circle is 95 pixels from the top and 75 pixels from the left of the image. It has a radius (straight line drawn from centre of the circle to the outside edge) of 65 pixels.

To find the co-ordinates, put the image into your image editor and place a grid overtop.

circle co-ordinate format: center-x, center-y, radius

code for image on this page (circle code in bold):

---