─ KeyNavi:キーボードを活用して 
ホームページを快適に─
 
ホーム KeyNavi対応方法 [0] API リファレンス 目次 [1] 7. レイヤー処理 ・サイトマップ [Shift-S]

KeyNavi API リファレンス
 ■ 7. レイヤー処理

【このページ内のトピック: 「Y/H」で頭出し・「G/T」連打で自動ナビ】
7.1 要素の取得
7.1.1 kl_getelem(id):オブジェクト取得
7.1.2 kl_getimg(name):画像オブジェクト取得
7.2 要素の属性処理
7.2.1 kl_replace(id,s,mode,ns4,col):要素の中身変更
7.3 レイヤーの基本属性処理
7.3.1 kl_layer_x(id,defval):レイヤーのX座標
7.3.2 kl_layer_y(id,defval):レイヤーのY座標
7.3.3 kl_layer_width(id,defval):レイヤーの幅
7.3.4 kl_layer_height(id,defval):レイヤーの高さ
7.3.5 kl_layer_zindex(id,defval):レイヤーの奥行き値
7.3.6 kl_layer_fgcolor(id,defval):レイヤーの前景色
7.3.7 kl_layer_bgcolor(id,defval):レイヤーの背景色
7.3.8 kl_layer_bgimage(id,defval):レイヤーの背景画像
7.3.9 kl_layer_setzindex(id,val):レイヤーの奥行き値設定
7.3.10 kl_layer_show(id):レイヤー表示
7.3.11 kl_layer_hide(id):レイヤー非表示
7.3.12 kl_layer_setfgcolor(id,color,ns4string):レイヤー前景色設定
7.3.13 kl_layer_setbgcolor(id,color,color2):レイヤー背景色設定
7.3.14 kl_layer_setbgimage(id,src):レイヤー背景画像設定
7.3.15 kl_layer_moveto(id,x,y):レイヤー移動
7.3.16 kl_layer_moveby(id,dx,dy):レイヤー差分移動
7.3.17 kl_layer_setpos(id,pos,check):レイヤー配置
7.3.18 kl_layer_centralize(id,check):レイヤーを中心位置に
7.3.19 kl_layer_resizeto(id,w,h):レイヤーサイズ変更
7.3.20 kl_layer_resizeby(id,dw,dh):レイヤーサイズ差分変更
7.3.21 kl_layer_setclip(id,t,r,b,l):レイヤークリップ
7.3.22 kl_layer_setopacity(id,val):レイヤー不透明度指定
7.3.23 kl_layer_write(id,s,ns4,col):レイヤーの中身書き替え
7.4 ドラッグ、Raise
7.4.1 kl_drag_set(id):レイヤードラッグ登録
7.4.2 kl_drag_clear(id):レイヤードラッグ解除
7.4.3 kl_raise_set(id):レイヤーRaise設定
7.4.4 kl_raise_clear(id):レイヤーRaise解除
7.5 レイヤーの動的作成
7.5.1 kl_layer_new(arg):レイヤー動的作成
7.5.2 kl_layer_load(id,url,ns4):レイヤーのURL変更
7.6 半透明レイヤー
7.6.1 kl_tlayer_new(html,fgcolor,bgcolor,opacity,opts):半透明レイヤー作成
7.6.2 kl_tlayer_show(e):半透明レイヤー表示
7.6.3 kl_tlayer_hide(e):半透明レイヤー非表示
7.6.4 kl_tlayer_update(e):半透明レイヤーの位置、サイズを再設定
7.6.5 kl_tlayer_update_size(e):半透明レイヤーのサイズを再設定
7.6.6 kl_tlayer_moveto(e,x,y):半透明レイヤー移動
7.6.7 kl_tlayer_moveby(e,dx,dy):半透明レイヤー差分移動
7.6.8 kl_tlayer_setpos(e,pos,check):半透明レイヤー配置
7.6.9 kl_tlayer_write(e,s,ns4,col):半透明レイヤーの中身変更

注1: 「IE=Internet Explorer」「NS=Netscape」「MZ=Mozilla」「OP=Opera」の略です。
注2:

 ■ 7.1 要素の取得




■ 7.1.1  オブジェクト取得   kl_getelem(id) << 前 : 7.1 要素の取得 [Y]   |   kl_getimg [H] : 次>>
名前:
kl_getelem(id)
説明:id値から該当するオブジェクトを取得します。 もしidが文字列ではなくオブジェクトだった場合はそのまま値を返すため 型変換フィルター的に使えます。
注意:Netscape4.xでは id指定は<layer>タグか position:absoluteの<div>タグでしか動作しません。

なお Netscape4.xでは入れ子レイヤーの取得で document.layers[id0](...再帰...).document.layers[idN] とする必要がありますがこの関数を用いると 1つのID値指定のみでOKです。

使用例:

関連: kl_getimg(name)
参照: 「JavaScript@KeyNavi.Net」id値からオブジェクト取得:kl_getelem(id)
収録: keynavi_ja.js
適用:id値から対応するオブジェクトを取得したい。
対応ブラウザ:
WindowsMacLinux
IE4 IE5 IE5.5 IE6 NS4 NS6 NS7 MZ1 OP7 IE5 NS7 MZ1 NS7 MZ1
関数一覧(先頭)へ移動 [W・O]   |   スクロール位置回復 [N]




■ 7.1.2  画像オブジェクト取得   kl_getimg(name) << 前 : kl_getelem [Y]   |   7.2 要素の属性... [H] : 次>>
名前:
kl_getimg(name)
説明:name値から該当する画像オブジェクトを取得します。
注意:Netscape4.xではレイヤー内の画像オブジェクトの取得で document.layers[id0](...再帰...).document.images[name] とする必要がありますがこの関数を用いると name指定のみでOKです。
使用例: 
関連: kl_getelem(id)
参照: 
収録: keynavi_tools.js
適用:画像オブジェクトを取得したい。
対応ブラウザ:
WindowsMacLinux
IE4 IE5 IE5.5 IE6 NS4 NS6 NS7 MZ1 OP7 IE5 NS7 MZ1 NS7 MZ1
関数一覧(先頭)へ移動 [W・O]   |   スクロール位置回復 [N]

 ■ 7.2 要素の属性処理




