 ホーム KeyNavi対応方法 [0] JavaScript＠Keynavi.Netトップ
[1] レイヤーの背景色を指定
|
・サイトマップ [Shift-S] |
 |
■ レイヤーの背景色を指定：kl_layer_setbgcolor(id,...)
写真集(fullscreen)
のサムネール画像一覧で利用。
「onfocus/onmouseover」で画像の背景を青、
「onblur/onmouseout」で透明にしています。
//-----------------------------------------------------------------------------
//kl_layer_setbgcolor(id,color,color2)
//返り値：成功時は１失敗時は０
//id：対象となるレイヤー(オブジェクト)かそのID
//color：変更したい背景色、透明は"transparent"として指定
//color2：透明色を指定できない(Opera6)時に代わりに使う色（デフォルト白）
//-----------------------------------------------------------------------------
function kl_layer_setbgcolor(id,color,color2){
var e=kl_getelem(id); if(!e) return 0;
if(!color2) color2="white";
if(color=="transparent"){
if(KL_NS4) color=null;
if(KL_OP6 && !KL_OP7) color=color2;
}
if(KL_NS4) e.bgColor=color;
else if(e.style) e.style.backgroundColor =color;
else return 0;
return 1;
}
色としての「透明」の指定がブラウザ毎にばらつきがあります。 Opera6では'transparent'が動作せず透明になりません。 全体の背景色など 代わりの色をcolor2に指定します (指定がない場合は白になります)。
<script language="javascript" src="http://www.keynavi.net/files/keynavi_ja.js"></script>
<script language="javascript" src="http://www.keynavi.net/files/keynavi_tools.js"></script>
.....
<a href="javascript:void(0)" onclick="alert(kl_layer_setbgcolor('lay1','orange'));">オレンジ</a>
<a href="javascript:void(0)" onclick="alert(kl_layer_setbgcolor('lay1','transparent'));">透明</a>
.....
<div style="position:relative; left:20px; top:10px; width:200px; height:100px;" id="lay1">
レイヤー「lay1」です。
</div>
|
Netscape4.xの問題
Netscape4.xでは 上の例のように ボックスにborder指定があると背景色変更が外側にしか反映されません。 border指定を除くと今度は スタイルシートで指定した背景色が文字のある部分にしか塗られません。 その他 Netscape4には無数のバグがあるので注意します。 関連：Netscape4でのレイヤー処理の問題(JavaScriptバグ＆回避法リスト)
Netscape4.xの普及率は順調に?! 下がりつづけ、現在 0.6％程度
(onestat.com 03/07/28発表)
です。
JavaScriptやスタイルシートでの膨大なバグとそれへの対応コストを考慮すると
本文理解に差支えない機能はNS4非対応で構わないと思います。
そろそろIE3やNS3と同じように扱ってもいいでしょう。
|
Netscape4.xで動作させたい場合
NS4で背景色変更を動作させたい場合は以下のような工夫をします。 自分のページに合った方法を試してみて下さい。特に方法１と２では 他の borderやpaddingのスタイル指定が きちんと動作しません。 ページの内容が伝われば良しとしましょう。
方法１：<layer>タグと<div>タグを組合わせる
Netscape4.xでは<layer>タグが使えます。<div>を使った場合 HTMLで指定済みの背景色を変更できませんが<layer>ならOKです。
<html>
<head>
<!-- media指定をした下記のCSS指定はNS4でのみ無視されます-->
<style type="text/css" media="all"><!--
#lay0 { background:#FFFF99; -moz-box-sizing : border-box; box-sizing:border-box; }
-->
</style>
<!-- ボックスの属性を指定 -->
<style type="text/css"><!--
div.class01 { width:200px; height:100px; border:solid 1px; }
div.class02 { padding:20px; }
-->
</style>
</head>
<body>
.........
<!-- layerタグはNS4でのみ解釈されます -->
<layer id="lay0_ns4" bgcolor="#FFFF99">
<div id="lay0" class="class01">
<!-- NS4ではpadding指定を上のdivで行うと着色位置が上にずれるので此処で指定-->
<div class="class02">
レイヤー「lay0」です。
</div>
</div>
</layer>
.........
<layer>タグ内でインラインによるスタイル指定があると それに続くHTMLでのスタイル指定が外れます。 そのため スタイルシートは style="..." とせず classで指定しています。
また<layer>は<div>での 「position:absolute」指定時と同様に絶対配置されます。
さて、背景色の変更時のIDは Netscapeの場合だけ「lay0_ns4」 それ以外では「lay0」を使います。
２つのIDを使い分けるのが面倒なので 背景色変更はIDではなくオブジェクト「e0」で管理してもいいでしょう。
方法２：スクリプトでClipと着色の指定をする
背景色はデフォルトでは指定せず JavaScriptで設定します。 またボックスサイズがおかしいので「clip」を指定してみます。
<html>
<head>
.........
<!-- media指定をした下記のCSS指定はNS4でのみ無視されます-->
<style type="text/css" media="all">
#lay2 { background:#FFFF99; }
</style>
</head>
<body>
<script language="javascript" src="http://www.keynavi.net/files/keynavi_ja.js"></script>
<script language="javascript" src="http://www.keynavi.net/files/keynavi_tools.js"></script>
<script language="javascript"><!--
//関数kl_onload_ex()は「onLoad」時に自動で実行されます//
function kl_onload_ex(){
//以下、Netscape4.xの場合にのみ実行されます//
if(KL_NS4){
//CSSによるwidth指定が反映されないためスクリプトで再指定//
kl_getelem("lay2").clip.width=200;
//上のようにwidth指定だけでいいですが下記関数も利用可//
//kl_layer_setclip("lay2",0,200,100,0);//
//背景色についてもスクリプトで指定//
kl_layer_setbgcolor("lay2","#FFFF99");
}
}
//-->
</script>
.........
<!-- style=...内では背景色を指定しません-->
<div style="position:relative; ..." id="lay2">レイヤー「lay2」です。</div>
.........
</body>
</html>
このようにするとNetscape4.x以外のブラウザではデフォルトで着色されます。 NS4の場合だけ「kl_layer_setbgcolor()」が実行されonLoad時に着色されます。
なおスタイルシートの指定で「media=all」としていますが これにより NetscapeにCSSを読ませないようにできます。 詳しくは ブラウザ別にスタイルシートを指定（HTML,CSSバグ＆回避法リスト）
一般にスクリプトを利用する方法は ユーザがJavaScriptを無効にしている場合 動作しないという問題があります。しかし、幸いNS4ではJavaScriptを無効にすると スタイルシートも無効になるためこの方法で事実上問題ありません。
方法３：レイヤーを動的に作成
動的に作成したレイヤーでは背景色変更が動作します。 そもそも Netscape4.xでは「position:absolute」か「position:relative」でないと レイヤーになりません。 そのためレイヤーは全て「kl_layer_new()」を使って動的に作成することに してもいいでしょう。
この例で作成されるレイヤーでは 前の２例と異なり 「border」と「padding」指定両方が効いています。
注：NS4でのレイヤーはtextareaの下になり表示されません。
テスト時は作成したレイヤーがtextareaの下に来ないよう 下方にスクロールしてから上のボタンを押して下さい。 一部が隠れて表示されない場合は レイヤーをドラッグして見える位置に移動します。
|
【JavaScript@Keynavi.Net ：
レイヤー編：基本
】
「Ctrl-矢印」でフォーカスを上下左右に移動できます。
|
| トップへ戻る [1] | Back[Q] ・Top[W] ・Up[E] ・PgUp[R] ・Focus[Ctrl-矢印] |
|
|
ホーム KeyNavi対応方法 [0] JavaScript＠Keynavi.Netトップ
[1] レイヤーの背景色を指定
|
・サイトマップ [Shift-S] |