HTML5图像映射

为图片建立超链接（img元素）

由于img元素是行内级元素，所以可以使用a元素为图片定义超链接。当用户单机图片是就会跳转到链接所指向的文档。

    <a href="***.html">
         <img src="images/***.png">
    </a>

创建图像映射

可以为某个部位创建一个称为“热点”的区域，每个热点就是一个映射，当用户单击不同热点时就可以跳转到不同的网页。
使用area元素定义图像中的热点区域，然后使用map元素将热点区域与img元素关联起来。

<img src="test.png" usemap="#testmap" alt="" />
<map name="testmap" id="test">    usemap对应name
    <area shape="circle" coords="100,100,100" href="test1.html" alt="" />
    <area shape="rect" coords="126,200,300,20" href="test2.html" alt="" />
    <area shape="poly" coords="0,100,100,50,60,90" href="test3.html" alt="" />
</map>

解析：

1. shape 定义热点的形状
   shape="circle" 多边形
   shape="rect" 矩形
   shape="poly" 多边形

2. coords 定义区域点的坐标
   1） rect 矩形， 规定有四个值，前两个表示左上角的坐标，后两个值表示右下角的坐标值
   2） circle 圆形，规定有三个值，前两个数表示圆心坐标，最后一个值表示圆的半径长度
   3） poly 多边形（任意图形），规定的值即为图形的每一个转折点的坐标值

图像映射分为在服务器上分析和在客户端浏览器中分析两种。前者称为客户端图像映射，后者称为服务端图像映射。