图片热点功能很古老，是html中非常实用的工具

<!--先设置一个usemap属性，然后下面的map利用这个名字加以连接-->
<img src="xxx.png" usemap="#map"
<map name="map">
  <!--设置一个圆形的坐标相对于图片为（20，20），半径为20的圆形区域 ，onFocus="this.blur()" 去掉虚线框-->
  <area shape="circle" coords="20,20,20" title="1111111" href="xxxx" onFocus="this.blur()">
  <!--设置一个左上角坐标为（100，100），右下角坐标为（200，200）用来定位矩形的位置-->
  <area shape="rect" coords="100,100,200,200" title="222222222" href="xxxx">
  <!--设置一个不规则区域-->
  <area shape="poly" coords="0,0,200,0,200,200,100,300,0,200" href="xxxx" title="3333333333">
</map>

有些功能 用图片热点非常省时省力

比如并排的分享按钮，都省去定位 省得写一堆css了

可能是因为很多高手现在都手写代码，搞不懂座标吧