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

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

程序?qū)嵗齝h7_3.html：為文件內(nèi)容（本例是圖像）加上標題名稱。

執(zhí)行結(jié)果

程序?qū)嵗齝h7_4.html：用<figure>和<figcaption>標示表格。

執(zhí)行結(jié)果

7-3 制作響應(yīng)圖

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

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

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

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

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

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

7-3-2 響應(yīng)圖<map>

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

7-3-3 定義響應(yīng)圖的鏈接區(qū)域<area>

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

□ shape

shape的取值有下列4種。

rect：代表鏈接區(qū)域是四邊形。

circle：代表鏈接區(qū)域是圓形。

poly：代表鏈接區(qū)域是多邊形。

default：一般是用在鏈接區(qū)以外，不執(zhí)行任何動作，程序設(shè)計時也可省略。

□ 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個值，依此類推。所有鏈接區(qū)域的端點以順時針方向列出，先列出第一個點的x坐標和y坐標，再列出第二個點的x坐標和y坐標，其他依此類推。

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

□ href

href用于設(shè)定所鏈接的文件或是URL。

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

程序?qū)嵗齝h7_5.html：設(shè)計響應(yīng)圖。本程序在執(zhí)行時會出現(xiàn)一個亞洲地圖，在這地圖中含有3個超鏈接，當將鼠標指針指向超鏈接區(qū)域時，窗口左下方會列出超鏈接的地址。如果指向超鏈接區(qū)域時按住鼠標左鍵，可以看到虛線框，這個框就是超鏈接區(qū)域。正式執(zhí)行超鏈接時，將執(zhí)行指定的超鏈接html文件。

soviet.html

mchina.html

ocean.html

執(zhí)行結(jié)果 將鼠標指針移至“中國”區(qū)超鏈接出現(xiàn)圓圈。

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

若是單擊，可以啟動超鏈接，此程序?qū)嵗慕Y(jié)果如下：

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

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

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