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 2015年7月.

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

他の例（インタラクティブなものもあります）については、 <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

ブラウザーの互換性

Enable JavaScript to view this browser compatibility table.

Help improve MDN

Was this page helpful to you?

Yes No

Learn how to contribute

This page was last modified on 2025年7月10日 by MDN contributors.

View this page on GitHub • Report a problem with this content

HTML DOM API
HTMLImageElement
コンストラクター
1. Image()
インスタンスプロパティ
インスタンスメソッド
1. decode()
継承
HTML DOM に関連するページ
ガイド
1. JavaScript で queueMicrotask() によるマイクロタスクの使用
2. In depth: Microtasks and the JavaScript runtime environment

HTMLImageElement: useMap プロパティ

In this article

値

使用上の注意

例

試してみましょう

仕様書

ブラウザーの互換性

Help improve MDN