Introduction to Image Maps

Image maps enable you to use sections of images to link to other pages. The example on this page uses a gif with the word "OUT" on it. If you click on the "O" you go to one page, if you click on the "U" you go to another page, and the "T" takes you to yet another page. Here's the code for that:

< img src="pic/out.gif" width=200 height=100 usemap="#mainmap">
< map name="mainmap">
< area shape=rect coords="0,0,75,100" href=o.htm>
< area shape=rect coords="75,0,145,100" href=u.htm>
< area shape=rect coords="145,0,200,100" href=t.htm>
< /map>

The only part of this which might need some explanation is how the coordinates work. The upper-left corner of any image is identified by the coordinates (0,0). The image in this example has a height of 100 units and a width of 200 units. So, the bottom-right corner is identified by the coordinates (200,100). The rectangle containing the "O" has the coordinates 0, 0, 75, 100 because it's upper-left corner is at (0,0) and its lower-right corner is at (75,100). Similarly, the "U" has the coordinates of 75, 0, 145, 100 because its upper-left corner is at (75,0) and its lower corner is at (145,100). Your assignment is explained on the three linking pages.