HTML 图片映射<map>标签整理

背景

• 今天涉及到一个知识点的学习，就是在大流量的今天，尽可能减少HTTP的资源请求数目，以保证页面的加载速度，所以牵扯到了图片映射这个概念，简作整理…

概念

• 定义和用法
  定义一个客户端图像映射。图像映射（image-map）指带有可点击区域的一幅图像。

• 优势
  热点链接可以帮你解决。这种效果的实质是把一幅图片划分为不同的热点区域，再让不同的区域进行超链接。

• 使用
  需要使用HTML的<img>标签、<map>标签和<area>标签

• 提示和注释：
  注释：area 元素永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域。
  注释：<img>中的 usemap 属性可引用 <map> 中的 id 或 name 属性（取决于浏览器），所以我们应同时向<map> 添加 id 和 name 属性。

使用技巧

(1).标签书写规范

<img src="图形文件名" usemap="#图的名称">     <map name="图的名称">     <area shape=形状 coords=区域座标列表 href="URL资源地址">      <!--可根据需要定义多少个热点区域-->      <area shape=形状 coords=区域座标列表 href="URL资源地址">     </map>

(2). <map> 标签属性介绍：

属性 取值 描述 coords 坐标值 定义可点击区域（对鼠标敏感的区域）的坐标 href URL 定义此区域的目标 URL shape default，rect(矩形)，circle(圆形),poly(多边形) 定义热点形状 target _blank，_parent，_self,_top 规定在何处打开 href 属性指定的目标 URL

(3). coords – 定义区域点的坐标

• a.矩形：必须使用四个数字，前两个数字为左上角座标，后两个数字为右下角座标
  例：<area shape=rect coords=100,50,200,75 href="URL">
• b.圆形：必须使用三个数字，前两个数字为圆心的座标，最后一个数字为半径长度
  例：<area shape=circle coords=85,155,30 href="URL">
• c.任意图形（多边形）：将图形之每一转折点座标依序填入
  例：<area shape=poly coords=232,70,285,70,300,90,250,90,200,78 href="URL">
• d. 注释：如果某个 area 标签中的坐标和其他区域发生了重叠，会优先采用最先出现的 area 标签。浏览器会忽略超过图像边界范围之外的坐标。

示例代码

• 对下面的一张图片，选取了四个圆形区域，做了热点定位.

<img src="__MIMG__/img_map.png"      id="img_map" style="width: 869px"      border="0" usemap="#planetmap" alt="Planets" /><map name="planetmap" id="planetmap">    <area shape="circle" coords="95,98,98"  alt="man" />    <area shape="circle" coords="322,98,98"  alt="maze" />    <area shape="circle" coords="548,98,98"  alt="$$" />    <area shape="circle" coords="772,98,98"  alt="star" /></map>

附录

• 参考文章（一）
• 参考文章（二）
• 定位切图文章学习 (http://blog.csdn.net/dalancon/article/details/13623405)
• 推荐- 截图/取色器软件(picpick) [链接：http://pan.baidu.com/s/1c1SRWty 密码：15o9]