HTML <img> usemap 屬性

HTML <img> 標簽

定義和用法

usemap 屬性將圖像定義為客戶端圖像映射。

圖像映射指的是帶有可點擊區域的圖像。

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

注意：如果 <img> 元素是 <a> 或 <button> 元素的后代，則不能使用 usemap 屬性。

延伸閱讀：詳解 usemap 屬性

實例

帶有可點擊區域的圖像映射：

<img src="life.png" alt="Life" usemap="#lifemap" width="650" height="451">
<map name="lifemap">
  <area shape="rect" coords="10,208,155,338" alt="Computer" href="airpods.html">
  <area shape="rect" coords="214,65,364,365" alt="Phone" href="iphone.html">
  <area shape="circle" coords="570,291,75" alt="Cup of coffee" href="coffee.html">
</map>

親自試一試

語法

<img usemap="#mapname">

屬性值

值 描述
#mapname 井號字符（“#”）加上要使用的 <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 中使用。

瀏覽器支持

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
支持 支持 支持 支持 支持

HTML <img> 標簽