在一些图片上需要加入异形链接，例如下图，按钮过于不规则，无法用a标签来实现，我们就可以通过图片热区实现，通过对图片追加map属性实现自定义的热区。这在过去式非常实用的办法，但现在用户的浏览需求越来越多样化，不再局限于pc屏幕上的固定尺寸，还有可能是平板电脑、手机，尺寸无法固定。
而图片热区是不支持通过百分比来实现的，这对页面的多终端访问造成了障碍。
不过强大的js可以帮助我们，通过js获得屏幕及图片尺寸，并对热区进行重计算来实现热区的尺寸变化。
下面是代码，要注意其中图片尺寸的设置。
折叠XML/HTML 代码
- <img src="/skin/images/nav.png" alt="" width="375" usemap="#Map" style="float:left"/>
- <map name="Map" id="CribMap">
- <area shape="poly" coords="290,404,221,561,360,580,372,494,371,406" href="#1">
- <area shape="poly" coords="65,402,225,340,244,374,281,398,213,556,125,495" href="#2">
- <area shape="poly" coords="181,249,173,287,181,332,19,395,4,292,23,183" href="#3">
- <area shape="poly" coords="227,240,68,172,128,85,221,23,283,185,251,203" href="#4">
- <area shape="poly" coords="293,179,230,18,302,5,372,4,372,178,336,171" href="#5">
- </map>
- </div>
- </div>
- <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 = 464; //图片的长宽
- var imageHeigth = 830;
- 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>
Tags： 自适应
