HTMLImageElement: useMap プロパティ

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

useMap は HTMLImageElement インターフェイスのプロパティで、 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> と <area> 要素についての記事や、イメージマップの使用法をご覧下さい。

例

試してみましょう

<map name="infographic">
  <area
    shape="poly"
    coords="129,0,260,95,129,138"
    href="https://developer.mozilla.org/docs/Web/HTTP"
    alt="HTTP" />
  <area
    shape="poly"
    coords="260,96,209,249,130,138"
    href="https://developer.mozilla.org/docs/Web/HTML"
    alt="HTML" />
  <area
    shape="poly"
    coords="209,249,49,249,130,139"
    href="https://developer.mozilla.org/docs/Web/JavaScript"
    alt="JavaScript" />
  <area
    shape="poly"
    coords="48,249,0,96,129,138"
    href="https://developer.mozilla.org/docs/Web/API"
    alt="Web APIs" />
  <area
    shape="poly"
    coords="0,95,128,0,128,137"
    href="https://developer.mozilla.org/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;
}

仕様書

Specification
HTML # dom-img-usemap

ブラウザーの互換性

BCD tables only load in the browser