既然是讲到图像，那就先介绍一下 HTML 中有关图像的元素：（ 根据W3标准 ，元素不推荐的 属性 不做分析 ）
<img>元素------向网页中嵌入一幅图像
img元素的属性：
(1)src：图片来源URL。
(2)alt: 规定图像的替代文本。
(3)height和单位为像素，如果不指定，则为默认；如果只指定height或width，则自动调整大小。
(4)ismap ：将图像定义为服务器端图像映射。
(5)usemap：将图像定义为客户器端图像映射。
(6)longdesc： 指向包含长的图像描述文档的 URL。
<map>元素------定义一个客户端图像映射( image-map )
map元素的属性：
(1) id: 为 map 标签定义唯一的名称。
(2)name: 为 image-map 规定的名称。
注意：<img>中的 usemap 属性可引用 <map> 中的 id 或 name 属性（取决于浏览器），所以应同时向 <map> 添加 id 和 name 属性。
<area> 元素------定义图像映射中的区域
area元素的属性：
(1)alt: 规定图像的替代文本。
(2)shape：用于描述区域的形状，rectpolycircledefault可选,default指的是还没有被定义的区域。
(3)coords：指定区域的坐标。比如矩形有4个坐标，前两个是左上角的x,y坐标，后两个是右下角的x,y坐标。
(4)href和nohref：href指定目的的链接，如果不指定href属性，则需要指定nohref，nohref="nohref"
(5)target：和<a>标签的作用一样。
注意：area 元素永远嵌套在 map 元素内部。
在熟悉以上三个元素之后，再来讨论图像链接 与 图像映射 的区别：
图像链接：
在图像上插入链接：点击图片，跳转页面：<a></a>之间插入<img/>元素.
<a href="http://www.w3school.com.cn/"> <img src="http://img4.3lian.com/sucai/img6/230/29.jpg" alt="Alternate Text"> </a>
图像映射：
(1)服务器端图像映射：将点击的坐标发送给服务器，由服务器的脚本来决定。（ismap）
(2)客户端图像映射：根据点击位置不同确定链接目的。(usemap) (此处只分析客户端图像映射)
注意点：在<img>中设置usemap属性；在<map>中设置name属性。
应用：
1)、整张图片映射同一个区域（此时和图片链接没有什么差异）
<img src="http://scimg.jb51.net/allimg/150624/11-1506241135512L.jpg" alt="Animal" usemap="#animalmap" width="200" height="200"/>
<map name="animalmap" id="animalmap">
<area shape="rect" coords="0,0,200,200" href="http://www.w3school.com.cn/" target="_blank" alt="animal" />
</map>
2）、整张图片映射到几个不同的区域 （ 几个区域就有几个area ）
<img src="/i/eg_planets.jpg" border="0" usemap="#planetmap" alt="Planets" /> <map name="planetmap" id="planetmap"> <area shape="circle" coords="180,139,14" href ="/example/html/venus.html" target ="_blank" alt="Venus" /> <area shape="circle" coords="129,161,10" href ="/example/html/mercur.html" target ="_blank" alt="Mercury" /> <area shape="rect" coords="0,0,110,260" href ="/example/html/sun.html" target ="_blank" alt="Sun" /> </map>
3）、给图片局部区域加链接
<img src="http://scimg.jb51.net/allimg/150624/11-1506241135512L.jpg" width="230" height="32" usemap="#click_enter"/>
<map name="click_enter" id="click_enter">
<area shape="rect" coords="9,9,64,28" alt="点击进入" href="http://www.w3school.com.cn" />
</map>
常反思，常回顾，温故而知新！
推荐 ：更多代码详解，请转到代码仓库：https://github.com/Tina-xy/HTML