- <div>
- <span id="lbresult">
- <img src='YardCribGraphic.aspx' width='100%' heigh='100%' usemap='#b0a1a239cbf34d64acf4d6798dd67da0' border='0'/>
- <map id="CribMap" name="b0a1a239cbf34d64acf4d6798dd67da0">
- <area shape="poly" id="41" coords="244,90,244,210,322,210,295,150,322,90" href="#" title="垛位名:南2垛位"
- />
- <area shape="poly" id="43" coords="350,90,350,210,433,210,461,150,405,90" href="#" title="垛位名:垛位3"
- />
- <area shape="poly" id="42" coords="241,240,241,360,309,360,322,300,295,240" href="#" title="垛位名:北垛位2"
- />
- <area shape="poly" id="44" coords="240,390,240,510,364,510,350,450,336,390" href="#" title="垛位名:三堆場001"
- />
- </map></span>
- </div>
圖片大小隨頁面變化,需要MAP中每個area的座標也隨頁面等比例變化。
Javascript實現:
- <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;<span style="white-space:pre"> </span>//圖片的長寬
- 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>