HTML: Image Map

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

Here is a example.

Move your mouse over the big 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 attribute to call your map, like this:

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

The key to do this is by the map tag, and inside it you can have several area tags, which can have attributes of “shape”, one of {circle, rect, poly}. Each shape has coords attribute to specify its boundary.

You can also define other shapes.

Circle

<area href=val alt=val shape="circle" coords="x, y, r" />

The the coordinate, the origin is top left of the image.

Rectangle

<area href=val alt=val shape="rect" coords="minX, minY, maxX, maxY" />

Polygon

<area href=val alt=val shape="poly" coords="coordList" />

coordList must be comma separated string, each pair is a coordinate. For example "10,20,30,40,50,60,70,80,90,100,110,12"