area和map元素实现不规则点击区域演示页面

展示

提问交流 »

//zxx: 鼠标经过饼图不同区域，看看链接是不是精准变化了？
或者点击不同区域，看看URL中的hash地址变化

代码

HTML-Chrome only：

<img src="pie.png" usemap="#pie" alt="饼图" width="202" height="202">

<map id="pie" name="pie">
    <area shape="poly" coords="101,101,101,0,0,0,0,101,20,134" href="#html">
    <area shape="poly" coords="101,101,101,0,202,0,202,101,180,134" href="#css">
    <area shape="poly" coords="101,101,20,134,101,202,180,134" href="#js">
</map>