HTML: Image Map Basics

Xah Lee, 2005

Sometimes you want a image to have sensitive areas that will have different behavior. This is done with HTML Image map. Here's a example.

Move your mouse over the bunny's eye, then a alert box will popup.

How It Works

First, you define a “map” of the image with the “map” tag and “area” tag, like this:

<map name="map1">
<area href="javascript:void(0);" 
 onmouseover="alert('Horror Show!');"
 alt="Horrow Show"
 shape="circle" coords="569,75,20">
</map>

Then, in your image tag, use the “usemap” tag to call your map, like this:

<img usemap="#map1" src="funnyPic.png" alt="comics">

The key to do this is by the tag “map”, and inside it you can have several “area” tags, which can have attributes of “shape”, in which you can specify “circle” and using the “coords” to specify its center, radius. You can also define other shapes such as a rectangle or any other polygon shape by giving a list of coordinates. Each of these “area” tag can have a link or any other DOM event, so that one can control what happens when a area is clicked or moused over. (View Source to see the code.)