map 必须跟img进行绑定
img中需要使用usemap添加热点地址 "#name"
<area shape="形状" coords=" 位置" href="跳转网站路径"></area>
shape：矩形（rect）,圆形（circle），多边形（poly）
coords：图形位置坐标点
href：跳转的路径
详细代码介绍:
<img src="" alt="" usemap="#test">
<map name="test" id="test">
<!--circle:圆形，r:圆形半径--!>
<area shape="circle" coords="x,y,r" href="" alt="">
<!--rect:矩形，x1,y1:矩形一个角的坐标，x2,y2：对角的坐标--!>
<area shape="rect" coords="x1,y1,x2,y2" href="" alt="">
<!--poly:多边形形--!>
<area shape="poly" coords="x1,y1,x2,y2,~Xn,Yn" href="" alt="">
</map>
area元素永远嵌套在map元素的内部。area元素可定义图像映射中的区域
<img>中的usemap属性可引用<map>中的id或name属性（取决于浏览器），
所以我们应同时向<map>添加id和name属性
示例：
<html>
.
.
.
<img src="../c.jpg" alt="" usemap="#test">
<map name="test" id="test">
<!-- circle:圆形 -->
<area shape="circle" coords="20,20.20" href="http://www.jd.com" alt="">
<!-- rect:矩形 -->
<area shape="rect" coords="100,117,237,170" href="http://www.taobao.com" alt="">
<!-- poly：多边形 -->
<area shape="poly" coords="216,28,216,98,255,47,175,80" href="http://www.tianmao.com" alt="">
</map>
.
.
</html>