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="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.