超初心者のためのホームページ作成講座
HTML CSS Dictionary Netscape Color AccessUp Links SiteMap
 Home > 超初心者のためのホームページ作成講座 > クリッカブルマップ

■ クリッカブルマップ

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


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

こんな画像 → 全体のリンク

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

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

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


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

4つのリンク 四角形 円形 三角形 矢印

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

タグ名プロパティ説明
<img>srcイメージ・ファイル名画像を指定する
usemap#マップ名マップを指定する
<map>〜</map>nameマップ名マップ名を決める
<area>

※<map>タグの中に記述
shaperect四角形
circle円形
poly多角形
coordsピクセル数座標、半径
hrefファイル名リンク先URL

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

shape 属性coords 属性
rect四角形の左上の座標(x,y)、右下の座標(x,y)
circle円形の中心の座標(x,y)、半径の長さ(r)
poly多角形の全ての角の座標(x,y)

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

リンク画像に座標を表示

この画像を見ながら、ソースを確認して下さい。
リンク先のファイル名は、四角形 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" を入れること。1つ画像の中にいくつかのリンク枠ができたら格好悪いですよね。また、<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だな」といった感じです。


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

クリッカブルマップ見本のための家の絵 HTMLタグ&スタイルシート辞典 Homeへ戻る 超初心者のためのホームページ作成講座 超初心者のためのスタイルシート講座 アクセスアップ講座 超初心者のためのフレーム講座 Netscape6でホームページをつくろう! お気に入りリンク


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

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


 Home < 超初心者のためのホームページ作成講座 < Back < クリッカブルマップ