HTML IMG Tag With usemap Attribute – Working Example

img with usemap, it is mostly a rendering trick so you only render one image,

Selected Comics

GrownupsCircuit DiagramAngular MomentumSelf-DescriptionAlternative Energy Revolution

not quite a useful trick unless you are obligated to old-school image tag, using sprite is equally efficient (if not more, due to GPU rendering, and still- one image), sprite cutting should be applied to containers and wrapped with a-elements, this is another way..

<img src="http://imgs.xkcd.com/s/a899e84.jpg" width="520" height="100" alt="Selected Comics" usemap="#comicmap"/>
<map id="comicmap" name="comicmap">
<!-- http://code.google.com/p/chromium/issues/detail?id=108489 Might be MIME dependent. -->
<area shape="rect" coords="0,0,100,100" href="http://xkcd.com/150/" alt="Grownups"/>
<area shape="rect" coords="104,0,204,100" href="http://xkcd.com/730/" alt="Circuit Diagram"/>
<area shape="rect" coords="208,0,308,100" href="http://xkcd.com/162/" alt="Angular Momentum"/>
<area shape="rect" coords="312,0,412,100" href="http://xkcd.com/688/" alt="Self-Description"/>
<area shape="rect" coords="416,0,520,100" href="http://xkcd.com/556/" alt="Alternative Energy Revolution"/>
</map>