action |
ウィンドウの背景色や文字色・表の背景色や枠の色を任意に変更できます。
ウィンドウの色調の確認や、 ユーザーが任意に色指定できる等の技に応用できると思います。
サンプル
を新しいウィンドウに表示します。
※色の選択は「カラーダイアログボックス」から行います。
※カラーダイアログはIE6.0の限定技です
|
web技 |
■カラーダイアログの表示技
◆手順1【カラーダイアログオブジェクトの定義】
※<body>〜</body>に設置します
-----次の行から(copy)-----
<object id="Dialog" classid="clsid:3050f819-98b5-11cf-bb82-00aa00bdce0b" width="0" height="0">
</object>
-----上の行まで(copy)-----
◆手順2【スクリプト】
※カラーダイアログを表示し、選択した色でbodyの背景色を指定します。
※ダイアログで「キャンセル」を選択すると(何もしないと黒になるエラーが発生したので)、if文を追加しています。
※ダイアログの戻り値は10進数のカラーコードなので、16進数に変換し、通常のカラー表示(#000000)にしています。
※この例示ではカラーコードを表示しないので省略可能です。
-----次の行から(copy)-----
<script language="JavaScript">
<!--
function ChooseCol(){
COL=Dialog.ChooseColorDlg(); //カラーダイアログ表示
if (COL==false) {return;} //戻り値がfalseのとき(キャンセル選択時の処置
COL="000000"+COL.toString(16);
//戻り値(10進数のカラーコード)を16進数カラーコードに変換
COL=COL.substring(COL.length-6,COL.length);
//16進数カラーコード右端6桁のみを取得
COL="#"+COL //#記号を付加
document.body.style.backgroundColor=COL; //カラー設定
}
-----上の行まで(copy)-----
◆手順3【カラーダイアログの表示実行】(リンク文字から)
※スクリプトを実行します
-----次の行から(copy)-----
<a href="#" onclick="ChooseCol()">カラーダイアログ表示</a>
-----上の行まで(copy)-----
|
解説等 |
◆[web技]はカラーダイアログボックス表示の部分のみを簡略化して解説していますので、実際の適用例は
サンプルのソースコードを参照して下さい。
【適用技】
[技m004]表のセルにマウスを重ねると背景色・背景画像やフォントが変わる
[技m015]画像やセルにマウスを重ねると画像やセル背景色の透明度が変わる
[技t010]リンク文字をクリックするとhtml/js/txtファイルのソースをテキストエディタに表示する
|
keyword |
◇Dialog◇ChooseColorDlg◇opacity
|
Report |
◇カラーダイアログはIE6.0限定技です
|
history |
◇(2004.09.18)設置しました
|
注意 |
◆操作MENUの[Window Resize]を選択するとウィンドウサイズが変更可能です。インラインフレームの幅もウィンドウ幅に追従します。
◆上記の[web技]をクリップボードにコピーしテキストエディタに貼り付けて使用する場合は、表示のための改行記号や全角・半角スペースの記号等を削除して下さい。
-----次の行から(copy)-----
(この部分をクリップボードにコピーしてテキストエディタ等に貼り付けて下さい)
-----上の行まで(copy)-----
|