ITコラム

ITコラム

2017.03.09

#HTML入門

HTML【イメージマップ】～img要素、map要素、area要素

イメージマップとは、１つの画像内に複数のリンク先を設定できる機能のことです。img要素とmap要素、area要素の３つの要素を組み合わせることで、イメージマップを設定することができます。
今回は、イメージマップの作り方についてまとめたいと思います。

１．イメージマップとは
２．イメージマップの作成
３．座標の指定方法
- ・リンク領域の形状との関係
- ・座標の割り出し方
４．area要素の属性一覧

１．イメージマップとは

イメージマップとは、１つの画像上にリンク領域が複数あるもののことです。
画像を組み込んだ後に、各リンク領域を作っていきます。

img要素を使って画像を表示させ、map要素とarea要素を使ってイメージマップを作成します。

使用する要素
　●<img>
　●<map> ～ </map>
　●<area>

map要素の属性	name属性	イメージマップの名前
map要素の属性	グローバル属性	id属性、class属性、title属性、style属性など
area要素の属性	href属性	リンク先のURL
	alt属性	代替テキスト
	shape属性	領域の形状（四角、円、多角形、画像全体）
	coords属性	領域の座標を画像の左上を0としてピクセルで指定
	ping属性	ping送信するURL（半角スペース区切りで複数可）
	rel属性	リンク先との関係を示すキーワード
	media属性	リンク先の対象メディアタイプ
	target属性	リンク先を表示するウィンドウ名またはキーワード
	hreflang属性	リンク先の言語コード（ja、enなど）
	type属性	リンク先のMIMEタイプ
	グローバル属性	id属性、class属性、title属性、style属性など
img要素の属性	usemap属性	map要素のイメージマップ名を呼び出す

▲目次へ戻る

２．イメージマップの作成

次の画像内の３つの図形にロールオーバーすると、カーソルが変化して、リンク領域であることがわかります。

上の表示に対するhtmlコードは、以下の通りです。

<img src="photo.jpg" width="525" height="150" usemap="#shapes" />
<map name="shapes">
<area shape="circle" coords="107,75,55" href="#" alt="円" />
<area shape="poly" coords="209,132,262,20,314,132" href="#" alt="三角形" />
<area shape="rect" coords="371,28,463,123" href="#" alt="四角形" />
</map>

イメージマップは、以下の手順で作成します。
・イメージマップに使用する画像を用意して、それをimg要素で読み込みます。
・map要素のname属性で、任意のマップ名（半角英数字）を指定します。
・img要素のusemap属性で、map要素で指定したマップ名をハッシュ（ # ）に続けて記述します。（この指定によって、画像とイメージマップの設定が関連付けられます。）
・map要素の中に、必要な数だけarea要素を設置します。
・各area要素に、shape属性（リンク領域の形状）、coords属性（リンク領域の座標）、href属性（リンク先のURI）、alt属性（代替テキスト）の指定を行います。

▲目次へ戻る

３．座標の指定方法

area要素のcoords属性で、リンク領域の座標を指定します。
この指定は、イメージマップ特有の重要な指定です。

・リンク領域の形状との関係

リンク領域の形状により、座標の指定方法は異なります。

リンク領域の形状はshape属性で指定します。