■ 7.2.1  要素の中身変更   kl_replace(id,s,mode,ns4,col) << 前 : 7.2 要素の属性... [Y]   |   7.3 レイヤーの... [H] : 次>>
名前:
kl_replace(id,s,mode,ns4,col)
説明:要素(orそのID値)idの中身をsに変更します。 mode(略可)には"append"(後方追加)、"prepend"(前方追加)を必要に応じて 指定します。指定がない場合やその他の値の場合は 要素内容全体が置き換えられます。

引き数ns4(略可)はブラウザがNetscape4.xの場合に実行するか否かを 指定します。 Netscape4.xではレイヤー出力でバグが多いので このオプションを 真にしたい場合は実際に動作確認をするのをお勧めします。

なおkl_layer_write()は内部的にmode指定無しでこの関数を呼んでいます。

注意: 
使用例: 
関連: kl_layer_write(id,s,ns4,col)
参照: 「JavaScript@KeyNavi.Net」要素の中身を動的に変更:kl_replace(id,s,mode)
収録: keynavi_tools.js
適用:要素の中身を変更したい。
対応ブラウザ:
WindowsMacLinux
IE4 IE5 IE5.5 IE6 NS4 NS6 NS7 MZ1 OP7 IE5 NS7 MZ1 NS7 MZ1
Netscape4.xでは対象要素はレイヤーに限られます。 またmodeのappend,prependはサポート外で レイヤーの内容を全て書き替えます。
関数一覧(先頭)へ移動 [W・O]   |   スクロール位置回復 [N]

 ■ 7.3 レイヤーの基本属性処理




■ 7.3.1  レイヤーのX座標   kl_layer_x(id,defval) << 前 : 7.3 レイヤーの... [Y]   |   kl_layer_y [H] : 次>>
名前:
kl_layer_x(id,defval)
説明:レイヤー(orそのID値)idのX座標を返します。
注意:この関数はスタイルシートの指定値を参照するものです。
使用例: 
関連: kl_layer_y(id,defval)  kl_layer_width(id,defval)  kl_layer_height(id,defval)  kl_layer_zindex(id,defval)
参照: 「JavaScript@KeyNavi.Net」レイヤーの各種属性(位置,大きさ,...)を取得:kl_layer_xxx()
収録: keynavi_tools.js
適用:レイヤーのX座標を知りたい。
対応ブラウザ:
WindowsMacLinux
IE4 IE5 IE5.5 IE6 NS4 NS6 NS7 MZ1 OP7 IE5 NS7 MZ1 NS7 MZ1
関数一覧(先頭)へ移動 [W・O]   |   スクロール位置回復 [N]




■ 7.3.2  レイヤーのY座標   kl_layer_y(id,defval) << 前 : kl_layer_x [Y]   |   kl_layer_width [H] : 次>>
名前:
kl_layer_y(id,defval)
説明:レイヤー(orそのID値)idのY座標を返します。
注意:この関数はスタイルシートの指定値を参照するものです。
使用例: 
関連: kl_layer_x(id,defval)  kl_layer_width(id,defval)  kl_layer_height(id,defval)  kl_layer_zindex(id,defval)
参照: 「JavaScript@KeyNavi.Net」レイヤーの各種属性(位置,大きさ,...)を取得:kl_layer_xxx()
収録: keynavi_tools.js
適用:レイヤーのY座標を知りたい。
対応ブラウザ:
WindowsMacLinux
IE4 IE5 IE5.5 IE6 NS4 NS6 NS7 MZ1 OP7 IE5 NS7 MZ1 NS7 MZ1
関数一覧(先頭)へ移動 [W・O]   |   スクロール位置回復 [N]




■ 7.3.3  レイヤーの幅   kl_layer_width(id,defval) << 前 : kl_layer_y [Y]   |   kl_layer_height [H] : 次>>
名前:
kl_layer_width(id,defval)
説明:レイヤー(orそのID値)idの幅を返します。
注意:この関数はスタイルシートの指定値を参照するものです。
使用例: 
関連: kl_layer_x(id,defval)  kl_layer_y(id,defval)  kl_layer_height(id,defval)  kl_layer_zindex(id,defval)
参照: 「JavaScript@KeyNavi.Net」レイヤーの各種属性(位置,大きさ,...)を取得:kl_layer_xxx()
収録: keynavi_tools.js
適用:レイヤーの幅を知りたい。
対応ブラウザ:
WindowsMacLinux
IE4 IE5 IE5.5 IE6 NS4 NS6 NS7 MZ1 OP7 IE5 NS7 MZ1 NS7 MZ1
関数一覧(先頭)へ移動 [W・O]   |   スクロール位置回復 [N]




■ 7.3.4  レイヤーの高さ   kl_layer_height(id,defval) << 前 : kl_layer_width [Y]   |   kl_layer_zindex [H] : 次>>
名前:
kl_layer_height(id,defval)
説明:レイヤー(orそのID値)idの高さを返します。
注意:この関数はスタイルシートの指定値を参照するものです。
使用例: 
関連: kl_layer_x(id,defval)  kl_layer_y(id,defval)  kl_layer_width(id,defval)  kl_layer_zindex(id,defval)
参照: 「JavaScript@KeyNavi.Net」レイヤーの各種属性(位置,大きさ,...)を取得:kl_layer_xxx()
収録: keynavi_tools.js
適用:レイヤーの高さを知りたい。
対応ブラウザ:
WindowsMacLinux
IE4 IE5 IE5.5 IE6 NS4 NS6 NS7 MZ1 OP7 IE5 NS7 MZ1 NS7 MZ1
関数一覧(先頭)へ移動 [W・O]   |   スクロール位置回復 [N]




■ 7.3.5  レイヤーの奥行き値   kl_layer_zindex(id,defval) << 前 : kl_layer_height [Y]   |   kl_layer_fgcolor [H] : 次>>
名前:
kl_layer_zindex(id,defval)
説明:レイヤー(orそのID値)idの奥行き値(zIndex)を返します。
注意: 
使用例: 
関連: kl_layer_x(id,defval)  kl_layer_y(id,defval)  kl_layer_width(id,defval)  kl_layer_height(id,defval)
参照: 「JavaScript@KeyNavi.Net」レイヤーの各種属性(位置,大きさ,...)を取得:kl_layer_xxx()
収録: keynavi_tools.js
適用:レイヤーの奥行き値を取得したい。
対応ブラウザ:
WindowsMacLinux
IE4 IE5 IE5.5 IE6 NS4 NS6 NS7 MZ1 OP7 IE5 NS7 MZ1 NS7 MZ1
関数一覧(先頭)へ移動 [W・O]   |   スクロール位置回復 [N]




