图片区域定位添加a链接

Posted: 2018-01-24  By  vilay  |  Views(375)

在图片的局部添加a标签链接

<img src="./images/new.gif" data-rel="./background.jpg" style="width:100%;padding: 0px;vertical-align:top;margin: 0px auto;display:block;border: none;" alt="" usemap="#planetmap"/>
  <map name="planetmap" id="planetmap">
  <area
  shape="circle"
  coords="190,380,110"
  href ="http://www.gugu123.cn/fmtg.html"
  alt="Sun" />

  </map>

自动适应屏幕调整区域坐标

<script type="text/javascript">
    adjust();  
    var timeout = null;//onresize触发次数过多,设置定时器  
    window.onresize = function () {  
        clearTimeout(timeout);  
        timeout = setTimeout(function () { window.location.reload(); }, 100);//页面大小变化,重新加载页面以刷新MAP  
    }

    //获取MAP中元素属性  
    function adjust() {  
        var map = document.getElementById("planetmap");  
        var element = document.getElementById("a_circle");

        var oldCoords = element.coords;  
          var newcoords = adjustPosition(oldCoords);  
          element.setAttribute("coords", newcoords); 
        var test = element;  
    }

    //调整MAP中坐标  
    function adjustPosition(position) {  
        var imageWidth = document.getElementById("img").width; 
        var imageHeigth = document.getElementById("img").height; 
        newPosition = parseInt(imageWidth*0.5) + ',' + parseInt(imageHeigth*0.6) + ','+parseInt(imageWidth*0.6/2);
        return newPosition;  
    }  
 </script>