-----------------------------------------------------------
1)一枚の画像内に複数のリンクが設定されているものをイメージ
マップ(クリッカブルマップ)と呼びます。この仕組みをホーム
ページに取り込む際に必要なもを以下に示します。
1.HTMLファイル
2.画面上に張り込む画像ファイルに
3.「マップファイル」と呼ばれるリンクを指定するファイル
1と2は普通の画像ファイルを取り込む場合と一緒で、それに3の
マップファイルが加わります。マップファイルは、HTMLファイル
と同じくテキストで書かれたもので、内容は画像上でリンクを張る
位置(座標)の記述だけです。
ここでは説明上、それぞれのファイルを以下のように仮定し
説明します。
1.index.html
2.abc.gif
3.abc.map
まずHTMLファイル「index.html」の中に、画像を取り込むタグを書
きます。そして、この画像が「イメージマップとして使われる」こと
を示すために、ソース(SRC="")の後に「ISMAP」と
つけ加えます。
<IMG SRC="abc.gif" ISMAP>
次に、この画像とイメージマップとを結びつけるリンクをHTML
ファイルに書きます。
<A HREF="abc.map"><IMG
SRC="abc.gif" ISMAP></A>
最後にマップファイルに、以下のようにしてイメージマップ上で
リンクを張られるエリアを指定します。
2)[マップファイルの例]
circle http://www.katch.ne.jp/~xxx/xx/xxx1.html
100,50 100,60
poly http://www.katch.ne.jp/~xxx/xx/xxx2.html
150,150 200,200 150,170
rect http://www.katch.ne.jp/~xxx/xx/xxx3.html
300,100 400,200
default http://www.katch.ne.jp/~xxx/xx/xxx4.html
ここで「circle(円形)」「poly(多角形)」「rect(四角形)」とある
のは、その後に来るリンクに対応するエリアの形です。
(「default」はリンクの指定範囲外すべてのエリアをクリック
した時に呼び出されるURLです)
そして、各行の最後にならんだ数字は、それぞれのエリアが
位置する座標軸(横軸がX, 縦軸がY)を示したものです。
3) 「circle .......... 100,50 100,60」とは
画像の左上隅を「X=0、Y=0」として、「右に100ピクセル上から
50ピクセルの位置に中心点を持ち、10ピクセルの半径で
広がる円形のエリアに張られたリンクが、
「http://www.katch.ne.jp/~xxx/xx/xxx1.html」の
ファイルを呼びだします。」
4) 「poly ......... 150,150 200,200 150,170」とは
その図形の外郭線が通過する角の座標を繋げて記して
いきます。
この時「x,y」と","で縦軸,横軸の間を区切り、また次の座標と
の間にはスペースを取ることに注意して下さい。
この例の場合には座標軸が3つありますから、リンクに対応
するエリアは三角形ということになります。
5) 「rect ........... 300,100 400,200」とは
四角形の場合は左上「300,100」と右下「400,200」の座標を
それぞれ指定するだけでOKです。
マップファイルの記述が済んだら、あとはこの三つのファイルを
同じディレクトリにおくだけで大丈夫です。
-----------------------------------------------------------
|