■ 7.3.6  レイヤーの前景色   kl_layer_fgcolor(id,defval) << 前 : kl_layer_zindex [Y]   |   kl_layer_bgcolor [H] : 次>>
名前:
kl_layer_fgcolor(id,defval)
説明:レイヤー(orそのID値)idの前景色を返します。
注意: 
使用例: 
関連: kl_layer_bgcolor(id,defval)  kl_layer_setbgcolor(id,color,color2)  kl_layer_setbgimage(id,src)  kl_layer_setopacity(id,val)
参照: 
収録: keynavi_tools.js
適用:レイヤーの前景色を取得したい。
対応ブラウザ:
WindowsMacLinux
IE4 IE5 IE5.5 IE6 NS4 NS6 NS7 MZ1 OP7 IE5 NS7 MZ1 NS7 MZ1
関数一覧(先頭)へ移動 [W・O]   |   スクロール位置回復 [N]




■ 7.3.7  レイヤーの背景色   kl_layer_bgcolor(id,defval) << 前 : kl_layer_fgcolor [Y]   |   kl_layer_bgimage [H] : 次>>
名前:
kl_layer_bgcolor(id,defval)
説明:レイヤー(orそのID値)idの背景色を返します。
注意: 
使用例: 
関連: kl_layer_fgcolor(id,defval)  kl_layer_setbgcolor(id,color,color2)  kl_layer_setbgimage(id,src)  kl_layer_setopacity(id,val)
参照: 「JavaScript@KeyNavi.Net」レイヤーの各種属性(位置,大きさ,...)を取得:kl_layer_xxx()
収録: keynavi_tools.js
適用:レイヤーの背景色を取得したい。
対応ブラウザ:
WindowsMacLinux
IE4 IE5 IE5.5 IE6 NS4 NS6 NS7 MZ1 OP7 IE5 NS7 MZ1 NS7 MZ1
関数一覧(先頭)へ移動 [W・O]   |   スクロール位置回復 [N]




■ 7.3.8  レイヤーの背景画像   kl_layer_bgimage(id,defval) << 前 : kl_layer_bgcolor [Y]   |   kl_layer_setzin... [H] : 次>>
名前:
kl_layer_bgimage(id,defval)
説明:レイヤー(orそのID値)idの背景画像(パス)を返します。
注意: 
使用例: 
関連: 
参照: 「JavaScript@KeyNavi.Net」レイヤーの各種属性(位置,大きさ,...)を取得:kl_layer_xxx()
収録: keynavi_tools.js
適用:レイヤーの背景画像を取得したい。
対応ブラウザ:
WindowsMacLinux
IE4 IE5 IE5.5 IE6 NS4 NS6 NS7 MZ1 OP7 IE5 NS7 MZ1 NS7 MZ1
関数一覧(先頭)へ移動 [W・O]   |   スクロール位置回復 [N]




■ 7.3.9  レイヤーの奥行き値設定   kl_layer_setzindex(id,val) << 前 : kl_layer_bgimage [Y]   |   kl_layer_show [H] : 次>>
名前:
kl_layer_setzindex(id,val)
説明:レイヤー(orそのID値)idの奥行き座標をval(数値)に設定します。
注意: 
使用例: 
関連: 
参照: 
収録: keynavi_tools.js
適用:レイヤーの奥行き値を指定したい。
対応ブラウザ:
WindowsMacLinux
IE4 IE5 IE5.5 IE6 NS4 NS6 NS7 MZ1 OP7 IE5 NS7 MZ1 NS7 MZ1
関数一覧(先頭)へ移動 [W・O]   |   スクロール位置回復 [N]




■ 7.3.10  レイヤー表示   kl_layer_show(id) << 前 : kl_layer_setzin... [Y]   |   kl_layer_hide [H] : 次>>
名前:
kl_layer_show(id)
説明:スタイル属性がhiddenとなって表示されていない レイヤー(orそのID値)idを表示します。
注意: 
使用例: 
関連: 
参照: 「JavaScript@KeyNavi.Net」レイヤーの表示・非表示切替え:kl_layer_show/hide(id)
収録: keynavi_tools.js
適用:レイヤーを表示したい。
対応ブラウザ:
WindowsMacLinux
IE4 IE5 IE5.5 IE6 NS4 NS6 NS7 MZ1 OP7 IE5 NS7 MZ1 NS7 MZ1
関数一覧(先頭)へ移動 [W・O]   |   スクロール位置回復 [N]




■ 7.3.11  レイヤー非表示   kl_layer_hide(id) << 前 : kl_layer_show [Y]   |   kl_layer_setfg... [H] : 次>>
名前:
kl_layer_hide(id)
説明:レイヤー(orそのID値)idを非表示(hidden)にします。
注意: 
使用例: 
関連: 
参照: 「JavaScript@KeyNavi.Net」レイヤーの表示・非表示切替え:kl_layer_show/hide(id)
収録: keynavi_tools.js
適用:レイヤーを非表示にしたい。
対応ブラウザ:
WindowsMacLinux
IE4 IE5 IE5.5 IE6 NS4 NS6 NS7 MZ1 OP7 IE5 NS7 MZ1 NS7 MZ1
関数一覧(先頭)へ移動 [W・O]   |   スクロール位置回復 [N]




■ 7.3.12  レイヤー前景色設定   kl_layer_setfgcolor(id,color,ns4string) << 前 : kl_layer_hide [Y]   |   kl_layer_setbg... [H] : 次>>
名前:
kl_layer_setfgcolor(id,color,ns4string)
説明:レイヤー(orそのID値)idの前景色をcolorにします。 成功時は真、失敗時は偽を返します(その他のset系関数も同様)。
注意:Netscape4.xではレイヤーの中身を書き替える時にしか 前景色を変更できません。ns4stringでレイヤーの中身を指定します。 省略時は何も起きません。
使用例: 
関連: 
参照: 「JavaScript@KeyNavi.Net」前景色(文字色)変更:kl_layer_setfgcolor(id,...)
収録: keynavi_tools.js
適用:レイヤーの前景色を変更したい。
対応ブラウザ:
WindowsMacLinux
IE4 IE5 IE5.5 IE6 NS4 NS6 NS7 MZ1 OP7 IE5 NS7 MZ1 NS7 MZ1
関数一覧(先頭)へ移動 [W・O]   |   スクロール位置回復 [N]




