7-2 標(biāo)示文件標(biāo)題<figure>和<figcaption>元素

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

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

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

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

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

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

響應(yīng)圖可以分為客戶端（Client site）和服務(wù)器端（Server site）兩類。這兩類響應(yīng)圖的差別在于，將鼠標(biāo)指針指向圖中的熱點(diǎn)時(shí)，若是客戶端的響應(yīng)圖，則啟動(dòng)瀏覽器的超鏈接；若是服務(wù)器端的響應(yīng)圖，則由服務(wù)器啟動(dòng)超鏈接?？蛻舳说捻憫?yīng)圖，由于不會(huì)增加服務(wù)器的負(fù)擔(dān)以及系統(tǒng)流量上的負(fù)荷，一般較常使用。

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

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

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

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

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

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

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

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

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

□ shape

shape的取值有下列4種。

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

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

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

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

□ coords

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

rect：需要4個(gè)值，分別是左上角x坐標(biāo)，y坐標(biāo)；右下角x坐標(biāo)，y坐標(biāo)。

circle：需要3個(gè)值，分別是中心點(diǎn)的x坐標(biāo)，y坐標(biāo)和半徑。

poly：至少需要6個(gè)值，如果是3角形需要6個(gè)值，4邊形需要8個(gè)值，依此類推。所有鏈接區(qū)域的端點(diǎn)以順時(shí)針方向列出，先列出第一個(gè)點(diǎn)的x坐標(biāo)和y坐標(biāo)，再列出第二個(gè)點(diǎn)的x坐標(biāo)和y坐標(biāo)，其他依此類推。

default：如果是default，則不用指定坐標(biāo)值。

□ href

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

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

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

soviet.html

mchina.html

ocean.html

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

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

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

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

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

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