地圖熱區随螢幕大小改變

今天學習了地圖熱區的制作，熱區随頁面大小換算

先給圖檔添加map

<div>
<img src='fg.png' width='100%' heigh='100%' usemap='#pagemap' />
<map id="CribMap" name="pagemap">
   <area shape="poly" id="41" coords="244,90,244,210,322,210,295,150,322,90" href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  title="鳳德嶺"
/>
   <area shape="poly" id="43" coords="350,90,350,210,433,210,461,150,405,90" href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  title="天堂圍"
/>
   <area shape="poly" id="42" coords="241,240,241,360,309,360,322,300,295,240" href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  title="竹塘"
 />
   <area shape="poly" id="44" coords="240,390,240,510,364,510,350,450,336,390" href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  title="黃洞"
 />
</map>
</div>
           

圖檔大小随頁面變化，用js換算

<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("CribMap");
            var element = map.childNodes;
            var itemNumber = element.length / 2;
            for (var i = 0; i < itemNumber - 1; i++) {
                var item = 2 * i + 1;
                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 = 1160;	//圖檔的長寬
            var imageHeigth = 990;
 
            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>
           

轉載自https://blog.csdn.net/crystalwood/article/details/13533401#commentBox