7-2 標示文件標題<figure>和<figcaption>元素

<figure>元素主要是標示文件內容所參照的圖像、圖表、照片或程序代碼，同時這些內容可隨時從文件中抽離。<figcaption>元素主要是列出文件內容的名稱，在本章可以理解成是圖片名稱，這個元素只能在<figure>元素開頭或尾端使用一次。不過這兩個元素由其元素名稱判斷，一般最常用的仍是標示圖像。

程序實例ch7_3.html：為文件內容（本例是圖像）加上標題名稱。

執行結果

程序實例ch7_4.html：用<figure>和<figcaption>標示表格。

執行結果

7-3 制作響應圖

響應圖可以分為客戶端（Client site）和服務器端（Server site）兩類。這兩類響應圖的差別在于，將鼠標指針指向圖中的熱點時，若是客戶端的響應圖，則啟動瀏覽器的超鏈接；若是服務器端的響應圖，則由服務器啟動超鏈接。客戶端的響應圖，由于不會增加服務器的負擔以及系統流量上的負荷，一般較常使用。

響應圖可以當作一般網頁的導航功能，例如，可以將網站所有功能制作成響應圖，放在網頁某一位置，方便用戶參考。

7-3-1 建立地圖<img>

若想設計響應圖，首先需定義一個地圖的圖片。我們可以將此地圖想成未來要使用的響應圖，當然我們必須為此圖片命名。以上工作可以使用<img>元素完成，但必須加上usemap屬性，這個屬性的功能是給未來要成為響應圖的圖片命名。若是我們想將一張地圖asiamap.jpg設定為未來使用的響應圖，同時響應圖的名稱是MyMap，則<img>的寫法如下：

    <img src="asiamap.jpg"usemap=
"#MyMap">

基本上usemap屬性所定義的就是未來程序須使用的響應圖名稱，在設定時需加上“#”符號，但是未來使用時則不須加上此符號。

7-3-2 響應圖<map>

該功能主要是將<img>所定義的圖片鏈接至響應圖。如果采用先前的實例，將MyMap鏈接至響應圖，使用<map>的寫法如下：

7-3-3 定義響應圖的鏈接區域<area>

使用<area>定義響應圖的鏈接區域，需使用幾個重要的屬性，分別是shape、coords、href和alt，下面將分別說明。

□ shape

shape的取值有下列4種。

rect：代表鏈接區域是四邊形。

circle：代表鏈接區域是圓形。

poly：代表鏈接區域是多邊形。

default：一般是用在鏈接區以外，不執行任何動作，程序設計時也可省略。

□ coords

coords主要是定義鏈接的坐標，這個坐標又會因shape的值而有不同定義。坐標在定義時以px為單位，左上角是（0,0），向右延伸為x軸，越往右px值越；向下延伸為y軸，越往下px值越大。shape在不同狀況時coords的使用說明如下：

rect：需要4個值，分別是左上角x坐標，y坐標；右下角x坐標，y坐標。

circle：需要3個值，分別是中心點的x坐標，y坐標和半徑。

poly：至少需要6個值，如果是3角形需要6個值，4邊形需要8個值，依此類推。所有鏈接區域的端點以順時針方向列出，先列出第一個點的x坐標和y坐標，再列出第二個點的x坐標和y坐標，其他依此類推。

default：如果是default，則不用指定坐標值。

□ href

href用于設定所鏈接的文件或是URL。

注 本節地圖素材請讀者自行準備，地圖文件名改成代碼中的文件名即可。

程序實例ch7_5.html：設計響應圖。本程序在執行時會出現一個亞洲地圖，在這地圖中含有3個超鏈接，當將鼠標指針指向超鏈接區域時，窗口左下方會列出超鏈接的地址。如果指向超鏈接區域時按住鼠標左鍵，可以看到虛線框，這個框就是超鏈接區域。正式執行超鏈接時，將執行指定的超鏈接html文件。

soviet.html

mchina.html

ocean.html

執行結果 將鼠標指針移至“中國”區超鏈接出現圓圈。

如果按住鼠標左鍵不放，將看到“中國”區超鏈接的范圍（虛線圓）。

若是單擊，可以啟動超鏈接，此程序實例的結果如下：

在上述執行結果中，筆者故意在ch7文件夾不放相對應的中國風景圖片，這將是各位讀者的作業。“俄羅斯”超鏈接的范圍是個虛線矩形。

“太平洋”區超鏈接的范圍是個虛線四邊形。

上述俄羅斯和太平洋區的超鏈接范圍已經超出原圖片，這是故意的，這項修正也將是各位讀者的作業。