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

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

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

クリッカブルマップ用のタグ
<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 )　:　多角形。

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

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

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

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

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

白赤緑の部分にはリンクが設定してあります。
白　:　[Ａのページ] へのリンク。
赤 緑　:　[Ｂのページ] へのリンク。
　　(元の絵は 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(四角形) : 四角形の左上Ｙ座標,　Ｘ座標,　右下Ｙ座標,　Ｘ座標　
circle(円形) : 円形の中心Ｙ座標,　Ｘ座標,　半径
poly(多角形) : ひとつめの頂点のＹ座標,　Ｘ座標,　２つめの頂点のＹ座標,　Ｘ座標, ・・・

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

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

メモ : このサンプルテキストは、そのままでは使用できません。
　　コピーして使う場合は、全角スペースとコメントを 削除する必要があります。
<IMG SRC="../gazou_h/Big-MAP.gif"　画像を指定します。
  WIDTH=200 HEIGHT=200　　　画像の表示大きさを指定すると、位置の指定が楽です。
  USEMAP="#MAP1"　　　この画像に対するリンク設定の名前(マップ名)を付けます。
  ALT="３個のリンク"　画像を表示できないブラウザ用のメッセージ。
  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