■ 7.3.13  レイヤー背景色設定   kl_layer_setbgcolor(id,color,color2) << 前 : kl_layer_setfg... [Y]   |   kl_layer_setbgi... [H] : 次>>
名前:
kl_layer_setbgcolor(id,color,color2)
説明:レイヤー(orそのID値)idの背景色をcolorにします。 colorに"transparent"が指定された場合は透明になります。
注意:Opera6では透明が動作しないので代替色color2を指定します。 指定が無い場合は白になります。
使用例: 
関連: kl_layer_fgcolor(id,defval)  kl_layer_bgcolor(id,defval)  kl_layer_setbgimage(id,src)  kl_layer_setopacity(id,val)
参照: 「JavaScript@KeyNavi.Net」レイヤーの背景色を指定:kl_layer_setbgcolor(id,...)
収録: keynavi_tools.js
適用:レイヤーの背景色を変更したい。
対応ブラウザ:
WindowsMacLinux
IE4 IE5 IE5.5 IE6 NS4 NS6 NS7 MZ1 OP7 IE5 NS7 MZ1 NS7 MZ1
関数一覧(先頭)へ移動 [W・O]   |   スクロール位置回復 [N]




■ 7.3.14  レイヤー背景画像設定   kl_layer_setbgimage(id,src) << 前 : kl_layer_setbg... [Y]   |   kl_layer_moveto [H] : 次>>
名前:
kl_layer_setbgimage(id,src)
説明:レイヤー(orそのID値)idの背景画像をsrc(パス文字列)にします。 srcに空文字""が指定されると既存の画像を消去します。
注意:Opera6では画像無しの指定が動作しません。代わりに存在しない画像を 指定するとうまく行きます。src2で存在しない画像のパスを指定します。 デフォルトでは「/just_for_opera6_bgimg_bug.gif」となっており 偶然この画像が存在しなければ期待通り動作します。
使用例: 
関連: kl_layer_fgcolor(id,defval)  kl_layer_bgcolor(id,defval)  kl_layer_setbgcolor(id,color,color2)  kl_layer_setopacity(id,val)
参照: 「JavaScript@KeyNavi.Net」レイヤーの背景画像を指定:kl_layer_setbgimage(id,...)
収録: keynavi_tools.js
適用:レイヤーの背景画像を変更したい。
対応ブラウザ:
WindowsMacLinux
IE4 IE5 IE5.5 IE6 NS4 NS6 NS7 MZ1 OP7 IE5 NS7 MZ1 NS7 MZ1
関数一覧(先頭)へ移動 [W・O]   |   スクロール位置回復 [N]




■ 7.3.15  レイヤー移動   kl_layer_moveto(id,x,y) << 前 : kl_layer_setbgi... [Y]   |   kl_layer_moveby [H] : 次>>
名前:
kl_layer_moveto(id,x,y)
説明:レイヤー(orそのID値)idを座標(x,y)に移動します。
注意: 
使用例: 
関連: kl_layer_moveby(id,dx,dy)  kl_layer_setpos(id,pos,check)  kl_layer_centralize(id,check)
参照: 「JavaScript@KeyNavi.Net」レイヤーを移動:kl_layer_moveto,by(id,x,y)
収録: keynavi_tools.js
適用:レイヤーを指定座標に移動したい。
対応ブラウザ:
WindowsMacLinux
IE4 IE5 IE5.5 IE6 NS4 NS6 NS7 MZ1 OP7 IE5 NS7 MZ1 NS7 MZ1
関数一覧(先頭)へ移動 [W・O]   |   スクロール位置回復 [N]




■ 7.3.16  レイヤー差分移動   kl_layer_moveby(id,dx,dy) << 前 : kl_layer_moveto [Y]   |   kl_layer_setpos [H] : 次>>
名前:
kl_layer_moveby(id,dx,dy)
説明:レイヤー(orそのID値)idを(dx,dy)だけ移動します。
注意: 
使用例: 
関連: kl_layer_moveto(id,x,y)  kl_layer_setpos(id,pos,check)  kl_layer_centralize(id,check)
参照: 「JavaScript@KeyNavi.Net」レイヤーを移動:kl_layer_moveto,by(id,x,y)
収録: keynavi_tools.js
適用:レイヤーを指定値だけ移動したい。
対応ブラウザ:
WindowsMacLinux
IE4 IE5 IE5.5 IE6 NS4 NS6 NS7 MZ1 OP7 IE5 NS7 MZ1 NS7 MZ1
関数一覧(先頭)へ移動 [W・O]   |   スクロール位置回復 [N]




■ 7.3.17  レイヤー配置   kl_layer_setpos(id,pos,check) << 前 : kl_layer_moveby [Y]   |   kl_layer_centr... [H] : 次>>
名前:
kl_layer_setpos(id,pos,check)
説明:レイヤー(orそのID値)idを指定位置posに移動します。 check(略可)が真の場合は実際に移動が必要か確認し 必要な場合のみ移動が実行されます。 そして移動した場合は真、しなかった場合は偽を返します。 引き数posには位置をキーワードで指定します。 ウィンドウ左上隅なら"left_top", 右下隅なら"right_bottom"、 中心なら"center_center" 或いは略して "center" でOKです。 相対値は「:」を使います。 右上隅から(10,20)だけ隙間を作りたい場合は "right:10_top:20"とします。 ページ全体での指定をしたい場合は"right:10_top:20_absolute"などと します。
注意: 
使用例: 
関連: kl_layer_moveto(id,x,y)  kl_layer_moveby(id,dx,dy)  kl_layer_centralize(id,check)
参照: 「JavaScript@KeyNavi.Net」レイヤーを上下左右/中央寄せ:kl_layer_setpos(is,pos)
収録: keynavi_tools.js
適用:レイヤーの位置を指定したい。
対応ブラウザ:
WindowsMacLinux
IE4 IE5 IE5.5 IE6 NS4 NS6 NS7 MZ1 OP7 IE5 NS7 MZ1 NS7 MZ1
関数一覧(先頭)へ移動 [W・O]   |   スクロール位置回復 [N]




