lHTML リンク クリッカブルマップ '96. 12. 6
l.お知らせ 内容 LINK FILE   HTML Win PC Unix MS-DOS C C++ Mfc Java 
.全般_ .文字 _配置   _リンク .フレ-ム  CGI .タグ一覧.
登録_ .音・画. .スタイル .--. .ActiveX.  ---  .名前. _一覧
  リンク   URL   自動リンク   マップ   転送   メ-ル   フォルダ  
クリッカブルマップ  サンプル  部分的に除外する例  補助タグの用例
BG=Big-BK_K.gif img=Big-MAP.gif
クリッカブルマッブ
画像の一部分をクリックしたら、別なページへリンクされるように設定します。
画像のどの部分をクリックしたかなどは、IE4.0 などのブラウザが処理してくれます。

画像表示用の補助タグ
<IMG
SRC="aaa.gif"
ALT="Aの絵です。"
WIDTH=200
HEIGHT=200
BORDER=0
USEMAP="#mapA"
TITLE="私の絵です。"
ID="Pa"
>
 
画像ファイル
代替え文章( 絵が表示されないときに、代りに表示されます。)
表示する横幅( 絵は伸縮されます。)
表示する縦幅( 〃  )
縁取りの幅( 指定しないと、Netscape では1になります。)
クリッカブルマップ名( クリッカブルマップを使うときに必要です。)
メッセージ文章( IE4.0 のみ。: マウスが行ったときに表示されます。)
位置名( IE4.0 : この絵の位置を指定したリンクを書くときに使います。)

WWWブラウザは、このデータに基づいて画像を表示します。
これは、絵を表示したい位置に書きます。

クリッカブルマップ用のタグ
<MAP NAME="mapA">
<AREA
  SHAPE="rect"
  COORDS="0,0,50,50"
  HREF="a.htm"
  TARGET="_selfe"
  NOHREF
>
<AREA . . . >
</MAP>
どの絵を使うのか、マップ名で指定します。
ひとつの範囲の、設定をします。
 範囲の形を指定します。rect/circle/poly(四角形/円/多角形)
 具体的な座標を指定します。
 クリックしたら表示するページを指定します。
 表示するウィンドウまたはフレームを指定します。
 にリンクを無効にする範囲に指定します。
設定終了。
複数の部分を使用する場合は、それぞれに設定します。
クリッカブルマップの設定終了。
これは、<HEAD>〜</HEAD> の間に書くこともできます。
クリックされると、このデータを使って 指定されたページが表示されます。

範囲の指定
まず、指定する範囲の形を選択します。
SHAPE=rectangle ( rect ) : 四角形。 ( )内の省略形も使用できます。
SHAPE=circle ( circ )  : 円形。 省略形の circ は、IE4.0 のみ使用できます。
SHAPE=polygon ( poly ) : 多角形。

次に、座標を指定して具体的な範囲を設定します。
座標は、Y座標, X座標の順に記述します。
四角形 : COORDS=四角形の左上, 右下
円形 : COORDS=中心, 半径  (半径は、座標ではなく長さです。)
多角形 : COORDS=頂点1, 頂点2,頂点3, ・・・

画像の左上が原点になります。
Y座標は、原点から右方向への距離で表わします。
X座標は、原点から下方向への距離で表わします。

指定した範囲が 画像の外側にはみ出す場合は、はみ出した部分は無効になります。
画像の外側をクリックしても、リンクはされません。


クリッカブルマッブの例
例と、そのソースファイルを示します。( クリックできます。)
0 50 100 200
この画像の大きさは、200×200 ピクセルです。
0
50
100
200
この中には3個のリンクが張ってあります。

白の部分は、横方向0〜50 縦方向0〜50 の範囲の四角形です。
赤の部分は、横方向100 縦方向75 を中心に、半径 25 の範囲の円形です。
緑の部部は、横方向 0 縦方向200 の点と、
      横方向200 縦方向 0 と、
      横方向200 縦方向100 を結ぶ、三角形(多角形)です。

白赤緑の部分にはリンクが設定してあります。
白 : [Aのページ] へのリンク。
赤 緑 : [Bのページ] へのリンク。
  (元の絵は 0.98 KBytの、50×50 ピクセルの画像です。)

