html圖片熱區（可自適應螢幕）
阿新 • • 發佈：2019-02-06
要做個五一活動，商城部門就給了個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 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>