■ 7.3.18  レイヤーを中心位置に   kl_layer_centralize(id,check) << 前 : kl_layer_setpos [Y]   |   kl_layer_resize... [H] : 次>>
名前:
kl_layer_centralize(id,check)
説明:レイヤー(orそのID値)idの位置を画面の真ん中にします。
注意: 
使用例: 
関連: kl_layer_moveto(id,x,y)  kl_layer_moveby(id,dx,dy)  kl_layer_setpos(id,pos,check)
参照: 
収録: keynavi_tools.js
適用:レイヤーを中心に配置したい。
対応ブラウザ:
WindowsMacLinux
IE4 IE5 IE5.5 IE6 NS4 NS6 NS7 MZ1 OP7 IE5 NS7 MZ1 NS7 MZ1
関数一覧(先頭)へ移動 [W・O]   |   スクロール位置回復 [N]




■ 7.3.19  レイヤーサイズ変更   kl_layer_resizeto(id,w,h) << 前 : kl_layer_centr... [Y]   |   kl_layer_resize... [H] : 次>>
名前:
kl_layer_resizeto(id,w,h)
説明:レイヤー(orそのID値)idのサイズを幅w、高さhにします。
注意: 
使用例: 
関連: 
参照: 
収録: keynavi_tools.js
適用:レイヤーのサイズを指定値にしたい。
対応ブラウザ:
WindowsMacLinux
IE4 IE5 IE5.5 IE6 NS4 NS6 NS7 MZ1 OP7 IE5 NS7 MZ1 NS7 MZ1
関数一覧(先頭)へ移動 [W・O]   |   スクロール位置回復 [N]




■ 7.3.20  レイヤーサイズ差分変更   kl_layer_resizeby(id,dw,dh) << 前 : kl_layer_resize... [Y]   |   kl_layer_setclip [H] : 次>>
名前:
kl_layer_resizeby(id,dw,dh)
説明:レイヤー(orそのID値)idのサイズを(dw,dh)だけ変更します。
注意: 
使用例: 
関連: 
参照: 
収録: keynavi_tools.js
適用:レイヤーを指定値だけリサイズしたい。
対応ブラウザ:
WindowsMacLinux
IE4 IE5 IE5.5 IE6 NS4 NS6 NS7 MZ1 OP7 IE5 NS7 MZ1 NS7 MZ1
関数一覧(先頭)へ移動 [W・O]   |   スクロール位置回復 [N]




■ 7.3.21  レイヤークリップ   kl_layer_setclip(id,t,r,b,l) << 前 : kl_layer_resize... [Y]   |   kl_layer_setop... [H] : 次>>
名前:
kl_layer_setclip(id,t,r,b,l)
説明:レイヤー(orそのID値)idにクリップサイズ(t,r,b,l)を指定します。 値は上側からClockWise(時計回り)で指定します。
注意: 
使用例: 
関連: 
参照: 
収録: keynavi_tools.js
適用:レイヤーを部分的に切り取りたい。
対応ブラウザ:
WindowsMacLinux
IE4 IE5 IE5.5 IE6 NS4 NS6 NS7 MZ1 OP7 IE5 NS7 MZ1 NS7 MZ1
関数一覧(先頭)へ移動 [W・O]   |   スクロール位置回復 [N]




■ 7.3.22  レイヤー不透明度指定   kl_layer_setopacity(id,val) << 前 : kl_layer_setclip [Y]   |   kl_layer_write [H] : 次>>
名前:
kl_layer_setopacity(id,val)
説明:レイヤー(orそのID値)idの不透明度をval(0〜100)に設定します。
注意: 
使用例: 
関連: kl_layer_fgcolor(id,defval)  kl_layer_bgcolor(id,defval)  kl_layer_setbgcolor(id,color,color2)  kl_layer_setbgimage(id,src)
参照: 
収録: keynavi_tools.js
適用:レイヤーを半透明にしたい。
対応ブラウザ:
WindowsMacLinux
IE4 IE5 IE5.5 IE6 NS4 NS6 NS7 MZ1 OP7 IE5 NS7 MZ1 NS7 MZ1
実際に半透明になるのはWindows版IE4以上、Netscape6以上、Mozillaです。 Mac版IE、Safari、Opera、NS4.xではサポート外です (エラーにもなりません)。
関数一覧(先頭)へ移動 [W・O]   |   スクロール位置回復 [N]




■ 7.3.23  レイヤーの中身書き替え   kl_layer_write(id,s,ns4,col) << 前 : kl_layer_setop... [Y]   |   7.4 ドラッグ、... [H] : 次>>
名前:
kl_layer_write(id,s,ns4,col)
説明:レイヤー(orそのID値)idの中身をsにします。
注意:詳しくは kl_replace(id,s,mode,ns4,col)を参照。
使用例: 
関連: kl_replace(id,s,mode,ns4,col)
参照: 「JavaScript@KeyNavi.Net」動的にレイヤーの中身を書き替え&URLロード:kl_layer_write/load()
収録: keynavi_tools.js
適用:レイヤーの中身を書き替えたい。
対応ブラウザ:
WindowsMacLinux
IE4 IE5 IE5.5 IE6 NS4 NS6 NS7 MZ1 OP7 IE5 NS7 MZ1 NS7 MZ1
詳しくは kl_replace(id,s,mode,ns4,col)を参照。
関数一覧(先頭)へ移動 [W・O]   |   スクロール位置回復 [N]

 ■ 7.4 ドラッグ、Raise




■ 7.4.1  レイヤードラッグ登録   kl_drag_set(id) << 前 : 7.4 ドラッグ、... [Y]   |   kl_drag_clear [H] : 次>>
名前:
kl_drag_set(id)
説明:レイヤーオブジェクトかそのidを引き数として受け取り ドラッグ用のハンドラ関数を登録する。
注意: 
使用例: 
関連: kl_drag_clear(id)  kl_raise_set(id)  kl_raise_clear(id)
参照: 「JavaScript@KeyNavi.Net」レイヤーのドラッグ設定・解除:kl_drag_set()
収録: keynavi_tools.js
適用:レイヤーをドラッグ可能にしたい。
対応ブラウザ:
WindowsMacLinux
IE4 IE5 IE5.5 IE6 NS4 NS6 NS7 MZ1 OP7 IE5 NS7 MZ1 NS7 MZ1
関数一覧(先頭)へ移動 [W・O]   |   スクロール位置回復 [N]




