3.3 創(chuàng)建熱點(diǎn)區(qū)域

在瀏覽網(wǎng)頁時(shí)讀者會(huì)發(fā)現(xiàn)，當(dāng)單擊一張圖片的不同區(qū)域時(shí)會(huì)顯示不同的鏈接內(nèi)容，這就是圖片的熱點(diǎn)區(qū)域。所謂圖片的熱點(diǎn)區(qū)域，就是將一個(gè)圖片劃分成若干個(gè)鏈接區(qū)域。訪問者單擊不同的區(qū)域會(huì)鏈接到不同的目標(biāo)頁面。

在HTML中，可以為圖片創(chuàng)建3種類型的熱點(diǎn)區(qū)域：矩形、圓形和多邊形。創(chuàng)建熱點(diǎn)區(qū)域使用標(biāo)記<map>和<area>，語法格式如下：

在上面的語法格式中，需要讀者注意以下幾點(diǎn)：

（1）要想建立圖片熱點(diǎn)區(qū)域，必須先插入圖片。注意，圖片必須增加usemap屬性，說明該圖像是熱區(qū)映射圖像，屬性值必須以“#”開頭，如#pic。那么上面一行代碼可以修改為：<img src="圖片地址"usemap="#pic">。

（2）<map>標(biāo)記只有一個(gè)屬性id，其作用是為區(qū)域命名，屬性值必須與<img>標(biāo)記的usemap屬性值相同，修改上述代碼為：<map id="#pic">。

（3）<area>標(biāo)記主要是定義熱點(diǎn)區(qū)域的形狀及超鏈接，它有三個(gè)相應(yīng)的屬性。

● shape屬性，控件劃分區(qū)域的形狀，其取值有3個(gè)，分別是rect（矩形）、circle（圓形）和poly（多邊形）。

● coords屬性，控制區(qū)域的劃分坐標(biāo)。

◆ 如果shape屬性取值為rect，那么coords的設(shè)置值分別為矩形的左上角x、y坐標(biāo)點(diǎn)和右下角x、y坐標(biāo)點(diǎn)，單位為像素。

◆ 如果shape屬性取值為circle，那么coords的設(shè)置值分別為圓形圓心x、y坐標(biāo)點(diǎn)和半徑值，單位為像素。

◆ 如果shape屬性取值為poly，那么coords的設(shè)置值分別為多邊形在各個(gè)點(diǎn)的x、y坐標(biāo)，單位為像素。

● href屬性是為區(qū)域設(shè)置超鏈接的目標(biāo)，設(shè)置值為“#”時(shí)，表示為空鏈接。