html图片热区（可自适应屏幕）

时间：2022-02-20 00:50:58 作者：夏天咯来源：CNDS 阅读：141 评论：0

内容摘要：<body><imgsrc="images/top.jpg"width="100%"border="0"usemap="#Map"><mapname="Map"id=...

<body>
<!--看好map的id，img的width，在编辑器里画热区的时候是图片自己的宽度，画好之后改成100%-->
 <img src="images/top.jpg" width="100%" border="0" usemap="#Map">
<map name="Map" id = "CribMap"><area shape="rect" coords="46,633,598,845" href="/static/forAPP/sell/superBuy/super_detail.html?id=6c8c917148344769afc53d676527fb">
<area shape="rect" coords="42,881,594,1069" href="/static/forAPP/sell/superBuy/super_detail.html?id=a35dda9ab4f14d3386eb698752c94e">
<area shape="rect" coords="50,1093,586,1293" href="/static/forAPP/sell/superBuy/super_detail.html?id=89258ebfd0784e3db19355c6ae4ebc">
<area shape="rect" coords="66,2045,310,2389" href="/static/forAPP/sell/superBuy/super_detail.html?id=c9ed50656cca487c9e20b25480cc5d">
<area shape="rect" coords="342,2049,586,2393" href="/static/forAPP/sell/superBuy/super_detail.html?id=e24148da3b1a44f083169df9b77073">
<area shape="rect" coords="62,2409,302,2745" href="/static/forAPP/sell/superBuy/super_detail.html?id=4b3836a585864915a56e66742a258d">
<area shape="rect" coords="338,2413,590,2753" href="/static/forAPP/sell/superBuy/super_detail.html?id=6bf516b8e574471dbb35a155a8cbc1">
<area shape="rect" coords="26,2921,590,3141" href="/static/forAPP/sell/superBuy/super_detail.html?id=51360901b5fe411aa1e4002e07917b">
<area shape="rect" coords="26,3177,598,3409" href="/static/forAPP/sell/superBuy/super_detail.html?id=b21f6ba7b319425e82fd44261929d2">
<area shape="rect" coords="26,3457,586,3677" href="/static/forAPP/sell/superBuy/super_detail.html?id=11fefbdbb2fd4f5ba347e1fead9a46">
<area shape="rect" coords="26,3709,582,3945" href="/static/forAPP/sell/superBuy/super_detail.html?id=a16404ace3d943a0b2bfd8197f600c">
<area shape="rect" coords="22,3981,586,4197" href="/static/forAPP/sell/superBuy/super_detail.html?id=2ebe02496d154508971a467326e4aa">
<area shape="rect" coords="18,4229,582,4465" href="/static/forAPP/sell/superBuy/super_detail.html?id=5a586a7f55f64edc9da72c60a5cde1">
<area shape="rect" coords="58,4681,586,5265" href="/static/forAPP/sell/superBuy/super_detail.html?id=10d63ecacdbe49ba9ca02ff1695f82">
<area shape="rect" coords="50,5341,294,5665" href="/static/forAPP/sell/superBuy/super_detail.html?id=22d40f071e2f46979039d20d8f5f66">
<area shape="rect" coords="322,5341,578,5669" href="/static/forAPP/sell/superBuy/super_detail.html?id=5fb8455810594f6493348e07b5db7e">
<area shape="rect" coords="46,5693,286,6021" href="/static/forAPP/sell/superBuy/super_detail.html?id=c057c5b900064f7ea2f8f31a90e2b6">
<area shape="rect" coords="318,5693,578,6009" href="/static/forAPP/sell/superBuy/super_detail.html?id=1e657dd4c50647b092279e3264616a">
<area shape="rect" coords="30,6093,594,6385" href="/static/wechat/src/index/shop/shop_index/shop_index.html">
<area shape="rect" coords="314,6229,322,6297" href="/static/forAPP/sell/superBuy/super_detail.html?id=22d40f071e2f46979039d20d8f5f66">
</map>
 <script>
   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("CribMap");  
            var element = map.childNodes;  
            var itemNumber = element.length / 2;  
            for (var i = 0; i < itemNumber - 1; i++) {  
//element 是奇数时，item 是2*i+1，偶数时是2*i
                var item = 2 * i ;  
                var oldCoords = element[item].coords;  
                var newcoords = adjustPosition(oldCoords);  
                element[item].setAttribute("coords", newcoords);  
            }  
            var test = element;  
        }  
  
        //调整MAP中坐标  
        function adjustPosition(position) {  
            var pageWidth = document.body.clientWidth;//获取页面宽度  
            var pageHeith = document.body.clientHeight;//获取页面高度  
  
            var imageWidth = 640;//图片的真实长宽  
            var imageHeigth = 6438;  
  
            var each = position.split(",");  
            //获取每个坐标点  
            for (var i = 0; i < each.length; i++) {  
                each[i] = Math.round(parseInt(each[i]) * pageWidth / imageWidth).toString();//x坐标  
                i++;  
                each[i] = Math.round(parseInt(each[i]) * pageHeith / imageHeigth).toString();//y坐标  
            }  
            //生成新的坐标点  
            var newPosition = "";  
            for (var i = 0; i < each.length; i++) {  
                newPosition += each[i];  
                if (i < each.length - 1) {  
                    newPosition += ",";  
                }  
            }  
            return newPosition;  
        }  
        
        
 </script>
 </body>