淘宝京东专题页做法之HTML5 map 应用

最近接了一个商场项目，做到了专题页，特意研究了一下京东淘宝大网站的专题页做法，发现他们都采用的是html5 map ，随之稍微研究了一下map ，特此记录。

以下就是W3School 教程中部分截取map属性，详细可查看[map教程](http://www.w3school.com.cn/tags/tag_map.asp)

**定义和用法**
定义一个客户端图像映射。图像映射（image-map）指带有可点击区域的一幅图像。

**浏览器支持**
IE  Firefox Chrome  Safari  Opera
所有主流浏览器都支持 <map> 标签。

提示和注释：
注释：area 元素永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域。

注释：<img>中的 usemap 属性可引用 <map> 中的 id 或 name 属性（取决于浏览器的兼容问题），所以我们应同时向 <map> 添加 id 和 name 属性。

好了好了...上代码了..

<img src ="planets.gif" alt="Planets" usemap ="#planetmap" />

<map name="planetmap" id="planetmap">
  <area shape="rect" coords="0,0,110,260" href="sun.htm" alt="Sun" />
  <area shape="circle" coords="129,161,10" href="mercur.htm" alt="Mercury" />
  <area shape="poly" coords="0,0,12,14,299,300" href="venus.htm" alt="Venus" />
</map>

这里重点说一下 area 标签 coords属性
根据shape 属性值不同 coords 属性值也发生变化

最后总结一句啦，
使用html5 map属性 一定要在img标签上加个 usemap ="#planetmap" ，和map 标签的 name="planetmap" id="planetmap" 统一，area 标签 根据shape属性值的不同而改变coords属性值。