Windowsな貴方は、こちらから！ |
| １１．イメージマップについて
1999.07.25 |
-----------------------------------------------------------
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/~art/xx/xxx1.html
100,50 100,60
poly http://www.katch.ne.jp/~art/xx/xxx2.html
150,150 200,200 150,170
rect http://www.katch.ne.jp/~art/xx/xxx3.html
300,100 400,200
default http://www.katch.ne.jp/~art/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/~art/xx/xxx1.html」の
ファイルを呼びだします。」
4) 「poly ......... 150,150 200,200 150,170」とは
その図形の外郭線が通過する角の座標を繋げて記していき
ます。この時「x,y」と","で縦軸,横軸の間を区切り、また次の座標
との間にはスペースを取ることに注意して下さい。
この例の場合には座標軸が３つありますから、リンクに対応する
エリアは三角形ということになります。
5) 「rect ........... 300,100 400,200」とは
四角形の場合は左上「300,100」と右下「400,200」の座標をそれ
ぞれ指定するだけでOKです。
マップファイルの記述が済んだら、あとはこの三つのファイルを
同じディレクトリにおくだけで大丈夫です。
-----------------------------------------------------------
|
| . |
-----------------------------------------------------------
|
|
