map 上的 HTML "doughnut"

Question

我知道可以在 <map> 上制作正方形/矩形和圆形, 但是否有可能制作一个“ donut ”形状，即一个大圆圈切出一个小的同心圆？

Answer 1

这是带有 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>
        ​

这是一张展示它的图片:

糟糕的手绘 donut

我基本上制作了一个自定义多边形，其中的点环绕成圆环形状。