Macな貴方は、こちらから!

11.イメージマップについて 1999.07.25
-----------------------------------------------------------

 1)一枚の画像内に複数のリンクが設定されているものをイメージ
  マップ(クリッカブルマップ)と
呼びます。この仕組みをホーム
  ページに取り込む際に必要なもを以下に示します。


   1.HTMLファイル
   2.画面上に張り込む画像ファイルに
   3.「マップファイル」と呼ばれるリンクを指定するファイル


  12は普通の画像ファイルを取り込む場合と一緒で、それに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です。
  
マップファイルの記述が済んだら、あとはこの三つのファイルを
   同じディレクトリにおくだけで
大丈夫です。

-----------------------------------------------------------
.
-----------------------------------------------------------

戻る

トップページ

SINCE 07/25/1999 artおじさん