3.4 圖像熱區超鏈接元素map、area

除了對整幅圖像設置超鏈接外，還可以將圖像劃分為若干區域，叫作熱區，每個熱區可設置不同的超鏈接。此時，包含熱區的圖像稱為映射圖像，即帶有可單擊區域的圖像。圖像熱區使用的不再是a元素，而是area元素。圖像熱區超鏈接的使用步驟如下。

1.通過﹤map﹥…﹤/map﹥標簽定義圖像地圖

﹤map﹥標簽用于圖像映射。﹤map﹥…﹤/map﹥標簽中可以包含一個以上的熱區﹤area﹥標簽，每個熱區﹤area﹥標簽都有獨立的超鏈接。area元素始終嵌套在﹤map﹥…﹤/map﹥標簽之中。語法格式為：

map元素中的name和id屬性，在XHTML中，name屬性已經廢棄，使用id屬性代替它。在HTML5中必須同時指定name和id屬性相同的“映射圖像名”。

area元素有兩個重要屬性：

1）shape屬性：定義熱區形狀，它有以下3個值。

● circle：圓形區域。

● rect：矩形區域。

● poly：多邊形區域。

2）coords屬性：定義矩形、圓形或多邊形區域的坐標。圖像的左上角坐標是（0，0），x軸向右為正，y軸向下為正。coords屬性的格式如下。

● 如果shape="circle"，則coords包含3個參數，分別為x、y和r。這3個參數是圓心坐標（x，y）和圓的半徑r。

● 如果shape="rect"，則coords包含4個參數，分別為x1、y1、x2、y2。這4個參數分別是矩形的左上角的坐標（x1，y1）和右下角的坐標（x2，y2）。

● 如果shape="poly"，則coords需要按順序取多邊形各個頂點的坐標（x，y），因此形式為“x1，y1，x2，y2，…，xn，yn”，其數量必須是偶數。可以是逆時針，也可以是順時針。HTML會按照定義頂點的順序將它們連接起來，形成多邊形熱區。

2.將img元素的usemap屬性與map元素的name、id屬性相關聯

在圖像文件中設置映射圖像名，格式為：

﹤img usemap="＃映射圖像名"src="圖像文件地址"…/﹥

img元素中的usemap屬性要引用map元素的id或name屬性，所以應同時向map元素添加id和name屬性。也就是說，img元素的usemap屬性的“映射圖像名”必須與map元素的name和id屬性的“映射圖像名”相同，使得img元素的usemap屬性與map元素的name、id屬性相關聯，以創建圖像與映射之間的關系。

【例3-7】設計帶有可點擊區域的圖像映射。本例文件3-7.html在瀏覽器中的顯示效果如圖3-8所示。