The next thing you need to do is decide on an image.
Then using the Mapper, map out the Coordinates.

To Map Your Image Follow These Steps:

  1. First go to the Mapper.
  2. Enter the url of your image and submit.
  3. Click on the top left corner where you want your area to begin.
  4. You will see two coordinates (x,y) positions, in the text box.
  5. Click on the bottom right corner where you want your area to end.
  6. You will now see the four coordinates needed for your code.
  7. Those four coordinates will make a rectangular area for your "hot spot".
  8. Note: Keep the above 4 number sequence in the order you generate them.
  9. Input the 4 number sequence into your image map code, replacing the (1,2,3,4).

    Below is a sample image map and the code to built it.
    Note: The two windows are now clickable links.

    <img src="schoolhouse.gif" border=0 height=160 width=115 usemap="#mymap1">
    <map name="mymap1">
    <area shape=rect coords="22,93,42,106" href="http://www.draac.com/">
    <area shape=rect coords="63,93,83,107" href="http://gifs123.tripod.com/">
    </map>

    That completes the lesson for a Client Side Image Map.
    For different shape "hot spots" click on the next page
    to see how to map out circles and polygrams.

    | Back To Page 1 | On To Page 3 |

    Brought To You By Draac.Com ©