HTML4.0の基本

クリッカブルマップ・イメージマップ

クリッカブルマップの基礎知識

イメージマップとは

ブラウザ内に表示された画像の一部分をクリックすることで、指定した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">

関連記事