要做个五一活动，商城部门就给了个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>