HTML <img> 標簽的 usemap 屬性
定義和用法
usemap 屬性將圖像定義為客戶端圖像映射。
圖像映射指的是帶有可點擊區(qū)域的圖像。
usemap 屬性與 <map> 元素的 name 或 id 屬性相關(guān)聯(lián)，以建立 <img> 與 <map> 之間的關(guān)系。
HTML 4.01 與 HTML5 之間的差異
沒有。
實例
客戶器端圖像映射：
<img src="planets.gif" alt="Planets" usemap="#planetmap" />
<map name="planetmap">
<area href="sun.htm" shape="rect" coords="0,0,110,260">Sun</a>
<area href="mercur.htm" shape="circle" coords="129,161,10">Mercury</a>
<area href="venus.htm" shape="circle" coords="180,139,14">Venus</a>
</map>
解釋
上面這段源代碼將一幅圖像 planets.gif 映射為 3 個區(qū)域，當用戶單擊其中某一個區(qū)域時，將被鏈接到不同的文檔中。
如需了解更多有關(guān) map 和 area 元素的信息，請參閱：
瀏覽器支持
所有瀏覽器都支持 usemap 屬性。
語法
<img usemap="value">
屬性值
| 值 | 描述 |
|---|---|
| #mapname | # + 要使用的 <map> 元素的 name 或 id 屬性 |
延伸閱讀：詳解 usemap 屬性
usemap 屬性提供了一種“客戶端”的圖像映射機制，有效地消除了服務器端對鼠標坐標的處理，以及由此帶來的網(wǎng)絡(luò)延遲問題。通過特殊的 <map> 和 <area> 標簽，HTML 創(chuàng)作者可以提供一個描述 usemap 圖像中超鏈接敏感區(qū)域坐標的映射，這個映射同時包含相應的超鏈接 URL。usemap 屬性的值是一個 URL，它指向特殊的 <map> 區(qū)域。用戶計算機上的瀏覽器將把鼠標在圖像上單擊時的坐標轉(zhuǎn)換成特定的行為，包括加載和顯示另外一個文檔。
我們舉例說明一下，下面這段源代碼將一個 100x100 像素的圖像 map.gif 映射為 4 個區(qū)域，當用戶單擊其中某一個區(qū)域時，將被鏈接到不同的文檔中。請注意，在這個 <img> 標簽中，我們已經(jīng)有效地包含了對 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 屬性的一個示例，例如，在瀏覽一家全國范圍的大公司網(wǎng)頁時，用戶可能會在地圖上單擊他們所居住的城市，以獲得附近地區(qū)零售店的地址和電話號碼等。
usemap 客戶端處理圖像映射的好處是，它不要求有服務器或特殊的服務器軟件，與 ismap 機制不同，它可以用在非 web （無網(wǎng)絡(luò)）環(huán)境中，例如在本地的文件或者 CD-ROM 中使用。