Image Maps - Details

Creating an Image Map:

Note: This section demonstrates how an image map works. Don’t be put off by the complex geometry – software does all the difficult stuff for you.

Image maps use coordinate descriptions to ascertain the area on screen you are clicking. In effect, this transforms an area of your graphic (be it .GIF or .JPG) into an active link. Thus if you click in the area "10,20,120,90", for example, you go to the corresponding linked page ("page1.htm" in the example below).

This is the HTML code contained on your page:

Part1: The coordinates for the areas on the map

<map name="mymap">
<area shape="rect" coords="10,20,120,90" href="page1.htm">

<area shape="rect" coords="12,138,124,197" href="mailto:feedback.ias@myschool.ie">
<area shape="circle" coords="99,143,14" href="page1.htm">
</map>

Part2: The map itself

<img border="0" src="map.gif" usemap="#mymap">