HTML IMG Tag With usemap Attribute - Working Example

Posted at

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

Selected Comics

Circuit Diagram
Angular Momentum
Alternative 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="" width="520" height="100" alt="Selected Comics" usemap="#comicmap"/>
<map id="comicmap" name="comicmap">
<!-- Might be MIME dependent. -->
<area shape="rect" coords="0,0,100,100" href="" alt="Grownups"/>
<area shape="rect" coords="104,0,204,100" href="" alt="Circuit Diagram"/>
<area shape="rect" coords="208,0,308,100" href="" alt="Angular Momentum"/>
<area shape="rect" coords="312,0,412,100" href="" alt="Self-Description"/>
<area shape="rect" coords="416,0,520,100" href="" alt="Alternative Energy Revolution"/>