html JS：HTML：html区域地图，在hove和color上突出显示

Posted 2021-05-11

<img id="genplan" src="img/genplan.png" border="0" width="338" height="424" orgWidth="338" orgHeight="424" usemap="#genplan" alt="" />
<map name="genplan" id="ImageMapsCom-genplan">
	<area shape="rect" coords="336,422,338,424" alt="" style="outline:none;" title="" href="#" />
	<area id="genplan-1" alt="" title="" href="#" shape="poly" coords="7,91,1,96,138,68,126,40,107,29,71,33,34,38,10,42,3,44,2,86" style="outline:none;" target="_self" data-maphilight='{"stroke":false,"fillColor":"cbf68c","fillOpacity":0.6}' />
	<area id="genplan-2" alt="" title="" href="#" shape="poly" coords="0,145,139,120,136,67,4,94" style="outline:none;" target="_self"data-maphilight='{"stroke":false,"fillColor":"96ca2d","fillOpacity":0.5,"alwaysOn":true}' />
	<area id="genplan-3" alt="" title="" href="#" shape="poly" coords="0,194,145,168,140,120,2,146" style="outline:none;" target="_self" data-maphilight='{"stroke":false,"fillColor":"cbf68c","fillOpacity":0.6}'/>
	<area id="genplan-4" alt="" title="" href="#" shape="poly" coords="0,243,122,222,134,214,142,206,146,197,146,184,144,169,3,195" style="outline:none;" target="_self" data-maphilight='{"stroke":false,"fillColor":"cbf68c","fillOpacity":0.6}'/>
	<area id="genplan-5" alt="" title="" href="#" shape="poly" coords="282,0,291,37,166,59,164,49,164,36,168,28,176,20,191,15,207,12" style="outline:none;" target="_self" data-maphilight='{"stroke":false,"fillColor":"cbf68c","fillOpacity":0.6}'/>
	<area id="genplan-6" alt="" title="" href="#" shape="poly" coords="299,68,291,35,166,60,170,91" style="outline:none;" target="_self" data-maphilight='{"stroke":false,"fillColor":"cbf68c","fillOpacity":0.6}'/>
	<area id="genplan-7" alt="" title="" href="#" shape="poly" coords="306,101,298,68,171,92,172,124" style="outline:none;" target="_self" data-maphilight='{"stroke":false,"fillColor":"cbf68c","fillOpacity":0.6}'/>
	<area id="genplan-8" alt="" title="" href="#" shape="poly" coords="313,132,305,102,171,125,175,160" style="outline:none;" target="_self" data-maphilight='{"stroke":false,"fillColor":"cbf68c","fillOpacity":0.6}'/>
	<area id="genplan-9" alt="" title="" href="#" shape="poly" coords="321,164,313,134,174,160,178,191" style="outline:none;" target="_self" data-maphilight='{"stroke":false,"fillColor":"cbf68c","fillOpacity":0.6}'/>
	<area id="genplan-10" alt="" title="" href="#" shape="poly" coords="329,200,321,167,180,192,183,225" style="outline:none;" target="_self" data-maphilight='{"stroke":false,"fillColor":"ffffa6","fillOpacity":0.5,"alwaysOn":true}'/>
	<area id="genplan-11" alt="" title="" href="#" shape="poly" coords="337,234,328,199,183,226,185,239,192,248,202,255,216,258" style="outline:none;" target="_self" data-maphilight='{"stroke":false,"fillColor":"cbf68c","fillOpacity":0.6}'/>
	<area id="genplan-12" alt="" title="" href="#" shape="poly" coords="186,415,161,290,164,288,152,290,138,300,130,306,125,325,132,356,147,421,145,424" style="outline:none;" target="_self" data-maphilight='{"stroke":false,"fillColor":"cbf68c","fillOpacity":0.6}'/>
	<area id="genplan-13" alt="" title="" href="#" shape="poly" coords="164,289,187,415,230,406,207,281" style="outline:none;" target="_self" data-maphilight='{"stroke":false,"fillColor":"cbf68c","fillOpacity":0.6}'/>
	<area id="genplan-14" alt="" title="" href="#" shape="poly" coords="230,406,271,396,252,293,244,282,234,279,220,279,206,282" style="outline:none;" target="_self" data-maphilight='{"stroke":false,"fillColor":"cbf68c","fillOpacity":0.6}'/>
</map>

<script>
  //	http://davidlynch.org/projects/maphilight/docs/
  $(function() {
      $('#genplan').maphilight();
  });
</script>