HTMLImageElement: useMap 屬性
HTMLImageElement 介面上的 useMap 屬性反映了 <img> HTML 元素的 usemap 屬性的值，該屬性是一個字串，用於指定要應用於影像的客戶端影像對映的名稱。
值
一個字串，提供要應用於影像的影像對映所定義的 <map> 元素的頁面區域性 URL（即，以雜湊或磅符號 # 開頭的 URL）。
您可以在我們的學習文章 在影像上新增熱點圖 中瞭解更多關於客戶端影像對映的資訊。
用法說明
useMap 的字串值必須是 <map> 元素的有效錨點。換句話說，該字串應在前面加上一個磅或雜湊符號，作為相應 <map> 元素的 name 屬性的值。
考慮一個如下所示的 <map>：
html
<map name="mainmenu-map">
<area
shape="circle"
coords="25, 25, 75"
href="/index.html"
alt="Return to home page" />
<area shape="rect" coords="25, 25, 100, 150" href="/index.html" alt="Shop" />
</map>
給定名為 mainmenu-map 的影像對映，使用它的影像應如下所示：
html
<img src="menubox.png" usemap="#mainmenu-map" />
示例
試一試
<map name="infographic">
<area
shape="poly"
coords="129,0,260,95,129,138"
href="https://mdn.club.tw/docs/Web/HTTP"
alt="HTTP" />
<area
shape="poly"
coords="260,96,209,249,130,138"
href="https://mdn.club.tw/docs/Web/HTML"
alt="HTML" />
<area
shape="poly"
coords="209,249,49,249,130,139"
href="https://mdn.club.tw/docs/Web/JavaScript"
alt="JavaScript" />
<area
shape="poly"
coords="48,249,0,96,129,138"
href="https://mdn.club.tw/docs/Web/API"
alt="Web APIs" />
<area
shape="poly"
coords="0,95,128,0,128,137"
href="https://mdn.club.tw/docs/Web/CSS"
alt="CSS" />
</map>
<img
usemap="#infographic"
src="/shared-assets/images/examples/mdn-info.png"
alt="MDN infographic" />
img {
display: block;
margin: 0 auto;
width: 260px;
height: 260px;
}
規範
| 規範 |
|---|
| HTML # dom-img-usemap |
瀏覽器相容性
載入中…