クリッカブルマップの基礎知識
イメージマップとは
ブラウザ内に表示された画像の一部分をクリックすることで、指定したURLにジャンプできるような仕組みをクリッカブル・イメージマップ、またはちょっと約してクリッカブルマップといいます。クリッカブルマップは、画像の一部分にリンク可能領域を設定して、一つのイメージから複数のファイルに飛ぶことができるものです。
画像上の領域は、図形（多角形、円形、長方形）の種類と、その座標を定義することによって与えられます。
イメージマップの種類
イメージマップには大きく分けて2種類あります。一つはサーバ・サイド・クリッカブルマップといって、ウェブサーバ上にマップを置く方法です。マップはHTML文書とは独立したファイルに記述されます。そのフォーマットはウェブサーバに依存し、それぞれ仕様が違います。
この方式はウェブサーバウェブサーバ側で処理を行うので、クリッカブルマップをサポートしたウェブサーバ以外の場所(例えば、ローカルファイルや FTP)では利用できなく、さらにCGIアクセス権が必要です。
もう一つはクライアント・サイド・クリッカブルマップといって、HTML文書内部にマップを記述する方式です。図形やURLなどの情報をHTML文書内部にマップを記述され、ブラウザ側で処理されるのでウェブサーバの種類に依存しません。ただし、ブラウザによっては扱えない場合があるので注意が必要です。
ここではクライアント・サイド方式のクリッカブルマップの利用法を扱っていきます。
クリッカブルマップの作成
クリッカブルマップは次のような手順で作成します。
- イメージマップにする絵を用意
- ポイント部分の座標を決定
- 座標とURLを記述
- HTMLファイルから呼び出す
イメージマップにする絵を用意
多くのWWWブラウザで標準的に利用できる、GIFフォーマットの画像で十分です。特別な画像である必要はありません。
とりあえず次のような画像を用意しました。
ポイント部分の座標を決める
画像のリンク領域を設定します。座標でリンク領域を指定するので、手動だと少し大変です。ここではこの作業専用のアプリケーションソフトを使用します。以下はよく使われるマップファイル作成用アプリケーションソフトとそのURLです。
MAPタグ
<MAP name="マップ名">
座標とURIの対応を記述したマップの作成には、 <MAP>タグを使用します。クライアントサイド・クリッカブルマップは、 HTMLファイルにマップ情報を直接記述して利用する事ができます。リンク領域の座標を割り出すことができたら、それをHTMLファイルに埋め込みます。
MAPタグは必ずname属性を使用します。このname属性は、後でMAPタグを呼び出す際に使用します。
<MAP name="マップ名"></MAP>
MAPタグはそれ自身だけでは何もできないので、その中に座標と、そのリンク先を指定するタグをネスティングします。座標とリンク先の指定には、A要素を使う新しい方法と、AREA要素を使う古い方法があります。A要素を使う方法は、Internet Explolerなどの主要ブラウザが対応していないため、ここでは、AREA要素を使う古い方法を説明します。
AREA要素
<MAP name="map1"> <!--円の場合--> <AREA href="circle.html" shape="circle" coords="115,35 143,35">< <!--四角形の場合--> <AREA href="rect.html" shape="rect" coords="6,8 62,64"> <!--多角形の場合--> <AREA href="polygon.html" shape="polygon" coords="169,63 220,63 201,11 190,11 171,62"> </MAP>
以下、順を追って説明します。
座標タグ
<AREA>
クリッカブルマップの座標と、リンク先のファイルを指定します。
<AREA href="リンク先ファイル" shape="形状" coords="座標">
AREAタグは、以下の要素から構成されています。
- href属性
- リンク先のファイルを指定します。
- shape属性
- 座標指定のフォーマット。円形、長方形、多角形の3種類があります。
- coords属性
- 座標です。数値で指定します。
リンク先のファイル指定：href = "ファイル名"、nohref
href
hrefはクリックした時のハイパーリンク先を記述します。
<map name="map01"> <area href="rect.html"> <area href="circle.html"> <area href="polygon.html"> </map>
nohref
nohrefは何も実行しない事を指定します。
この nohrefは、例えばクリック範囲を重ね書きし、ある部分だけハイパーリンクを除外したい場合等に用いることができます。マップは最初の行から評価されるので、優先したい範囲を前に記述します。ある部分だけ除外するには、まず除外したい範囲(nohref)を記述し、次に範囲全体をhrefで記述すれば、除外したい部分だけハイパーリンクポイントとなりません。
座標指定のフォーマット：shape = circle | rect | polygon
sharpe属性は、座標指定のフォーマット（形状）を指定します。shapeはクリック範囲の形を指定し、円形(CIRCLE)・四角形(RECT)・多角形(POLYGON)が可能です。shapeが省略されていれば、四角(RECT)が使用されます。
- 円形の場合の属性値：circle
- 長方形の場合の属性値：rect
- 多角形の場合の属性値：polygon
最初に用意した画像のリンク可能領域は次のようになりました。まだ座標とリンク先を指定していません。
<MAP name="map01"> <!-- 四角形 --> <AREA href="rect.html" shape="rect"> <!-- 円形 --> <AREA href="circle.html" shape="circle"> <!-- 多角形 --> <AREA href="polygon.html" shape="polygon"> </MAP>
座標指定：coords = "座標"
coordsは、shape属性で指定したフォーマットの座標を決定します。フォーマットによって座標の指定の仕方が違います。
円形（circle）の場合は中央の座標(X,Y)と半径(Radius)を記述します。四角形（rect）の場合、左上と右下の二点の座標(図の左上隅が(0,0))を記述します。多角形（polygon）の場合はそれぞれの座標をリスト形式で記述します(始点や方向は関係ありません)。範囲が重なった場合、最初の範囲が優先されます。
circle
円、座標は円の中心と周の座標の二つ
x1,y1 x2,y2
rect
四角形、上左座標と下右座標の二つ
x1,y1 x2,y2
polygon
多角形、座標は角の点座標、但し100角形までしか作成できません
x1,y1 x2,y2 x3,y3 ... x10,y10
専用アプリケーション、または自分で座標を割り出します。座標が決まったら、HTMLファイルに記述しましょう。
<MAP name="map01"> <!-- 四角形 --> <AREA href="rect.html" shape="rect" coords="6,8 62,64"> <!-- 円形 --> <AREA href="circle.html" shape="circle" coords="115,35 143,35"> <!-- 多角形 --> <AREA href="polygon.html" shape="polygon" coords=& quot;173, 60, 196, 5, 217, 62"> </MAP>
マップの呼び出し
<IMG src="画像ファイル名.gif" usemap="マップ名">
MAPタグが完成したら、次にMAPタグを呼び出します。
通常の表記： <IMG src="画像ファイル名のURL" usemap="マップ名">
画像自体にもリンク： <IMG src="画像ファイル名のURL" usemap="マップファイルのURL#マップ名">
usemap属性にマップの名前を記述します。ここでのマップ名は"map01"です。画像自体にリンクをつけない場合は、次のように記述します。
<IMG src="../images/clickablemap.gif" usemap="#map01">
画像自体にもリンクする場合は、usemapにファイル名も記入できます。
<IMG src="../images/clickablemap.gif" usemap="map.html#map01">
完成したソースは次のようになります。
<map name="map01"> <area href="rect.html" shape="rect" coords="8, 9, 63, 65"> <area href="circle.html" shape="circle" coords="115, 34, 29"> <area href="polygon.html" shape="polygon" coords="173, 60,196, 5, 217, 62"> </map> <img src="/parts/html/images/clickablemap.gif" border="0" width="224" height="74" usemap="#map01">