■ 7.4.2  レイヤードラッグ解除   kl_drag_clear(id) << 前 : kl_drag_set [Y]   |   kl_raise_set [H] : 次>>
名前:
kl_drag_clear(id)
説明:レイヤーオブジェクトかそのidを引き数として受け取り 登録されたドラッグハンドラを解除する。
注意:登録が無い場合でもエラーにはなりません。
使用例: 
関連: kl_drag_set(id)  kl_raise_set(id)  kl_raise_clear(id)
参照: 「JavaScript@KeyNavi.Net」レイヤーのドラッグ設定・解除:kl_drag_set()
収録: keynavi_tools.js
適用:レイヤーのドラッグ指定を解除したい。
対応ブラウザ:
WindowsMacLinux
IE4 IE5 IE5.5 IE6 NS4 NS6 NS7 MZ1 OP7 IE5 NS7 MZ1 NS7 MZ1
関数一覧(先頭)へ移動 [W・O]   |   スクロール位置回復 [N]




■ 7.4.3  レイヤーRaise設定   kl_raise_set(id) << 前 : kl_drag_clear [Y]   |   kl_raise_clear [H] : 次>>
名前:
kl_raise_set(id)
説明:レイヤーオブジェクトかそのidを引き数として受け取り クリックで手前に表示される(zIndexを増やす)ようにします。 同様にkl_raise_set()で登録されたレイヤーの中で zIndexが最大になるようにします。
注意: 
使用例: 
関連: kl_drag_set(id)  kl_drag_clear(id)  kl_raise_clear(id)
参照: 「JavaScript@KeyNavi.Net」レイヤークリックで手前に移動:kl_raise_set()
収録: keynavi_tools.js
適用:レイヤークリックで手前に表示したい。
対応ブラウザ:
WindowsMacLinux
IE4 IE5 IE5.5 IE6 NS4 NS6 NS7 MZ1 OP7 IE5 NS7 MZ1 NS7 MZ1
関数一覧(先頭)へ移動 [W・O]   |   スクロール位置回復 [N]




■ 7.4.4  レイヤーRaise解除   kl_raise_clear(id) << 前 : kl_raise_set [Y]   |   7.5 レイヤーの... [H] : 次>>
名前:
kl_raise_clear(id)
説明:レイヤーオブジェクトかそのidを引き数として受け取り 登録されたRaise用ハンドラを解除する。
注意:登録が無い場合でもエラーにはなりません。
使用例: 
関連: kl_drag_set(id)  kl_drag_clear(id)  kl_raise_set(id)
参照: 「JavaScript@KeyNavi.Net」レイヤークリックで手前に移動:kl_raise_set()
収録: keynavi_tools.js
適用:レイヤーのRaise指定を解除したい。
対応ブラウザ:
WindowsMacLinux
IE4 IE5 IE5.5 IE6 NS4 NS6 NS7 MZ1 OP7 IE5 NS7 MZ1 NS7 MZ1
関数一覧(先頭)へ移動 [W・O]   |   スクロール位置回復 [N]

 ■ 7.5 レイヤーの動的作成




■ 7.5.1  レイヤー動的作成   kl_layer_new(arg) << 前 : 7.5 レイヤーの... [Y]   |   kl_layer_load [H] : 次>>
名前:
kl_layer_new(arg)
説明:HTMLでの指定無しにレイヤーをJavaScriptで作成します。 argは配列で属性名と値を羅列して指定します。 ドラッグやRaise可否の指定も可能です。
注意: 
使用例: 
関連: kl_layer_load(id,url,ns4)
参照: 「JavaScript@KeyNavi.Net」動的にレイヤーを作成:kl_layer_new()
収録: keynavi_tools.js
適用:ページ構築後にレイヤーを作成したい。
対応ブラウザ:
WindowsMacLinux
IE4 IE5 IE5.5 IE6 NS4 NS6 NS7 MZ1 OP7 IE5 NS7 MZ1 NS7 MZ1
関数一覧(先頭)へ移動 [W・O]   |   スクロール位置回復 [N]




■ 7.5.2  レイヤーのURL変更   kl_layer_load(id,url,ns4) << 前 : kl_layer_new [Y]   |   7.6 半透明レイ... [H] : 次>>
名前:
kl_layer_load(id,url,ns4)
説明:動的に作成したレイヤー(orそのID値)idで表示するページの URLを指定値に変更します。
注意:Netscape4.xでは 引き数ns4が真の場合にのみ実行されます。 Netscapeはバグが多く 複合的な問題が起きやすいので 実際に表示を確認してから 有効にして下さい。 Netscapeを無視する場合は指定不要です。
使用例: 
関連: kl_layer_new(arg)
参照: 「JavaScript@KeyNavi.Net」動的にレイヤーの中身を書き替え&URLロード:kl_layer_write/load()
収録: keynavi_tools.js
適用:レイヤ−のURLを変更したい。
対応ブラウザ:
WindowsMacLinux
IE4 IE5 IE5.5 IE6 NS4 NS6 NS7 MZ1 OP7 IE5 NS7 MZ1 NS7 MZ1
関数一覧(先頭)へ移動 [W・O]   |   スクロール位置回復 [N]

 ■ 7.6 半透明レイヤー

スタイルシートやJavaScriptでレイヤーの不透明度を変えることができます (7.3.22 kl_layer_setopacity(id,val):レイヤー不透明度指定)。

そこでレイヤーの背景のみ半透明にし、 他方 前景は不透明でクッキリ見せたいケースがあります。

そのまま半透明にすると背景だけでなく前景のテキストまでボケてしまいます。 そこで前景(fg)、背景(bg)用に2つのレイヤーを用意します。 そして背景のみを半透明にします。

実際に半透明にできるのは Windows版IE4以上、Netscape6以上、Mozillaです。 Mac版IE、Safari、NS4.x、Operaでは背景が不透明のレイヤーとして表示 されるだけで以下の関数も問題なく動作します。

下記リスト内に欲しい機能が無い場合は レイヤーfg,bgそれぞれに 7.3 レイヤーの基本属性処理の関数を適用して下さい。




