HTML图像热区随图片缩放自动调整

　　思路很简单，就是设置coords对应的坐标按比例缩放就可以了。注意，给出的代码只是页面初始显示时调整一次，再发生变化没有进行调整。

	<img src="KnMap.png" alt="知识地图" id="KnMap" style="width:100%;height:auto;" border="0" usemap="#Map">
	<map name="Map">
	  <area shape="rect" coords="146,172,271,248" href="open?id=1000000062">
	  <area shape="rect" coords="483,240,578,316" href="open?id=1000000064">
	  <area shape="rect" coords="614,546,709,618" href="open?id=1000000066">
	  <area shape="rect" coords="60,552,180,623" href="open?id=1000000081">
	  <area shape="rect" coords="593,740,757,827" href="open?id=1000000061">
	  <area shape="rect" coords="253,931,624,1091" href="open?id=1000000054">
	</map>

	<script src="../js/jquery-1.11.1.min.js"></script>
	<script type="text/javascript">
		function resetHostArea(){
			var srcw="960",srch="1429";
			var noww=$("#KnMap").prop("clientWidth")*1.0;
			//var nowh=$("#KnMap").prop("clientHeight")*1.0;
			var scale = noww/srcw;
			var areas = $("area");
			var coords;
			
			areas.each(function(){
				coords = this.coords;
				coords = coords.split(",");
				coords = Math.round(coords[0]*scale)+","+Math.round(coords[1]*scale)+","+Math.round(coords[2]*scale)+","+Math.round(coords[3]*scale);
				this.coords=coords;
			});
		}
		
		$(function(){
			resetHostArea();
		});
	</script>