爲圖片指定區域添加連接

幾個月前看《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> 中的座標點而作的輔助塊。