so you want an ImageMap

imagemap - circle:circle contents, rect:rectangle contents, poly:triangle contents (©ejm) You can use any .gif .jpg or .png image that you want to make 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.

Please hit the various sections of the image to the right (I have chosen to use a .gif) to discover how to get the co-ordinates and encode that part of the imagemap.

large blue circle . green rectangle . dark green triangle

Remember that images on the www are pixel images. The above image 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 spec should also describe roughly where on the image the links are: alt="imagemap circle:circle contents, rect:rectangle contents, poly:triangle contents". Each area should also include an appropriate alt spec. For instance, for a circle area: alt="imagemap circle:circle contents". Note also that there can be title specs for each area of the image. The image tag is then followed 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:
-------------------------dotted line-------------------------

<img src="imagename.jpg" width="xx" height="yy" border="0" usemap="#usemapname" 
   alt="imagemap - description of links" 
   title="imagemap - move cursor over image to locate links" />

<map name="usemapname" id="usemapname">
<area href="1stlinkname.html" shape="circle" coords="x,y,r" 
   alt="circle contents" title="circle contents" id="circle_contents" />
<area href="2ndlinkname.html" shape="rect" coords="x,topleft-y,x,bottomright-y" 
   alt="rectangle contents" title="rectangle contents" id="rectangle_contents" />
<area href="3rdlinkname.html" shape="poly" coords="x,y,x,y,x,y,x,y" 
   alt="polygon contents" title="polygon contents" id="polygon_contents" />
</map>

-------------------------dotted line-------------------------

N.B. Please ensure that you also have simple text links to the links on your image map. Not all browsers support imagemaps.

code:
-------------------------dotted line-------------------------

<a href="#circle_contents">circle contents</a> | 
<a href="#rectangle_contents">rectangle contents</a> | 
<a href="#polygon_contents">polygon contents</a>

-------------------------dotted line-------------------------

rectangle

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

In the image I chose, 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 I used:
-------------------------dotted line-------------------------

<map name="teach" id="teach">
<area href="#rectangle" shape="rect" coords="0,160,180,195" alt="green rectangle" title="to more about green rectangle" id="green_rectangle" />
</map>

-------------------------dotted line-------------------------

back to imagemap

triangle (polygon)

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

In the image I chose, 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 I used:
-------------------------dotted line-------------------------

<map name="teach" id="teach">
<area href="#triangle" shape="poly" coords="300,70,300,200,165,250" alt="green triangle" title="to more about green triangle" id="green_triangle" />
</map>

-------------------------dotted line-------------------------

back to imagemap

circle

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

In the image I chose, 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 I used:
-------------------------dotted line-------------------------

<map name="teach" id="teach">
<area href="#circle" shape="circle" coords="95,75,65" alt="blue circle" title="to more about blue circle" id="blue_circle" />
</map>

-------------------------dotted line-------------------------

back to imagemap

© llizard 2001, 2003, 2007 ( last modified 27 March, 2007)

CWC reference pages . ASCII-art . illustrations and gif animations . llinks to ridiculously useless sites . home page

Crosswinds WebHosting