【おやじのweb技】 html/javascript/css等
winXP+IE6
TopPage表示 /  保 存 /  印 刷 /  Window Resize /  Window Close
t011

カラーダイアログから任意の色を選択し透明度も変えてみる◇Dialog◇ChooseColorDlg◇opacity

web工房  Copyright(C) 2004 web工房 All Rights Reserved 
このページのトップに戻る /  Window Resize /  Window Close /  最終更新日表示

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)-----

access count