如何通过HTML中的map标签给一个图片添加多个超链接，并且coodr属性跟随屏幕大小自动改变，移动端也同样适用！

前两天公司和其他公司合作搞个活动，暂时需要一个页面上放一张海报，并且海报上多处区域要可以点击，

当时自己想到的是利用map标签生成区域热点，但是分辨率不同热点区域在不同区域不准确。最后通过简单的几行jq搞定了。

代码如下

<div style="margin:0 auto"><img src="__STATIC__/images/concert_hall_02.jpg" width="100%"></div>
	<map name="cncerthall" id="cncerthall">
		<area shape="rect" class="img" coords="15,850,733,1230" href="javascript(0)" alt="口琴小谈"><!-- 口琴小谈 -->
		<area shape="rect" class="img" coords="15,1314,733,1676" href="javascript(1)"><!-- 日本专场 -->
		<area shape="rect" class="img" coords="15,1759,733,2137" href="javascript(2)"><!-- 梁大难小提琴独奏音乐会 -->
		<area shape="rect" class="img" coords="15,2219,733,2598" href="javascript(3)"><!-- 交响音乐会 -->
		<area shape="rect" class="img" coords="15,2673,733,3047" href="javascript(4)"><!-- 室内音乐会 -->
		<area shape="rect" class="img" coords="15,3151,733,3520" href="javascript(5)"><!-- 小提琴与双簧管 -->
		<area shape="rect" class="img" coords="15,3601,733,3967" href="javascript(6)"><!-- 梦系红楼 -->
		<area shape="rect" class="img" coords="15,4051,733,4435" href="javascript(7)"><!-- 名曲新韵 -->
	</map>

<script>
$(function(){
  //根据分辨率自适应热区坐标
    var width = document.body.offsetWidth;
    var height = document.body.offsetHeith;
    //if (750 == width) return;
    var percent = width/750;//“750”是海报的width，根据在ps上获取的x，y点坐标乘以设备和海报图得到的比例即可。
    $('.img').each(function(){
        var coords = $(this).attr("coords");
        var arr = coords.split(",");
        for(var i=0;i<arr.length;i++){
            arr[i] *= percent;
        }
        var str = arr.join(",");
        $(this).attr("coords",str);
    });

});
</script>

其中，map标签的使用不懂可以看手册，通过此jq可以根据设备屏幕的大小，自动改变热点的位置。