クリッカブル・マップ


下の絵の中にある、丸、三角形、四角形の上でクリックしてみてください。

このように、画像の中の位置や領域に対してリンクを設定する機能を持っているのが クリッカブルマップです。 先ず、マップとなる画像を用意します。 画像の中で、リンクを張る領域の位置を調べます。 丸であれば、中心座標と、円周上の任意の座標の2点を調べます。 四角形(矩形)であれば、ひとつの対角線を選び、その2つの端点を調べます。 三角形や五角形等の多角形は、各頂点の座標を調べます。 後は、これらの図形に対して、URLを指定するだけです。 上のマップの例を示します。


default default.html
# maru
circle maru.html 77,91 77,159
# sikaku
rect sikaku.html 197,41 332,166
# sankaku
poly sankaku.html 151,169 52,272 283,267 151,169 151,169

これを、マップファイルに保存します。マップファイル自体は単なるテキストファイルですからメモ帳でも作成できます。 拡張子は、".map"にしてください。

HTML文書の中では、次のように記述します。


<a href="test.map">
<img src="test.gif" ismap width="400" height="300">
</a>

このような、マップをいくつも作るときには、手作業では面倒です。クリッカブルマップを作成するツールがいくつか市販されたり、シェアウェア、フリーソフトウェアとして流通しています。 Map THIS!というフリーソフトウェア(現在はLiveImageというシェアウエアになっている)のマップエディタを見つけたので、必要なら自分でインストールして使ってください(g:\www\public\mapthis にあります)。


問い合わせ tanioka@ishikawa-pc.ac.jp

目次へ戻る