动态大小的图片上的超链接

近日根据需求需要对一张图片上的某些地方加上超链接，首先想到的就是图片热点，这个大家都知道是根据图片左上角0,0开始定位，但是后来发现热点不随着图片大小改变而改变，这就无法满足需求

然后想了想可能的办法应该有两种

1、动态更改area中的coords，因为我这个图片热点是矩形，所以对应的就是左上角和右下角的坐标，可以根据图片的大小改变而去动态改变coords来满足热点随图片大小改变而改变

2、用浮动div覆盖图片对应图片区域通过响应点击事件来模拟热点操作

后来通过使用2方法发现，其实1和2原理相同，无非就是计算的点的个数不同，其中

方法1需要计算两个相对点相对图片的相对坐标

方法2只要计算一个div左上角点相对图片的相对坐标，因为div的宽高都可以在css中定义成百分比，所以只要左上角一个点

原理：根据图片原图中需要链接的点相对于图片的百分比，去匹配实际图片大小对应的百分比

例子：以方法2为例

假设：原图宽高为  sw,sh，图片所在容器宽高为ww,hh, 原图中元素离图片左边的距离为w,离图片顶部的距离为h,新建一个浮动且绝对定位div元素，宽高根据实际情况设为百分比，

则放大后对应元素的margin-left = ww * (w/sw)

则放大后对应元素的margin-top = hh * (h/sh)

绑定缩放事件

window.onresize = function() {
for (var i = 0; i < $(".hot").length; i++) {
                      $(".hot").eq(i).css("margin-left",  ww*(w[i]/sw) + "px").css("margin-top", hh*(h[i]/sh)+"px");
                  }
 
            }

样式如下：

.hotpot{
    height: 7%;
    background: red;
    width: 14%;
    position: absolute;
    float: left;
    cursor: pointer;
}