HTML 標籤的 ismap 和 usemap 屬性

HTML <img> 標籤的 ismap 和 usemap 屬性

<img> 標籤的 ismap 和 usemap 屬性告訴瀏覽器這個映像是一個特殊的可視映射，可以通過滑鼠來對一個或多個超連結進行選擇，也就是通常所說的影像地圖（image map）。

ismap 屬性

影像地圖的 ismap 樣式被稱為 “伺服器端”影像地圖，它只可以用在 <a> 標籤標識的超連結裡面。

請看下面的例子：

<a href="/example/map">  <img src="/i/map.gif" ismap="ismap" /></a>

當使用者在 ismap 映像上單擊了某處時，瀏覽器會自動把滑鼠的 x、y 位置（相對於映像的左上方）發送到伺服器端。特殊的伺服器端軟體（在本例中是 /example/map 程式）可以根據這些座標來做出響應。

usemap 屬性

usemap 屬性提供了一種“用戶端”的影像地圖機制，有效地消除了伺服器端對滑鼠座標的處理，以及由此帶來的網路延遲問題。通過特殊的 <map> 和 <area> 標籤，HTML 創作者可以提供一個描述 usemap 映像中超連結敏感地區座標的映射，這個映射同時包含相應的超連結 URL。usemap 屬性的值是一個 URL，它指向特殊的 <map> 地區。使用者電腦上的瀏覽器將把滑鼠在映像上單擊時的座標轉換成特定的行為，包括載入和顯示另外一個文檔。

我們舉例說明一下，下面這段原始碼將一個 100x100 像素的映像 map.gif 映射為 4 個地區，當使用者單擊其中某一個地區時，將被連結到不同的文檔中。請注意，在這個 <img> 標籤中，我們已經有效地包含了對 ismap 影像地圖的處理功能，這樣，那些使用不具有 usemap 處理功能的瀏覽器使用者，就可以通過另外一中途徑，即伺服器端機制來處理影像地圖：

<a href="/example/map">  <img src="/i/map.gif" ismap="ismap" usemap="#map" /></a><map name="map">  <area coords="0,0,49,49" href="link1.html">  <area coords="50,0,99,49" href="link2.html">  <area coords="0,50,49,99" href="link3.html">  <area coords="50,50,99,99" href="link4.html"></map>

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

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

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