Image Map Lesson

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:
  • First go to the Mapper.
  • Enter the url of your image and submit.
  • Click on the top left corner where you want your area to begin.
  • You will see two coordinates (x,y) positions, in the text box.
  • Click on the bottom right corner where you want your area to end.
  • You will now see the four coordinates needed for your code.
  • Those four coordinates will make a rectangular area for your "hot spot".
  • Note: Keep the above 4 number sequence in the order you generate them.
  • 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="">
<area shape=rect coords="63,93,83,107" href="">

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.