一、為圖片建立超鏈接（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）熱點重疊
有熱點重疊的地方，在文檔中出現較早的熱點具有更高的優先級。