<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>
HTML图像热区随图片缩放自动调整
思路很简单,就是设置coords对应的坐标按比例缩放就可以了。注意,给出的代码只是页面初始显示时调整一次,再发生变化没有进行调整。
猜你喜欢
转载自wallimn.iteye.com/blog/2364739
今日推荐
周排行