■ 7.6.1  半透明レイヤー作成   kl_tlayer_new(html,fgcolor,bgcolor,opacity,opts) << 前 : 7.6 半透明レイ... [Y]   |   kl_tlayer_show [H] : 次>>
名前:
kl_tlayer_new(html,fgcolor,bgcolor,opacity,opts)
説明:内容html、前景色fgcolor、背景色bgcolor、不透明度opacityの レイヤーを作成します。各種スタイルシートの指定は擬似 キーワード引き数optsで行います。 またドラッグやRaise可否の指定も可能です。
注意:作成されたレイヤーは デフォルトでhiddenになっています。表示するにはopts引き数で ["visibility","visible"]の指定を追加するか kl_tlayer_show()を実行します。
使用例:

関連: kl_tlayer_show(e)  kl_tlayer_hide(e)  kl_tlayer_update(e)  kl_tlayer_update_size(e)  kl_tlayer_moveto(e,x,y)  kl_tlayer_moveby(e,dx,dy)  kl_tlayer_setpos(e,pos,check)  kl_tlayer_write(e,s,ns4,col)
参照: 「JavaScript@KeyNavi.Net」半透明レイヤー:kl_tlayer_new()
収録: keynavi_tools.js
適用:半透明のレイヤーを作りたい。
対応ブラウザ:
WindowsMacLinux
IE4 IE5 IE5.5 IE6 NS4 NS6 NS7 MZ1 OP7 IE5 NS7 MZ1 NS7 MZ1
関数一覧(先頭)へ移動 [W・O]   |   スクロール位置回復 [N]




■ 7.6.2  半透明レイヤー表示   kl_tlayer_show(e) << 前 : kl_tlayer_new [Y]   |   kl_tlayer_hide [H] : 次>>
名前:
kl_tlayer_show(e)
説明:スタイル属性がhiddenとなって表示されていない 半透明レイヤーを表示します。
注意: 
使用例:

関連: kl_tlayer_new(html,fgcolor,bgcolor,opacity,opts)  kl_tlayer_hide(e)  kl_tlayer_update(e)  kl_tlayer_update_size(e)  kl_tlayer_moveto(e,x,y)  kl_tlayer_moveby(e,dx,dy)  kl_tlayer_setpos(e,pos,check)  kl_tlayer_write(e,s,ns4,col)
参照: 「JavaScript@KeyNavi.Net」半透明レイヤー:kl_tlayer_new()
収録: keynavi_tools.js
適用:半透明レイヤーを表示したい。
対応ブラウザ:
WindowsMacLinux
IE4 IE5 IE5.5 IE6 NS4 NS6 NS7 MZ1 OP7 IE5 NS7 MZ1 NS7 MZ1
関数一覧(先頭)へ移動 [W・O]   |   スクロール位置回復 [N]




■ 7.6.3  半透明レイヤー非表示   kl_tlayer_hide(e) << 前 : kl_tlayer_show [Y]   |   kl_tlayer_update [H] : 次>>
名前:
kl_tlayer_hide(e)
説明:半透明レイヤーを非表示にします。
注意: 
使用例:

関連: kl_tlayer_new(html,fgcolor,bgcolor,opacity,opts)  kl_tlayer_show(e)  kl_tlayer_update(e)  kl_tlayer_update_size(e)  kl_tlayer_moveto(e,x,y)  kl_tlayer_moveby(e,dx,dy)  kl_tlayer_setpos(e,pos,check)  kl_tlayer_write(e,s,ns4,col)
参照: 「JavaScript@KeyNavi.Net」半透明レイヤー:kl_tlayer_new()
収録: keynavi_tools.js
適用:半透明レイヤーを非表示にしたい。
対応ブラウザ:
WindowsMacLinux
IE4 IE5 IE5.5 IE6 NS4 NS6 NS7 MZ1 OP7 IE5 NS7 MZ1 NS7 MZ1
関数一覧(先頭)へ移動 [W・O]   |   スクロール位置回復 [N]




■ 7.6.4  半透明レイヤーの位置、サイズを再設定   kl_tlayer_update(e) << 前 : kl_tlayer_hide [Y]   |   kl_tlayer_upda... [H] : 次>>
名前:
kl_tlayer_update(e)
説明:半透明レイヤーeの位置を再設定します。また中身が溢れている場合は 大きさを調整して溢れないようにします。
注意: 
使用例:

関連: kl_tlayer_new(html,fgcolor,bgcolor,opacity,opts)  kl_tlayer_show(e)  kl_tlayer_hide(e)  kl_tlayer_update_size(e)  kl_tlayer_moveto(e,x,y)  kl_tlayer_moveby(e,dx,dy)  kl_tlayer_setpos(e,pos,check)  kl_tlayer_write(e,s,ns4,col)
参照: 「JavaScript@KeyNavi.Net」半透明レイヤー:kl_tlayer_new()
収録: keynavi_tools.js
適用:半透明レイヤーの位置、サイズを再設定したい。
対応ブラウザ:
WindowsMacLinux
IE4 IE5 IE5.5 IE6 NS4 NS6 NS7 MZ1 OP7 IE5 NS7 MZ1 NS7 MZ1
関数一覧(先頭)へ移動 [W・O]   |   スクロール位置回復 [N]




■ 7.6.5  半透明レイヤーのサイズを再設定   kl_tlayer_update_size(e) << 前 : kl_tlayer_update [Y]   |   kl_tlayer_move... [H] : 次>>
名前:
kl_tlayer_update_size(e)
説明:半透明レイヤーeの中身が溢れている場合は 大きさを調整して溢れないようにします。
注意: 
使用例: 
関連: kl_tlayer_new(html,fgcolor,bgcolor,opacity,opts)  kl_tlayer_show(e)  kl_tlayer_hide(e)  kl_tlayer_update(e)  kl_tlayer_moveto(e,x,y)  kl_tlayer_moveby(e,dx,dy)  kl_tlayer_setpos(e,pos,check)  kl_tlayer_write(e,s,ns4,col)
参照: 「JavaScript@KeyNavi.Net」半透明レイヤー:kl_tlayer_new()
収録: keynavi_tools.js
適用:半透明レイヤーのサイズを再設定したい。
対応ブラウザ:
WindowsMacLinux
IE4 IE5 IE5.5 IE6 NS4 NS6 NS7 MZ1 OP7 IE5 NS7 MZ1 NS7 MZ1
関数一覧(先頭)へ移動 [W・O]   |   スクロール位置回復 [N]




