クリッカブルマップの作り方

私が情報教育の宝島のトップページで使用しているのは、
ＣＧＩなどを利用せずにＨＴＭＬタグだけで設定できるマップです。
これをクライアントサイド・クリッカブルマップといいます。

ここでは、このクライアントサイド・クリッカブルマップの作り方を説明します。

①まずクリッカブルマップにしたい絵を描きましょう。

②次に、クリッカブルにしたい位置の座標を調べます。
　ここでは、ペイントブラシを例に調べてみましょう。

今、この絵に沿って四角い形のリンクを付けたいとき、
絵の四隅の座標（青い丸の部分）を調べます。



絵の左上にペンを持っていって 、ペイントブラシの右下を見て下さい。
青い丸で囲ってる部分に、座標が表示されていますね。
これが、この絵の左上の座標(x,y)です。

同様に、四隅の座標を調べましょう。

③座標を調べたら、htmlファイルに構文を書きましょう。

クリッカブルマップの構文
＜ＩＭＧ　ＳＲＣ＝”マップとして使うファイル名”　ＵＳＥＭＡＰ＝”＃★”＞
＜ＭＡＰ　ＮＡＭＥ＝”★”＞
＜ＡＲＥＡ　ＳＨＡＰＥ＝”○”　ＣＯＯＲＤＳ＝”♪”　ＨＲＥＦ＝”リンク先のＵＲＬ”＞
　　・
　　・
　　・
＜/ＭＡＰ＞

　　★　には　マップの名前を書きましょう（GIFファイル名と同じ名前でいいです）
　　○　には　リンク指定箇所の形状を、
　　♪　には、さきほど調べた座標をイメージの左上の点から書きましょう

　　○(SHAPE)にいれるリンク指定箇所の形状というのは、
　　リンクの形のことです。
　　ここでは、四角い形のリンクなのでrectを使います。
　　形によって、♪(COORDS)の中に入れる座標も違うので注意しましょう。

四角い形のリンクにしたい時　→○にはrect　　→♪には(左上),(右下)の座標
円のリンクにしたい時　　　　→○にはcircle　→♪には(円の中心),(半径)の座標
多角形のリンクにしたい時　　→○にはpoly　　→♪には(左上を開始点として半時計回りにすべての頂点)の座標


ここでは、★にはonpu1、○にはrect、♪には 21,29,106,129 をいれます。

＜img src="onpu1.gif" usemap="#onpu1"＞
＜map name="onpu1"＞
＜area shape="rect" coords="21,29,106,129" href="landtop.html" alt="情報教育の宝島へ"＞
＜/map＞

・・・となるわけです。
絵をクリックしてみてください。情報教育の宝島のページに戻ります♪

情報教育の宝島へ