html MAp coords 自适应热点图片宽度定位

业余结了一个小单子，html的作业，但是需要用DW做热点图，电脑也没有那玩意，就用淘宝热点图做了。后来发现图片比我屏幕还宽，body出现了滚动轴，如果改成百分比，热点图就错位了。于是就用js控制了。

图片加载前获取图片的原始宽度，这个时候，算出视窗宽度与图片宽度的比例Cp。

用dom查询area节点，获取coord属性。

每个属性乘上CP比例。

再setAttribute就好了。

 

代码：注意这列将图片宽度设置为100%！important。

   //全图状态下定位
var defaultMaps = [
    [585,170,787,239],
    [212,172,351,238],
    [1031,174,1230,245],
    [798,173,1026,244],
    [1238,172,1426,242],
    [1439,173,1635,241]

];
var areas = document.querySelectorAll('area');
for (var m = 0; m < areas.length; m++) {
    areas[m]
}
console.log(areas[0].coords);
console.log(areas.length);
// 图片地址
var img_url = '关于.png'

// 创建对象
var img = new Image()

// 改变图片的src
img.src = img_url

// 加载完成执行
img.onload = function(){
    // 打印
    var cuWidth =  document.body.clientWidth ;
    var cp = cuWidth / img.width ;
    console.log("cp:"+cp);
   console.log( document.body.clientWidth );
   for (var i = 0; i < defaultMaps.length; i++) {
      for (var n = 0; n < defaultMaps[i].length; n++) {
        console.log(defaultMaps[i][n]);
        defaultMaps[i][n] = defaultMaps[i][n] * cp;
        console.log(defaultMaps[i][n]);

      }
      areas[i].setAttribute('coords',defaultMaps[i]);
   }

};