An image map is an image with clickable areas. It allows you to use an image as if it were made up of separate parts with each part being a link (or JavaScript event). Image maps have probably been overtaken by the use of Flash and JavaScript but they do provide a fast and interesting way to enhance navigation on your site. To see an example follow the link to the right. Image map example
An image map needs two parts - an image and a map for that image:
<div>
<img src="web.png" alt="Dew drops on spider web" usemap="#web" />
</div>
<map name="web">
<area shape="circle" coords="34,61,15" href="../beginninghtml.php" alt="Beginners HTML tutorial" title="Beginners HTML tutorial"/>
<area shape="circle" coords="35,100,17" href="../beginningjavascript.php" alt="Beginners JavaScript tutorial" title="Beginners JavaScript tutorial"/>
</map>
The map above has two "live" areas which are links to pages on this site. The areas are both circles due to the shape of the objects in the image. The areas have coordinates which tell the browser where the "live" area is and how big it is. The coordinates for each shape are:
- circle - position of the centre of the circle horizontally and vertically plus the radius
- rectangle - position of the top left and bottom right corners (so there will be four numbers)
- polygon - position of the first corner followed, in order, by the position of all the others
The polygon is the hardest to set up but the most useful as it can be used to draw any shape with straight sides and, given enough sides, that means almost any solid shape.
