Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from http://developer.mozilla.org/ja/docs/Web/API/HTMLImageElement/useMap below:

HTMLImageElement: useMap プãƒãƒ‘ティ - Web API

Baseline Widely available

useMap は HTMLImageElement インターフェイスのプロパティで、 HTML の usemap 属性を反映し、この画像に適用されるクライアントサイドイメージマップの名前を提供する文字列です。

画像に適用するイメージマップを定義する <map> 要素のページローカル URL (つまり、ハッシュまたはポンド記号 "#" で始まる URL) を指定する文字列です。

クライアントサイドのイメージマップについては、学習記事「画像の上にヒットマップを追加する」で詳しく説明されています。

useMap の文字列値は <map> 要素の有効なアンカーでなければなりません。言い換えると、この文字列は適切な <map> の name 属性の値の前に、ポンド記号またはハッシュ記号を付加したものでなければなりません。

次のような <map> を考えてみましょう。

<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 という名前のイメージマップがあるとすると、それを使ったイメージは以下のようなものになります。

<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;
}

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4