Image Maps

The <map> tag provides a simple method of employing a client-side image map. In the old days, the only method was with a server side CGI script. While this is still possible, it's much easier to use the <map> tag.

The image to the left is a normal jpg. What makes it different is that it makes reference to an image map which is designated by the <map> tag.

The following steps should be taken when creating an image map:

  1. Select an appropriate graphic
  2. Plan the shapes that you want while still in GIMP and record both the shapes, and the coordinates
  3. Insert a <map> near the start of your page (it does NOT need to be near the graphic)
  4. For each shape used, insert a <area> tag (see sample below for the image map on the left). 

<map name="demo">
	<area shape="circle" coords="180, 85, 40" href="/~kingsland" target="_top">
	<area shape="rect" coords="20, 265, 160, 320" href="index.html" target="_top">
	<area shape="rect" coords="20, 340, 160, 395" href="font.html">
	<area shape="rect" coords="20, 420, 160, 470" href="table.html">
</map>

Your image tag will need to link to the map (although it can be anywhere within the page):