前言
不知道大家有没有遇到一张图片上面有很多个商品展示图，需要给每个商品添加一个链接，点击跳转到各自商品详情页。
这个需求在前端其实有一个专业的术语“图像地图”，大家先看看w3c简单示例
<img src="planets.jpg" border="0" usemap="#planetmap" alt="Planets" />
<map name="planetmap" id="planetmap">
<area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" />
<area shape="circle" coords="129,161,10" href ="mercur.html" alt="Mercury" />
<area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" />
</map>
上图，点击各个星球，会做不同跳转。
基础知识
代码主要是img标签上的usemap属性，关联下方的map标签。map有多个area，area就是点击的区域，coords是坐标（如矩形x1,y1,x2,y2），shape是区域类型：
1、圆形（circ 或 circle）
shape=“circle”，coords=“x,y,z”
这里的 x 和 y 定义了圆心的位置（“0,0” 是图像左上角的坐标），r 是以像素为单位的圆形半径。
2、多边形（poly 或 polygon）
每一对 “x,y” 坐标都定义了多边形的一个顶点（“0,0” 是图像左上角的坐标）。定义三角形至少需要三组坐标；高纬多边形则需要更多数量的顶点。
多边形会自动封闭，因此在列表的结尾不需要重复第一个坐标来闭合整个区域。
3、矩形（rect 或 rectangle）
shape=“rectangle”，coords=“x1,y1,x2,y2”
第一个坐标是矩形的一个角的顶点坐标，另一对坐标是对角的顶点坐标，“0,0” 是图像左上角的坐标。请注意，定义矩形实际上是定义带有四个顶点的多边形的一种简化方法。
进阶
想法
下面我们回到正题：“一张图片上面有很多个商品展示图，需要给每个商品添加一个链接，点击跳转到各自商品详情页”，这个需求上面。
想法：
1、监听鼠标事件，点击记录起点位置，也就是coords左上角的坐标
2、鼠标移动至松开鼠标，记住最后位置，也就是coords右下角的坐标
3、这样2个点就是构成一个矩形，然后坐标生成img标签的map，实现点击链接
ok，有了想法，开始我们的表演
表情