在HTML中，可以在Img标签中使用Map，可以设置图像热区（可点击区域），但是在不同的分辨率上表现不一致。记录一下获取coords锚点和适配不同分辨率的方法。

在HTML，在<img>中使用<map>时，设置<area>的coords，需要找到锚点，获取方式如下：

获取锚点

引入JQuery(如果项目中未使用JQuery，可以只在获取锚点时引用，获取锚点后移除引用)，在<script>中设置如下代码：

1
2
3
4
5
6

        function deal(e){
            console.log(e.offsetX+":"+e.offsetY);
        }
        $("#img9").mousemove(function(e) { // img9 需要改为你的img id
            deal(e);
        });

设置好后，用浏览器打开HTML，打开开发者控制台，在图片上移动鼠标会在console打印锚点位置。（此时请记录当前获取锚点时页面的width，锚点自适应分辨率时需要用到此宽度）。

设置自适应锚点（重计算锚点，图像热区）

自适应锚点代码（Native JS代码）如下：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

        window.onload = function () {
            var ImageMap = function (map) {
                    var n,
                        areas = map.getElementsByTagName('area'),
                        len = areas.length,
                        coords = [],
                        previousWidth = [获取锚点时的页面宽度]; // 即你当时是以什么样的宽度来获取锚点的
                    for (n = 0; n < len; n++) {
                        coords[n] = areas[n].coords.split(',');
                    }
                    this.resize = function () {
                        var n, m, clen,
                            x = document.body.clientWidth / previousWidth;
                        for (n = 0; n < len; n++) {
                            clen = coords[n].length;
                            for (m = 0; m < clen; m++) {
                                coords[n][m] *= x;
                            }
                            areas[n].coords = coords[n].join(',');
                        }
                        previousWidth = document.body.clientWidth;
                        return true;
                    };
                    window.onresize = this.resize;
                };
            var  imageMap = new ImageMap(document.getElementById('[map id]'));
            imageMap.resize();
        }