`<img usemap="">`

In HTML Attributes

Disclosure: Your support helps keep the site running! We earn a referral fee for some of the services we recommend on this page. Learn more

Attribute of: HTML Tags Guide To Adding Images To Your Web Documents
What does <img usemap=""> do?: Specifies a client-side image map to be used with the image.

Contents

1 Code Example
2 What is an image map?
3 Image Map Markup
4 Image Maps and Image Scaling
5 Tools and Tutorial
6 Browser Support for usemap

Code Example

<img src="/wp-content/uploads/shapes.png" usemap="shapes-map">

<map name="shapes-map">
  <area shape="rect" title="Square" coords="19,28,222,228" href="/wp-content/uploads/square.png" target="_blank" />
  <area shape="circle" title="Circle" coords="361,132,96" href="/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="/wp-content/uploads/flamingo.jpg" alt="" usemap="#flamingo-map" /> <map name="flamingo-map" id="flamingo-map">     <area alt="Flamingo." title="Flamingo." href="/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="/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>

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="/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="/wp-content/uploads/square.png" target="_blank" />   <area shape="circle" title="Circle" coords="361,132,96" href="/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 Wood

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

Browser Support for usemap


All	All	All	All	All	All