HTML图像热区随图片缩放自动调整-蒲公英云

HTML图像热区随图片缩放自动调整

灰太狼 2022-04-08 09:29 317阅读 0赞

　　思路很简单，就是设置coords对应的坐标按比例缩放就可以了。注意，给出的代码只是页面初始显示时调整一次，再发生变化没有进行调整。

<img src="KnMap.png" alt="知识地图" id="KnMap" style="width:100%;height:auto;" border="0" usemap="#Map">
    <map name="Map">
      <area shape="rect" coords="146,172,271,248" href="open?id=1000000062">
      <area shape="rect" coords="483,240,578,316" href="open?id=1000000064">
      <area shape="rect" coords="614,546,709,618" href="open?id=1000000066">
      <area shape="rect" coords="60,552,180,623" href="open?id=1000000081">
      <area shape="rect" coords="593,740,757,827" href="open?id=1000000061">
      <area shape="rect" coords="253,931,624,1091" href="open?id=1000000054">
    </map>
    <script src="../js/jquery-1.11.1.min.js"></script>
    <script type="text/javascript">
        function resetHostArea(){
            var srcw="960",srch="1429";
            var noww=$("#KnMap").prop("clientWidth")*1.0;
            //var nowh=$("#KnMap").prop("clientHeight")*1.0;
            var scale = noww/srcw;
            var areas = $("area");
            var coords;
            areas.each(function(){
                coords = this.coords;
                coords = coords.split(",");
                coords = Math.round(coords[0]*scale)+","+Math.round(coords[1]*scale)+","+Math.round(coords[2]*scale)+","+Math.round(coords[3]*scale);
                this.coords=coords;
            });
        }
        $(function(){
            resetHostArea();
        });
    </script>