我们先创建一个图片超链接，点击图片可跳转到百度
<a href="http://baidu.com"> <img src="../../img/banner01.jpg" width="500" height="100" /> </a>
而有时我们希望一张图片上面可以添加多个链接，比如一个地图，点击不同的省份，跳转到不同的网页，或者一张合影照片，点击不同的头像，跳转到不同的个人主页，此时会用到图片映射。
HTML 映射<map>
首先通过img引用一张图片，并通过usemap指明所用映射的名称，如a，
然后创建一个name为a的映射map，
这样图片和映射就关联起来了
<img src="../../img/banner01.jpg" usemap="a" alt="焦点图" /> <map name="a"> <area shape="rect" coords="0,0,100,100" href="http://baidu.com"> <area shape="circle" coords="200,200,100" href="http://www.qq.com/"> <area shape="poly" coords="700,0,500,400,800,400" href="http://taobao.com"> </map>
HTML 映射－area
每个area对应图片中一块区域，
area 通过shape和coords选择图片中的一块区域，通过设置href，指定此区域对应的超链接。
shape为rect矩形时，coords＝"x,y,w,h"
x：代表矩形的横坐标，图片左上角为原点（0，0）
y：代表矩形的纵坐标
w：代表矩形的宽度
h：代表矩形的高度
shape为circle圆形时，coords＝"x,y,r"
x：代表圆心的横坐标
y：代表圆心的纵坐标
r：代表圆形的半径
shape为poly多边形时，coords＝"x1,y1,x2,y2.....,xn,yn"
xn：第n个点的横坐标
yn：第n个点的纵坐标
n个点依次链接起来，即构成一个多边形
