map标签与area标签构建映射图片解析

目录：

1. 需求分析
2. map标签的用途
3. 语法学习地址
4. 参考实例
5. 如何获取coords点的坐标
6. 编写实例
7. 图片，热区域自适应

一、需求分析

在给的UI设计图，有两个a标签或者button,以往需要将其分成三部分背景图，两个下载按钮
需要将背景图放于一div中，按钮相对背景图做定位或者其它方式.

它的优点：按钮点击的动态效果可以自行添加，美观；

它的缺点：自适应适配难做，设备宽度有大有小，按钮的定位在某些程度上会存在偏差； 花费时间长；简单功能复杂化；

优化方案

使用map标签，area标签，img标签，Adobe Dreamweaver软件绘制获取原始热力点坐标，js动态处理图片宽度变化热区域点坐标，完全自适应；

它的优点：完美自适应，不需要切图，拼图；

它的缺点：按钮点击的动态效果单一；

二.map标签的用途

定义一个客户端图像映射。图像映射(image-map) 指带有可点击区域的一幅图像
map与img标签绑定使用，常备用来赋予给图像某处特殊的含义，点击该区域可进行跳转；
area标签存在于map标签中，且至少存在一个；
area的主要属性有alt、coords、href、shape、target等

alt属性 ：

在未显示图像的浏览器上显示代替的文本字符串。这个文本应该能传达给用户与显示图像而没有文本的情况下同等的选择

coords属性：

给热点区域设定具体的坐标值。这个值的数值和意义取决于这个值所描述的形状属性.。对于矩形或长方形, 这个coords 值为两个X,Y对：左上、右下。 对于圆形, 这个值是 x,y,r ，这里的 x,y 是一对确定圆的中心的坐标而 r 则表示的是半径值.。对于多边和多边形，这个值是用x,y对表示的多边形的每一个点：x1,y1,x2,y2,x3,y3,等等，HTML5里, 只可能是像素的数量。  

自解coords：这个属性的各个点的坐标获取其实与精灵图类似。除过圆特殊（x,y）坐标是圆心距离原始图片左上角的水平和垂直像素大小，r指半径的像素大小。