比如现在UI同事给了你一张图【如下】，让你在点击这个图的每一个行星的时候进行页面跳转。
那么首先我们先引入这个图片：
<img src="planets.png" alt="Planets" usemap="#planetmap">
请注意一个特殊的属性：usemap。翻译成中文就是使用地图。其实map在html当中也是一个标签。我们想要在点击图片的某个区域进行跳转或者其他操作的时候就会关联到这个上面【你用js去计算不闲麻烦的话也可以】。
接下来我们来看这个map标签是怎么被img标签usemap关联上的。
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>
根据上面代码我们就可以很清楚的知道了是通过map标签的name属性与img标签的usemap保持一致而后关联上的【注意：img标签前面要加#号】
然后我们现在在学习一下这些英文单词，这样能对我们对这个map标签和area标签使用的更加顺手：
area：区域的意思
shape：形状的意思
coords：坐标的意思
那么我们根据它的这个就可以猜出：
1.首先img需要与map关联起来
2.map里的子标签area是用来说明点击范围然后要做什么事情的
3.shape是需要你说明你要点击的范围是什么形状【可选参数：rect(矩形)、circle(圆形)、poly(多边形)】
4.coords是需要你说明你要点击的形状他的坐标、半径参数。不同的形状coords传入的参数意义不同。具体如下：
1、矩形：(左上角顶点坐标为(x1,y1)，右下角顶点坐标为(x2,y2))
<area shape=“rect” coords=“x1,y1,x2,y2” href=url>
2、圆形：(圆心坐标为(X1,y1)，半径为r)
<area shape=“circle” coords=“x1,y1,r” href=url>
3、多边形：(各顶点坐标依次为(x1,y1)、(x2,y2)、(x3,y3) …)
<area shape=“poly” coords=“x1,y1,x2,y2 …” href=url>
当然现在很少有用这个进行跳转的了，大部分的需求都是点击某个区域进行xxx事情。所以，我们给他一个href属性：“javascript:;”，然后在给这个area加个点击事件即可~如下所示：
建议朋友们自己搞一个图片做个小demo玩一玩。就熟悉了。
<img src="./20200226201320876.png" width="145" height="126" alt="" usemap="#map">
<map name="map">
<area shape="rect" coords="0,0,82,126" href="javascript:;" alt="hah" onclick="areaClick()">
</map>
<script>
function areaClick(){
alert('哇哦!!!')
}
</script>
