HTML: Image Map Basics

By Xah Lee. Date: . Last updated: .

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.

Horrow Show
comics by Nicholas Gurewitch

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">

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. Here's example:

<map name="…">

<area href="…" alt="…" shape="circle" coords="‹x›,‹y›,‹radius›" />

<area href="…" alt="…" shape="rect" coords="‹upper left corner x›, ‹upper left corner y›, ‹lower right coner x›, ‹lower right coner y›" />

<area href="…" alt="…" shape="poly" coords="‹at least 6 numbers, or more, must be even count›" />

Liket it? I spend 2 years writing this tutorial. Help me spread it. Tell your friends. Or, Put $5 at patreon.

Or, Buy JavaScript in Depth

If you have a question, put $5 at patreon and message me.

Web Dev Tutorials

  1. HTML
  2. Visual CSS
  3. JS in Depth
  4. JS Object Ref
  5. DOM Scripting
  6. SVG
  7. Blog