一、为图片建立超链接（img元素）
由于img元素是行内级元素，所以可以使用a元素为图片定义超链接。当用户单机图片是就会跳转到链接所指向的文档。
<a href="***.html">
<img src="images/***.png">
</a>
问题引申：有时会想在一副图片的某几个部位建立超链接。例如，有一个关于宠物的网页，该网页上有一个宠物如偏，此时可能想介绍该宠物某些部位的一些特点，如圆圆的耳朵、漂亮的斑纹。这时，用户单击这些部位，就会显示出不同的网页对该部位做一个特殊的说明。
方法：1.将宠物图片分割成更小的图片，然后再在网页上拼接起来，为不同部位的图片各自建立一个连接。
2.创建图像映射：它可以为某个部位创建一个称为“热点”的区域，每个热点就是一个映射，当用户单击不同热点时就可以跳转到不同的网页。
方法2相比较于方法1，可以省去很多切割图片和拼合图片的时间。
概念：1.热点：热点可以是图形上具有某种形状的一块区域或是一个文本，它也是一种超链接。当访问者单击该区域或文本时，超链接所指向的文档会显示在浏览器中。热点 的相撞可以使长方形、圆形或多边形。（热点在浏览器中是不可见的，但鼠标移动到热点上时就会改变指针状态，从而可以标示这是个链接）
2.客户端图像映射：包含一个或多个热点的图形。
图像映射分为在服务器上分析和在客户端浏览器中分析两种。前者称为客户端图像映射，后者称为服务端图像映射。
二、创建图像映射（map元素、area元素）
可以使用area元素定义图像中的热点区域，然后使用map元素将热点区域与img元素关联起来。因为map元素包含一组定义图像中热点区域的area元素，从而将area元中定义的热点区域与img元素关联起来。
<img src="images/dog.png" usemap="#myMap" width="175" height="72" alt="这是一个dog的图片">
<map name="myMap">
<area shape="circle" coords="123,18,14" href="head.html" title="头部">
<area shape="rect" coords="47,15,100,43" href="body.html" title="躯干">
<area shape="poly" coords="41,22,40,12,29,12,16,13,0,22,1,34,1,37" href="tail.html" title="尾部">
<area shape="poly" coords="33,30,15,39,2,47,4,59,16,67,27,73,46,51" href="leg.html" title="腿部">
<area shape="poly" coords="106,310,102,39,106,46,124,51,138,52,143,43,138,36" href="leg.html" title="腿部">
</map>
1.使用Dreamwearver创建图像映射。（略）
2.使用HTML定义图像映射
在HTML中实际是map元素和area元素在起作用来定义图像映射的，Dreamweaver只是使创建的过程更简单。
（1）area元素
两个属性：shape属性和coords属性。
shape有四个属性值：default、rect、circle、poly。而coords有三个属性值：rect、circle、poly。
（2）map元素
map元素用来定义一个客户端图像映射，该元素一般是和另一个元素配合使用，如img元素、object元素或者input元素，这些元素一般会在网页上呈现一个图形。并且，这些元素会有一个usemap属性，该属性的值与map元素的name属性值匹配，从而建立联系。
（3）热点重叠
有热点重叠的地方，在文档中出现较早的热点具有更高的优先级。