HTML image hotspot automatically adjusts with image zoom

　　The idea is very simple, just set the coordinates corresponding to the coords to be scaled proportionally. Note that the given code is only adjusted once when the page is initially displayed, and is not adjusted when it changes again.

	<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>