(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-66923408-1', 'auto'); ga('send', 'pageview');
<img src="http://jw778.com/wp-content/uploads/shapes.png" usemap="shapes-map"> <map name="shapes-map"> <area shape="rect" title="Square" coords="19,28,222,228" href="/html_/"/wp-content/uploads/square.png"" target="_blank" /> <area shape="circle" title="Circle" coords="361,132,96" href="/html_/"/wp-content/uploads/circle.png"" target="_blank" /> </map>

What is an image map?

An image map is a User Interface technique in which a user can click anywhere inside of an image, and the location of the click affects the outcome of the click. The idea is that clicking on different sections of the image creates different effects. For example, the image might be a map of the United States, and clicking within the borders of a particular state leads to a page about that state. There are two kinds of image maps:

  • server-side image maps
  • client-side image maps
  • The usemap attribute specifies that the image will employ a client-side image map.

    Image Map Markup

    There are two parts to a client-side image map. The image with the usemap attribute, and the map itself. The use-map must identify the name of the <map> to be used. (This means that the map element must have a unique name.) The markup looks like this:

    <img src="" usemap="map-name">  <map name="map-name">   <!-- one or more area elements --> </map> 

    Inside the <map> element are one or more <area> elements defining clickable sections of the map.

    <img src="http://jw778.com/wp-content/uploads/flamingo.jpg" alt="" usemap="#flamingo-map" /> <map name="flamingo-map" id="flamingo-map">     <area alt="Flamingo." title="Flamingo." href="/html_/wp-content/uploads/just-flamingo.jpg" target="_blank" shape="poly" coords="103,421,633,423,601,389,575,356,532,334,511,322,475,305,447,288,443,263,436,215,424,180,427,144,430,117,427,94,421,66,407,46,386,34,363,22,352,22,343,20,329,20,308,24,291,33,272,53,254,79,240,113,229,154,226,190,226,265,225,288,199,304,177,323,165,334,143,361" />     <area alt="Not the Flamingo." title="Not the Flamingo." href="/html_/wp-content/uploads/no-flamingo.jpg" target="_blank" shape="poly" coords="1,5,6,418,95,418,133,361,152,335,176,312,194,298,213,286,213,231,215,192,222,156,231,118,237,97,252,68,266,46,280,30,295,23,314,20,330,18,348,16,360,16,377,20,396,32,412,39,417,46,422,53,426,63,431,74,432,84,432,93,432,108,434,124,434,138,433,150,430,167,430,174,431,182,435,193,442,203,443,223,452,283,575,348,583,352,637,417,635,4" /> </map> 

    Flamingo.Not the Flamingo.

    Image Maps and Image Scaling

    Unfortunately, image maps only work properly if you can be certain that the image will be display at its exact real size — they do not scale or adapt to responsive sizing. See what happens to the image map below (the same one as in the Code Example above), but with the image enlarged to 100% of its own container.

    <img src="http://jw778.com/wp-content/uploads/shapes.png" usemap="shapes-map-2" style="width: 100%; height: auto;" >  <map name="shapes-map-2">   <area shape="rect" title="Square" coords="19,28,222,228" href="/html_/wp-content/uploads/square.png" target="_blank" />   <area shape="circle" title="Circle" coords="361,132,96" href="/html_/wp-content/uploads/circle.png" target="_blank" /> </map>  

    Unless your browser is just exactly the right size, you should notice that the clickable areas do not line up with the shape pictures correctly. The W3C's specification for image maps directs that browsers should accept scalable, percentage-based <area> coordinates. However, no browsers currently implement this feature. There is hope, however, if you really need scalable image maps. You can try the Image Map Resizer, a JavaScript plugin which should make your maps resize appropriately.

    Tools and Tutorial

    Creating image maps manually is kind of difficult. Most people who need them use an image map generator. The two image maps on this page were created with this tool and this one. For more information on Image Maps, see out Image Map Tutorial.

    Adam is a technical writer who specializes in developer documentation and tutorials.

    Browser Support for usemap