img 標籤的 usemap 屬性

標籤：相關   planet   電話   manager   bsp   頂點   多邊形   嵌套   三角形   

<img src="1.gif" alt="Planets" usemap="#Map"/>

<map name="Map">
  <area shape="rect" coords="11,10,180,180" href="detail/Best_marketing.html">
  <area shape="rect" coords="198,13,364,175" href="detail/General_manager.html">
</map>

上面這段原始碼將一幅映像 1gif 映射為 3 個地區，當使用者單擊其中某一個地區時，將被連結到不同的文檔中。

　usemap 屬性將映像定義為用戶端影像對應。

　影像地圖指的是帶有可點擊地區的映像。

　usemap 屬性與 <map> 元素的 name 或 id 屬性相關聯，以建立 <img> 與 <map> 之間的關係。

ismap 屬性和 usemap 屬性的應用差異

地圖就是很好地應用 ismap 和 usemap 屬性的一個樣本，例如，在瀏覽一家全國範圍的大公司網頁時，使用者可能會在地圖上單擊他們所居住的城市，以獲得附近地區零售店的地址和電話號碼等。

usemap 用戶端處理影像地圖的好處是，它不要求有伺服器或特殊的伺服器軟體，與 ismap 機制不同，它可以用在非 web （無網路）環境中，例如在本地的檔案或者 CD-ROM 中使用。

 

/*

所有主流瀏覽器都支援 <area> 標籤。

*/

<area> 標籤定義影像地圖中的地區（註：影像地圖指得是帶有可點擊地區的映像）。

area 元素總是嵌套在 <map> 標籤中。

注釋：<img> 標籤中的 usemap 屬性與 map 元素 name 屬性相關聯，建立映像與映射之間的聯絡。

　　　<img> 中的 usemap 屬性可引用 <map> 中的 id 或 name 屬性（由瀏覽器決定），所以我們需要同時向 <map> 添加 id 和 name 兩個屬性。

coords 屬性規定地區的 x 和 y 座標。

coords 屬性與 shape 屬性配合使用，來規定地區的尺寸、形狀和位置。

映像左上方的座標是 "0,0"。

<area> 標籤的 coords 屬性定義了用戶端影像對應中對滑鼠敏感的地區的座標。座標的數字及其含義取決於 shape 屬性中決定的地區形狀。可以將用戶端影像對應中的超連結地區定義為矩形、圓形或多邊形等。

下面列出了每種形狀的適當值：

圓形：shape="circle"，coords="x,y,z"

這裡的 x 和 y 定義了圓心的位置（"0,0" 是映像左上方的座標），r 是以像素為單位的圓形半徑。

多邊形：shape="polygon"，coords="x1,y1,x2,y2,x3,y3,..."

每一對 "x,y" 座標都定義了多邊形的一個頂點（"0,0" 是映像左上方的座標）。定義三角形至少需要三組座標；高緯多邊形則需要更多數量的頂點。

多邊形會自動封閉，因此在列表的結尾不需要重複第一個座標來閉合整個地區。

矩形：shape="rectangle"，coords="x1,y1,x2,y2"

第一個座標是矩形的一個角的頂點座標，另一對座標是對角的頂點座標，"0,0" 是映像左上方的座標。請注意，定義矩形實際上是定義帶有四個頂點的多邊形的一種簡化方法。

 (如果某個 area 標籤中的座標和其他地區發生了重疊，會優先採用最先出現的 area 標籤。瀏覽器會忽略超過映像邊界範圍之外的座標。)

 

img 標籤的 usemap 屬性