使用 JAVASCRIPT在图片 某个地方 增加链接

HTML 代码: 

<div class="img-responsive center-block">  <img usemap="#Map" src="/#/e0d3c5dbd62a24fd7b9ab.png" alt="Banner" />
<map name="Map" style="a"><area href="链接地址" id="CribMap" shape="rect" target="_blank" />
</map>
</div>

JAVASCRIPT 计算链接的位置

adjust();   //在第一次打开模型的时候就设置图片的链接位置
  var timeout = null;
  window.onresize = function()  //这个是在每次调整浏览器的大小的时候自动适配链接位置
  {
    clearTimeout(timeout);
    timeout = setTimeout(function()
    {
      window.location.reload;
      adjust();
    },300);
  }


  function adjust()   // 调整链接的位置
  {
    var pageWidth = document.body.clientWidth;  //获得浏览器的页面宽度
// 图片的原始的尺寸
    var imageWidth = 1920;
    var imageHeigth = 420;
    var ra_img = imageHeigth/imageWidth;
    var pageHeigth = pageWidth * ra_img;
    var hash = { "top": 264, "right": 670,"bottom": 307, "left": 443};
    var ratio = { "r_top": hash["top"]/imageHeigth,
                  "r_right": hash["right"]/imageWidth,
                  "r_bottom": hash["bottom"]/imageHeigth,
                  "r_left": hash["left"]/imageWidth
                }
    var top = pageHeigth * ratio["r_top"];  //设置该链接区域 上边 距离 图片的上边距离
    var rigth = pageWidth * ratio["r_right"];  //设置该链接区域 右边 距离 图片的左边距离
    var bottom = pageHeigth * ratio["r_bottom"]; //设置该链接区域下边 距离 图片的上边距离
    var left = pageWidth * ratio["r_left"];  // 设置该图片的左边距离图片的左边距离
    var position = left+","+top+","+rigth+","+bottom;
    var area = document.getElementById("CribMap");  
    area.setAttribute("coords", position);  //设置 area的 coorder属性值
  }

取消链接区域样式

 img[usemap], map area{
    outline: none;
  }