<IMG SRC="../gazou_h/Big-MAP.gif"
  WIDTH=200 HEIGHT=200
  USEMAP="#MAP1"
  BORDER=0
>
<!--画像を表示します。-->
<!--画像の大きさを指定すると 位置の指定が楽です。-->
<!--この画像に、名前(マップ名)を付けます。-->
<!--画像の縁取りを 0 にします。(Netscape用。)-->
<!--上記のコメントは、実際には書きません。-->

<MAP NAME="MAP1"> <!--マップ名を指定して、以下のリンクを設定します。-->
 <AREA SHAPE="RECT" COORDS="0,0,50,50" HREF="a.htm"> <!--四角形 (白)-->
 <AREA SHAPE="CIRCLE" COORDS="100,75,25" HREF="b.htm"> <!--円形 (赤)-->
 <AREA SHAPE="POLY" COORDS="0,200,200,200,200,100" HREF="b.htm"> <!--多角形 (緑)-->
</MAP> <!--クリッカブルマップの設定終了。-->
メモ : <タグ> の中にはコメントを書けません。
  従って、上記のテキストをコピーする場合は、二回に分けてコピーします。
  画像は用意する必要があります。どんな画像でも(真白でも) かまいません。

位置データは画像の左上を基点にして、そこからの距離で表わします。
位置データを記述する順番は次のとおりです。
rect(四角形) : 四角形の左上Y座標, X座標, 右下Y座標, X座標 
circle(円形) : 円形の中心Y座標, X座標, 半径
poly(多角形) : ひとつめの頂点のY座標, X座標, 2つめの頂点のY座標, X座標, ・・・

数学のグラフでは、左上が原点(第4象限)の場合にはY座標は負になりますが、 この場合は原点からの変移(座標の絶対値)で記述します。


部分的に、指定範囲を除外する。
AREA で指定した範囲から、特定の部分を除く場合は、NOHREF を使います。
上記の例で、白い四角形の左上 1/4 だけを除外する例を示します。

メモ : このサンプルテキストは、そのままでは使用できません。
  コピーして使う場合は、全角スペースとコメントを 削除する必要があります。
<IMG SRC="../gazou_h/Big-MAP.gif" 画像を指定します。
  WIDTH=200 HEIGHT=200   画像の表示大きさを指定すると、位置の指定が楽です。
  USEMAP="#MAP1"   この画像に対するリンク設定の名前(マップ名)を付けます。
  ALT="3個のリンク" 画像を表示できないブラウザ用のメッセージ。
  BORDER=0   画像の縁取りを 0 にします。(Netscape用。)
>
<MAP NAME="MAP1">  マップ名を指定して、以下のリンクを設定します。
<AREA SHAPE="RECT" COORDS="0,0,25,25" NOHREF>  四角形 (白 左上)
<AREA SHAPE="RECT" COORDS="0,0,50,50" HREF="BB.htm">  四角形 (白)
<AREA SHAPE="CIRCLE" COORDS="100,75,25" HREF="AA.htm">  円形 (赤)
<AREA SHAPE="POLY" COORDS="0,200,200,200,200,100" HREF="CC.htm"> 多角形 (緑)
</MAP>  クリッカブルマップの設定終了。

これで白い四角形は、左上 1/4 以外の部分だけが、BB.htm にリンクされます。


表示ウィンドウの指定
リンク先のページを新しいウィンドウで表示する場合や、フレームを使ったページで表示するフレームを指定する場合は、TARGET で指定します。
上記の例で、BB.htm を新しいウィンドウを開いて表示する場合は次のように書きます。
<AREA SHAPE="RECT" COORDS="0,0,50,50" HREF="BB.htm" TARGET="XYZ"> 四角形 (白)
SHAPE, COORDS, HREF などの補助タグは、他のタグの場合と同様に、記述の順番の制限はありません。

ターゲットウィンドウ(TARGET)については、[リンク] のページにも記事があります。




  mtoga@sannet.ne.jp   登録日 '96. 6.15
URL : http://www.page.sannet.ne.jp/mtoga/index.html