背景色コントローラ Fine

ページ背景色のRGBをそれぞれ256階調で指定、変更できるコントローラです。
単一ページの背景色変更はもちろん、他フレームの背景色変更も可能。

ご利用の前に「利用規定」を必ず読んでおいてください。
スクリプトを利用した場合、無条件に同意したものとみなします。

更新履歴

2001.10.17: Ver.0.01 公開

動作確認済ブラウザ

Internet Explorer 5.01 (Windows)
Netscape Communicator 4.7 (Windows)
Netscape 6.01 (Windows)

設置方法

まずはスタイルシートですが、コントローラの大きさや色を変えたい方は、
</HEAD>の直前付近に以下のソースをコピー。(無くても動作に問題なし)
スタイルシートの記述の仕方は説明しませんので、ご自身で… (^^;


<!-- ==== for 背景色コントローラ Fine ==== -->
<style type="text/css">
<!--
.cctbl { /* コントローラテーブル枠 */
  background-color: #eeeeee;
}
.ctxtred { /* 赤の設定値表示部 */
  font-size: 9pt;
  background-color: #ffeeee;
}
.cbtnred { /* 赤の調整ボタン */
  font-size: 9pt;
  background-color: #dd0000;
  color: #ffffff;
}
.ctxtgreen { /* 緑の設定値表示部 */
  font-size: 9pt;
  background-color: #eeffee;
}
.cbtngreen { /* 緑の調整ボタン */
  font-size: 9pt;
  background-color: #00dd00;
  color: #ffffff;
}
.ctxtblue { /* 青の設定値表示部 */
  font-size: 9pt;
  background-color: #eeeeff;
}
.cbtnblue { /* 青の調整ボタン */
  font-size: 9pt;
  background-color: #0000dd;
  color: #ffffff;
}
-->
</style>
<!-- ===================================== -->

<BODY>～</BODY> の間のご希望の場所に、以下のソースをコピー。
ソース内のコメントを参考に赤字部分を設定してください。

フレーム名の設定は赤字になってませんが (^^;、他フレームの背景色を変更する場合は、設定が必要です。
フレーム名とは、自分のフレームページのソースに、
<FRAME NAME="hogehoge" SRC="abc.html">
とあれば「hogehoge」ですので、
var TGTF = 'hogehoge';
と設定します。


<!-- ===============================================================================================
                             　背景色コントローラ Fine    Version 0.01
         Copyright(c)2001 Masa, All Rights Reserved.  http://homepage3.nifty.com/masas/sdir/
================================================================================================ -->
<script type="text/javascript" language="JavaScript">
<!--
/*-------------------*
 *  設定はここから   *
 *-------------------*/

// 初期設定値(10進指定で0～15を指定) - ページの背景と同じ色にしておくと最初の色変更がとても自然に。
// 例えば #FFFFFF なら、(15,15,15,15,15,15)
//        #0099cc なら、(0,0,9,9,12,12)
// [参考] 0～9までは10進も16進も同じ。16進のAは10進で10、Bは11、(省略)、Fは15まで。
cVal = new Array(12,12,12,12,12,12);

// 背景色を変えるフレーム名 (単一ページまたは自フレームなら、'' とする)
var TGTF = '';

// ボタンの文字
var UBTS = '▲';  // 上ボタン
var DBTS = '▼';  // 下ボタン

/*-------------------*
 *  設定はここまで   *
 *-------------------*/
function cVUD(vNum, inc)
{
  cVal[vNum] += inc;
  if (cVal[vNum] > 15) { cVal[vNum] = 15; }
  if (cVal[vNum] <  0) { cVal[vNum] = 0; }
  tval = eval("document.chgBcolForm.cTxt"+vNum);
  tval.value = cHex[cVal[vNum]];
  colStr = "#"+cHex[cVal[0]]+cHex[cVal[1]]+cHex[cVal[2]]+cHex[cVal[3]]+cHex[cVal[4]]+cHex[cVal[5]];
  tgtDoc = (TGTF != '')? eval("window.parent."+TGTF+".document") : document
  tgtDoc.bgColor = colStr;
}
cHex = new Array("0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F");
document.write('<form name="chgBcolForm">');
document.write('<table border="1" class="cctbl" cellpadding="0" cellspacing="0"><tr>');
for (ctlNo = 0; ctlNo < 6; ctlNo++) {
  cName = 'green';
  if (ctlNo < 2) { cName = 'red'; }
  if (ctlNo > 3) { cName = 'blue'; }
  document.write('<td align="center">');
  document.write('<input type="text" name="cTxt'+ctlNo+'" class="ctxt'+cName+'" size="1" value="'+cHex[cVal[ctlNo]]+'"><br>');
  document.write('<input type="button" value="'+UBTS+'" class="cbtn'+cName+'" onClick="cVUD('+ctlNo+',1)"><br>');
  document.write('<input type="button" value="'+DBTS+'" class="cbtn'+cName+'" onClick="cVUD('+ctlNo+',-1)"><br>');
  document.write('<\/td>');
}
document.write('<\/tr><\/table><\/form>');
// -->
</script>
<!-- ============================== End of 背景色コントローラ Fine ============================= -->