- Attribute of
- <img> HTML Tag
- What does
- Specifies a client-side image map to be used with the image.
<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
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>
<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
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.
Browser Support for usemap