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 メカニズムとは異なり、サーバーや特別なサーバーソフトウェアが不要で、ウェブ（ネットワーク）以外の環境（例えば、ローカルファイルやCD-ROM）で使用できます。

ブラウザのサポート

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
サポート サポート サポート サポート サポート

HTML <img> タグ