■ クリッカブルマップ

クリッカブルマップを使うと、１つの画像や写真（イメージ・ファイル）から複数のリンクを張ることができます。
クリッカブルマップにはクライアントサイド・クリッカブルマップとサーバサイド・クリッカブルマップの２種類があります。
クライアントサイドはブラウザで実行するので超初心者でも簡単に作ることができます。一方、サーバサイドの方は文字通りサーバが実行することになるので、そのためのソフトが必要になるし、サーバにプログラム（CGI）を作る必要があるので、超初心者には作ることはできません。もちろん３４号もわかりません。ということでこの講座ではクライアントサイド・クリッカブルマップを勉強します。
ちなみに、クリッカブルマップではなくイメージマップという場合もあります。クライアントサイド・クリッカブルマップはクライアント・イメージマップということになります。
能書きはこれくらいにして、どんなものかやってみます。

ペイント を使って、こんな画像を作ってみました。

こんな画像 →

この画像を使ってリンクを張る場合はこのように書きますね。
イメージ・ファイル名は map1.gif 、リンク先ファイル名は link_default.html です。

<a href="link_default.html" target="_blank">
　<img src="map1.gif" border="0" alt="全体のリンク">
</a>

リンクタグの target 属性は前に説明したけど、target="_blank" は、新しいウィンドウを開いてリンク先を読み込む場合ですね。指定しなければ同一ウィンドウに読み込まれます。

次はクリッカブルマップを使います。同じ画像ですが、四角形、円形、三角形、矢印毎にリンク先が違います。それぞれクリックしてみて下さい。

それぞれ別のファイルにジャンプしましたね。
それでは HTML でクリッカブルマップを作ってみましょう。
クリッカブルマップに使うタグは下表のとおりです。

<img src="ファイル名"> はおなじみですね。
usemap 属性で、どのマップを使うのかを指定します。マップ名の前に # を入れるのを忘れないように。
usemap 属性の値であるマップ名は <map> タグの name 属性で決定します。適当にわかりやすい名前を付けて下さい。
そして、<area> タグおよびその属性である shape 、coords を使ってマップの中のどの領域（エリア）をリンク元とするか、さらに href 属性を使って、どのファイル(リンク先）にジャンプするかを決めることになります。
<area> タグは <map> タグの中に記述します。
shape 属性と coords 属性は下表に従って記述します。座標の基準値（x,y）＝（0,0）はイメージファイルの左上です。座標の値はピクセル数で指定します。

これだけではイメージがわかないと思いますので、先ほどの見本を使って座標を見てみます。見にくいので拡大しました。座標は拡大前の値です。

この画像を見ながら、ソースを確認して下さい。
リンク先のファイル名は、四角形 link_rect.html 、円形 link_circle.html 、三角形 link_poly1.html 、矢印 link_poly2.html としました。

<img src="map1.gif" usemap="#map_1" border="0">
<map name="map_1">
　<area shape="rect"
　　coords="20,20,80,80"
　　href="link_rect.html" alt="四角形" target="_blank">
　<area shape="circle"
　　coords="130,50,30"
　　href="link_circle.html" alt="円形" target="_blank">
　<area shape="poly"
　　coords="210,20,180,80,240,80"
　　href="link_poly1.html" alt="三角形" target="_blank">
　<area shape="poly"
　　coords="260,35,260,65,300,65,300,80,330,50,300,20,300,35"
　　href="link_poly2.html" alt="矢印" target="_blank">
</map>

だいたいわかりますよね。
四角形の座標は"x,y,x,y"、円形の座標は"x,y,r"、多角形の座標は"x,y,x,y,x,y,…,x,y"ですね。三角形は多角形に含まれます。
注意点として、<img> タグには border="0" を入れること。１つ画像の中にいくつかのリンク枠ができたら格好悪いですよね。また、<area> タグには alt 属性を入れておけば親切ですね。

さてさて、簡単そうだからやってみよう！と思っても、途中で嫌になるかもしれません。座標の値を見つけるのがめんどうだからです。
そこでヒント！
画像を作ったり、加工ができるソフトがあれば、簡単に座標がわかります。
例えばペイント。ここで使った見本はちゃんと座標を見ながら作りました。
ペイントで画像を加工していると、画面右下にこんな数字が出ます。

こんな数字 →

これは四角形を作っている途中ですが、左側の値がスタート座標で、右側の値が移動座標です。左上の座標（80,40）からスタートして、x 方向（右）に 200px 、y 方向（下）に 100px 移動しています。つまり、この四角形の座標は、左上（80,40）、右下（280,140）ということになりますね。
したがって、<area shape="rect" coords="80,40,280,140">です。
細かい修正は実際に HTML ファイルに貼り付けてみてからでもできますね。いくつか作っていくうちに、そういったソフトを使わなくてもわかるようになってきます。画面を見ながら、「これは左から100ピクセル、上から200ピクセルくらいかな」とか「あと左に50ピクセルくらい動かせばいいかな。ってことは x 座標を-50だな」といった感じです。

クリッカブルマップは、例えばこんな使い方ができます。ここは？と思うところにマウスを当ててみて下さい。

とりあえず・・・おしまーい！

1/8/2001　いまいち超初心者
3/4/2001　改訂