图像映射（图像热点）的使用

      工作中有时我们会需要实现这样一个功能：点击一张背景图的一个或多个区域，将跳转到不同的页面，这就是图片热点链接或称之为图像映射。

      举个栗子：

      

<img src="test.png" usemap="#testmap" alt="" /><map name="testmap" id="testmap"><area shape="circle" coords="100,100,100" href="test1.html" alt="" /><area shape="rect" coords="126,200,300,20" href="test2.html" alt="" /><area shape="poly" coords="0,100,100,50,60,90" href="test3.html" alt="" /></map>

      解析：

      1.  shape 定义热点的形状

           shape="circle"  多边形

           shape="rect"    矩形

           shape="poly"    多边形

     2.   coords 定义区域点的坐标

           1） rect   矩形， 规定有四个值，前两个表示左上角的坐标，后两个值表示右下角的坐标值

                 例：<area shape="rect" coords="x1,y1,x2,y2" href="url" alt="" />

           2） circle 圆形，规定有三个值，前两个数表示圆心坐标，最后一个值表示圆的半径长度

                 例：<area shape="rect" coords="x,y,z" href="url" alt="" />

           3） poly  多边形（任意图形），规定的值即为图形的每一个转折点的坐标值

                 例：<area shape="poly" coords="x1,y1,x2,y2,x3,y3" href="url" alt="" />

           

      下面来说下图像热点的原理：

       图片通过 usemap="testmap" 属性将map标签中的id或name属性（取决于浏览器，一般来说图片的usemap值对应的是map热点的name的属性值，设置的时候最好同时向map标签添加id和name属性）关联起来，而area标签指定了图像映射中的区域，shape属性指定了热点形状，coords指定了热点形状的坐标值，以此从而实现图像映射

注意：

      1>如果页面中如果有多个图片添加热点，那么每一个图片的usemap值跟对应的热点地图的name值一定要一样，且不同的热点区域name值不可以相同，如果相同，那么图片上的热点区域将会以相同名称的第一个热点区域为准。

      2>如果某个 area 标签中的坐标和其他区域发生了重叠，会优先采用最先出现的 area 标签。浏览器会忽略超过图像边界范围之外的坐标。

        鉴于坐标不好计算问题，向大家推荐一个热区工具：http://www.mtmao.com/hot