座標はcoords=”数値,数値,数値…”のように、数値をカンマ（,）で区切って指定します。
座標は、画像の左上が0（x=0, y=0）となります。
　
●四角形の指定
四角形は「shape=”rect”」で指定します。
座標は「（左上のx座標）,（左上のy座標）,（右下のx座標）,（右下のy座標）」の順に指定します。
上の例では、四角形の左上の角が x=371、y=28で、右下の角は x=463、y=123となったので、「coords=”371,28,463,123″」と指定しています。
　
●円の指定
円は「shape=”circle”」で指定します。
座標は「（中心点のx座標）,（中心点のy座標）,（半径）」の順に指定します。
上の例では、中心点は x=107、y=75で、半径=55となったので、「coords=”107,75,55″」と指定しています。
　
●多角形の指定
四角形と正円以外は多角形となります。
多角形は「shape=”poly”」で指定します。
座標は「（角のx座標）,（角のy座標）」の順で、全部の角を指定していきます。
角の座標を書く順番は、時計回りでも半時計回りでも、どこから始めても大丈夫です。
上の三角形の例では、左の角から時計回りに角を指定しており、「coords=”209,132,262,20,314,132″」となりました。
　
●defaultの指定
上の例にはありませんが「shape=”default”」と指定すると、画像全体がリンク領域となります。
個別のリンク領域と「shape=”default”」を併用すると、各形状のリンク領域と共に、それ以外の領域（背景）のリンク領域も作ることができます。
　

・座標の割り出し方

座標は、画像編集ソフト等で割り出すことができます。
ここでは、Windowsのペイントで座標を調べてみます。

以下は、ペイントを使用したときの例です。調べたい位置にカーソルを合わせると、右下にその位置の座標が表示されます。

三角形の一番上の点にカーソルを合わせた際に、左下に座標（x,y）が「262,20px」と表示されました。

▲目次へ戻る

４．area要素の属性一覧

area要素の属性は、次の通りです。

href=”URL”
リンク先のURLを指定します。
alt=”代替テキスト”
代替のテキストを指定します。
shape=”rect”　または　”circle”　または　”poly”　または　”default”
リンク領域の形状を指定します。 rect は四角形、circle は円、poly は多角形、default は、画像全体（rect, circle, polyなどで指定した領域以外の場所）
coords=”リンク領域の座標（画像の左上を(0,0)としてピクセルで指定）”
リンク領域の座標を指定します。 rect の場合、四角形の（左上のx, 左上のy, 右下のx, 右下のy） circle の場合、円の（中心のx, 中心のy, 半径） poly の場合、（最初の角のx, そのy,　以降、すべての角のxy座標） default は、coords属性指定不可
ping=”pingを送信するURL”
ping（ピン）を送信するpingサーバ（pingサイト）のURLを指定します。半角スペースで区切ると複数のURLを指定することができます。
rel=”関係を示すキーワード”
このHTML文書とリンク先ファイルの関係（relation）を示すキーワードを指定します。 rel属性のキーワード　・alternate =代替え文書　　(hreflang属性との併用で翻訳版を、media属性との併用で別メディア版を示す) 　・search =検索ページを示す　・help =ヘルプ　・prev =前へ　・next =次へ　・prefetch =リンク先を事前に読み込む　・bookmark =パーマリンク　・tag =タグ　・license =著作権　・author =作者
media=”リンク先を表示する時のメディアタイプ”
リンク先を表示する時のメディアタイプ（機器）を指定します。初期値は all。カンマ（,）で区切って複数指定することができます。メディアタイプ・all =すべての機器・screen =パソコンのスクリーン画面・tv =テレビ画面・handheld =携帯電話などの端末・print =プリンタ・projection =プロジェクタ・tty =文字幅が固定された機器（テレタイプなど）・braille =点字ディスプレイなど・aural =音声出力機器
target=”_blank”　または　”_self”　または　”_parent”　または　”_top”　または　”フレーム名”
リンク先ファイルを表示するウィンドウ（またはフレーム）を指定します。 _blank ：新規の（別の）ウィンドウに表示 _self：現在の（同じ）ウィンドウ（フレーム）に表示 _parent：親になるウィンドウ（フレーム）に表示 _top：フレームを解除してウィンドウ全体に表示ウィンドウ(フレーム)名：その名前のウィンドウ（フレーム）に表示
hreflang=”言語コード”
リンク先ファイルの言語コードを指定します。 ja（日本語）、en（英語）、es（スペイン語）、fr（フランス語）、ko（韓国語）、zh（中国語）など
type=”MIMEタイプ”
リンク先ファイルのMIMEタイプを指定します。 text/html（HTML）、application/pdf（PDF）など