<map> 一つの画像に対して複数のリンクを設定する
取り扱い | 現行の標準 |
カテゴリ |
フロー・コンテンツ フレージング・コンテンツ パルパブル・コンテンツ |
親にできる要素 | フレージング・コンテンツを受け入れる要素 |
子にできる要素 | トランスパレント・コンテンツ |
対応ブラウザ | caniuseで確認 |
<map>タグの説明
<map>
は、一つの画像に対して複数のリンク先を設定する、イメージマップを作る祭に使用します。本来、一つの要素に複数のリンクを設定することは出来ないように思われますが、画面上の座標を使って範囲を区切り、それぞれにリンク先を持たせる事で実現します。
イメージマップを作るには、<map>
でマップの名称を決め、<area>
でリンク先と適用範囲を設定し、<img>
で使用する画像とそこに適用するマップの名称を指定します。
<map>タグの特徴
- レイアウトの初期値はインラインです。文章の改行には影響を与えません。
- この要素は可視化されません。
<img>
に与える仮想マップを定義するのみです。 - 同一のページ内に複数使うことができます。ただし、この要素自体を入れ子にすることはできません。
<map>に指定できる主な属性
- name
- イメージマップを参照するための名前を与えます。この属性は必須です。
- グローバル属性
- 全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。
- イベントハンドラ
- 全てのHTML要素に指定できるコンテンツ属性です。
イメージマップの設定
- <img src="画像URL" usemap="#MAP名">
- 画像ファイルと参照するMAP名を指定します。
- <map name="MAP名">
<img>
のusemap
属性で参照する名前を定義します。- <area href="リンク先" shape="形状" coords="領域" alt="概要">
- マップのリンク先、形状、領域、概要を定義します。

shape
="rect":四角形coords
="左端からの位置,上からの位置,右端の位置,底辺までの位置"

shape
="poly":多角形coords
="頂点の座標を時計回りで左端からの位置,上からの位置で記述"

shape
="circle":円形coords
="左端からの中心点の位置,上からの中心点の位置,半径"
<map>の使い方とサンプル
このタグを使ったマークアップのサンプルです。
HTML
<div>
<img src="../images/imagemap_menu.gif" usemap="#menumap" alt="サンプル" width="450" height="50" border="0">
<map name="menumap">
<area href="#area1" shape="rect" coords="20,3,70,47" alt="TOP">
<area href="#area2" shape="rect" coords="90,3,165,47" alt="ABOUT">
<area href="#area3" shape="rect" coords="193,3,257,47" alt="NEWS">
<area href="#area4" shape="rect" coords="285,3,337,47" alt="MAP">
<area href="#area5" shape="rect" coords="358,3,425,47" alt="MAIL">
</map>
</div>
表示確認

<map>に関連するHTMLタグ
ハイパーリンクを作成する要素 | |
---|---|
<a> | リンクを指定する |
<area> | イメージマップの領域を指定する |
<map> | 一つの画像に対して複数のリンクを設定する |