Question

I know it’s possible to make a square/rectangle and a circle on a <map>, but is it possible to make a “doughnut” shape, i.e. a large circle with a small concentric circle cut out of it?

Answer 1

Here is the code with a fiddle:

http://jsfiddle.net/DUgBB/1/

<div style="text-align:center; width:300px; margin-left:auto; margin-right:auto;">
<img id="mapimg" src="http://1.bp.blogspot.com/-ddhpRGckLK8/Tu3MuGz111I/AAAAAAAABbM/imvskMreBFs/s1600/dunkin+donuts+printable+coupons_25281_2529.jpg" usemap="#map" border="0" width="300" height="300" alt="" />
<map id="map" name="map">
<area shape="poly" coords="34,81,87,35,142,17,218,36,265,82,280,159,237,240,165,278,82,265,13,161,32,89,121,128,109,164,126,191,169,182,190,147,179,126,151,120,128,128,39,82," href="http://google.com/" alt="" title=""   />
</map>
</div>
        ​

Here’s an image demonstrating it:

Terrible hand drawn donut

I have basically made a custom polygon with the points wrapping round to make a donut shape.