1. 程式人生 > >html圖片熱區(可自適應螢幕)

html圖片熱區(可自適應螢幕)

要做個五一活動,商城部門就給了個jpg,懶得切圖就弄的這個圖片熱點。直接熱區加連結。

做完了想起來了,還要跟app webview互動,白寫了。

還是分享出來。

<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>