关于如何在图片上加热点链接

        可能你在项目中会遇到需要在图片上模块区域加个链接，点击以后可以转向一个页面；下面方法可以帮你解决问题。

这种效果的实质是把一幅图片划分为不同的热点区域，再让不同的区域进行超链接。要完成地图区域超链接要用到三种标签：<img><map><area>。
     <img src="图片Url地址" usemap="#图的名称">
     <map name="图的名称">
      <area shape="形状" coords="区域座标列表" href="URL">
       <!--可根据需要定义多少个热点区域-->
       <area shape="形状" coords="区域座标列表" href="URL">
     </map>
1、shape -- 定义热点形状
          shape = rect     ：矩形
          shape = circle  ：圆形
          shape = poly    ： 多边形

2、coords -- 定义区域点的坐标
     a.矩形：必须使用四个数字，前两个数字为左上角座标，后两个数字为右下角座标
         例：<area shape=rect coords=100,50,200,100 href="URL">
     b.圆形：必须使用三个数字，前两个数字为圆心的座标，最后一个数字为半径长度
         例：<area shape=circle coords=100,100,50 href="URL">
     c.任意图形（多边形）：将图形之每一转折点座标依序填入
         例：<area shape=poly coords="123,455,653,455,121,..." href="URL">

例子代码：

<img src="chinaMap.jpg" width="200" height="500" border="0" usemap="#chinaMap" />
<map name="chinaMap" id="chinaMap">
    <area shape="rect" coords="10,50,150,100" href="http://www.baidu.com" onFocus="this.blur()"/>
    <area shape="rect" coords="10,110,150,160" href="http://www.baidu.com" />
    <area shape="rect" coords="10,170,150,220" href="http://www.baidu.com" />
    <area shape="rect" coords="10,230,150,280" href="http://www.baidu.com" />
    <!--<area shape="rect" coords="10,300,150,480" href="test.html" target="pcs"/> -->
    <!-- onFocus="this.blur()"   去掉虚线框 -->
</map>