■ 7.6.6  半透明レイヤー移動   kl_tlayer_moveto(e,x,y) << 前 : kl_tlayer_upda... [Y]   |   kl_tlayer_move... [H] : 次>>
名前:
kl_tlayer_moveto(e,x,y)
説明:半透明レイヤーeを座標(x,y)に移動します。
注意: 
使用例: 
関連: kl_tlayer_new(html,fgcolor,bgcolor,opacity,opts)  kl_tlayer_show(e)  kl_tlayer_hide(e)  kl_tlayer_update(e)  kl_tlayer_update_size(e)  kl_tlayer_moveby(e,dx,dy)  kl_tlayer_setpos(e,pos,check)  kl_tlayer_write(e,s,ns4,col)
参照: 「JavaScript@KeyNavi.Net」半透明レイヤー:kl_tlayer_new()
収録: keynavi_tools.js
適用:半透明レイヤーを指定座標に移動したい。
対応ブラウザ:
WindowsMacLinux
IE4 IE5 IE5.5 IE6 NS4 NS6 NS7 MZ1 OP7 IE5 NS7 MZ1 NS7 MZ1
関数一覧(先頭)へ移動 [W・O]   |   スクロール位置回復 [N]




■ 7.6.7  半透明レイヤー差分移動   kl_tlayer_moveby(e,dx,dy) << 前 : kl_tlayer_move... [Y]   |   kl_tlayer_setpos [H] : 次>>
名前:
kl_tlayer_moveby(e,dx,dy)
説明:半透明レイヤーeを座標(dx,dy)だけ移動します。
注意: 
使用例: 
関連: kl_tlayer_new(html,fgcolor,bgcolor,opacity,opts)  kl_tlayer_show(e)  kl_tlayer_hide(e)  kl_tlayer_update(e)  kl_tlayer_update_size(e)  kl_tlayer_moveto(e,x,y)  kl_tlayer_setpos(e,pos,check)  kl_tlayer_write(e,s,ns4,col)
参照: 「JavaScript@KeyNavi.Net」半透明レイヤー:kl_tlayer_new()
収録: keynavi_tools.js
適用:半透明レイヤーを指定量だけ移動したい。
対応ブラウザ:
WindowsMacLinux
IE4 IE5 IE5.5 IE6 NS4 NS6 NS7 MZ1 OP7 IE5 NS7 MZ1 NS7 MZ1
関数一覧(先頭)へ移動 [W・O]   |   スクロール位置回復 [N]




■ 7.6.8  半透明レイヤー配置   kl_tlayer_setpos(e,pos,check) << 前 : kl_tlayer_move... [Y]   |   kl_tlayer_write [H] : 次>>
名前:
kl_tlayer_setpos(e,pos,check)
説明:半透明レイヤーeを指定位置posに移動します。check(略可)が真の場合は 実際に移動が必要か確認し 必要な場合のみ移動が実行されます。 そして移動した場合は真、しなかった場合は偽を返します。
注意: 
使用例:

関連: kl_tlayer_new(html,fgcolor,bgcolor,opacity,opts)  kl_tlayer_show(e)  kl_tlayer_hide(e)  kl_tlayer_update(e)  kl_tlayer_update_size(e)  kl_tlayer_moveto(e,x,y)  kl_tlayer_moveby(e,dx,dy)  kl_tlayer_write(e,s,ns4,col)
参照: 「JavaScript@KeyNavi.Net」半透明レイヤー:kl_tlayer_new()
収録: keynavi_tools.js
適用:半透明レイヤーの位置を相対値で指定したい。
対応ブラウザ:
WindowsMacLinux
IE4 IE5 IE5.5 IE6 NS4 NS6 NS7 MZ1 OP7 IE5 NS7 MZ1 NS7 MZ1
関数一覧(先頭)へ移動 [W・O]   |   スクロール位置回復 [N]




■ 7.6.9  半透明レイヤーの中身変更   kl_tlayer_write(e,s,ns4,col) << 前 : kl_tlayer_setpos [Y]   |   8. その他 [H] : 次>>
名前:
kl_tlayer_write(e,s,ns4,col)
説明:半透明レイヤーeの中身をs、前景色をcol(略可)に変更します。 ns4(略可)はブラウザがNetscape4.xの場合に実行するか否かを指定します。 Netscape4.xではレイヤー出力でバグが多いので このオプションを 真にしたい場合は実際に動作確認をするのをお勧めします。
注意:この関数には 引き数として 何故か前景色「col」があります。 これはNetscape4.xでの前景色変更は レイヤー書き替え(document.write)時にしかきちんと動作しないためです。 Netscapeで前景色の変更をしたい場合は この関数を使いレイヤーの中身を 全て再描画する形で行います。
使用例:

関連: kl_tlayer_new(html,fgcolor,bgcolor,opacity,opts)  kl_tlayer_show(e)  kl_tlayer_hide(e)  kl_tlayer_update(e)  kl_tlayer_update_size(e)  kl_tlayer_moveto(e,x,y)  kl_tlayer_moveby(e,dx,dy)  kl_tlayer_setpos(e,pos,check)
参照: 「JavaScript@KeyNavi.Net」半透明レイヤー:kl_tlayer_new()
収録: keynavi_tools.js
適用:半透明レイヤーの中身を書き替えたい。
対応ブラウザ:
WindowsMacLinux
IE4 IE5 IE5.5 IE6 NS4 NS6 NS7 MZ1 OP7 IE5 NS7 MZ1 NS7 MZ1
詳しくは kl_replace(id,s,mode,ns4,col)を参照。
関数一覧(先頭)へ移動 [W・O]   |   スクロール位置回復 [N]





ページの先頭へ     

前のページへ
【きぃなび情報】
・ホーム
・使い方&試す
次のページへ
【関連リンク】
・JavaScript小技集
KeyNavi API リファレンス 目次 【数字キーでアクセス】
1. 目次
2. 基本編
3. KeyNaviカスタマイズ用定数
4. KeyNaviユティリティ関数
5. イベント処理
6. ナビゲーション
7. レイヤー処理
7.1 要素の取得
7.2 要素の属性処理
7.3 レイヤーの基本属性処理
7.4 ドラッグ、Raise
7.5 レイヤーの動的作成
7.6 半透明レイヤー
8. その他
9. 定数・関数一覧


ホーム KeyNavi対応方法 [0] API リファレンス 目次 [1] 7. レイヤー処理 ・サイトマップ [Shift-S]
─ KeyNavi Project 2005 ─