为图片指定区域添加链接

几个月前看《HTML5与CSS3设计模式》

一书，了解到了 <map> 和 <area> ,看到了如题这样的应用，故写此篇记录下来，以后有更深入的了解会继续补充，如有表述不准确之处，欢迎指正，欢迎补充，感谢阅读。

css代码如下：

*{margin: 0;padding: 0;}
#bj_map{width: 788px;height: 491px;}
.position{background: #09c;width: 10px;height: 10px;position: absolute;top: 0;left: 0;}
area{outline: none;}

dom结构如下：

<h1>朝阳区 通州区好使</h1>
<img src="images/map.jpg" height="491" width="788" alt="" usemap="#bj_map" /> 
<map id="bj_map" name="bj_map">
<area shape="poly" coords="472,338,479,344,502,348,515,341,550,341,550,430,485,430,495,404,473,368,478,360,457,345" href="https://www.baidu.com/s?tn=99006304_1_oem_dg&isource=infinity&wd=%E9%80%9A%E5%B7%9E%E5%8C%BA" alt="通州区" target="_blank" />
<area shape="rect" coords="490,270,560,340" href="https://www.baidu.com/s?tn=99006304_1_oem_dg&isource=infinity&wd=%E6%9C%9D%E9%98%B3%E5%8C%BA" alt="朝阳区" target="_blank" />
</map>
<!-- <div class="position"></div> // 定位用块 -->

其中 .position 是我为了找 <area> 中的坐标点而做的辅助块。