| BACK |
JavaScript

背景色コントローラ

ページの背景色を変更できるコントローラです。
単一ページもフレームもOK。

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


更新履歴
2001.09.09
Ver.0.01 -> Ver.0.02 タグの記述ミスを修正しました。
2001.02.25
Ver.0.01 公開

動作確認済ブラウザ

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


設置方法

1. <BODY>〜</BODY>の間に以下のソースをコピー。

2.使い方によって、次の設定をします。

  • 単一ページの (フレームを使っていない) 場合
    赤字の数値を「1」にします。
  • フレームを使用していて、コントローラを置いたフレームの色を変える場合
    赤字の数値を「1」にします。
  • フレームを使用していて、コントローラを置いてないフレームの色を変える場合
    赤字の数値を「3」にし、 青字を、対象フレームの名前に変えてください。
  • フレームを使用していて、コントローラを置いたフレームと別のフレームの両方の色を変える場合
    赤字の数値を「2」にし、 青字を、対象フレームの名前に変えてください。

フレームの名前は、自分のフレームページのソースに、
<FRAME NAME="hogehoge" SRC="abc.html">
とあれば「hogehoge」です。

<!-- ==================================================================================
                          背景色コントローラ Version 0.02
                      http://homepage3.nifty.com/masas/sdir/
                    Copyright(c)2001 Masa, All Rights Reserved.
=================================================================================== -->
<script type="text/javascript" language="JavaScript">
<!--
function changeBgcolor()
{
  var CTLMODE = 1;  // コントロールモード(1:自フレームのみ、2:両方、3:他フレームのみ)

  if (CTLMODE <= 2) {
    document.bgColor = "#"
      + document.bcctl.rval.options[document.bcctl.rval.selectedIndex].value 
      + document.bcctl.gval.options[document.bcctl.gval.selectedIndex].value 
      + document.bcctl.bval.options[document.bcctl.bval.selectedIndex].value;
  }
  if (CTLMODE >= 2) {
    window.parent.FRAME2.document.bgColor = "#"
      + document.bcctl.rval.options[document.bcctl.rval.selectedIndex].value 
      + document.bcctl.gval.options[document.bcctl.gval.selectedIndex].value 
      + document.bcctl.bval.options[document.bcctl.bval.selectedIndex].value;
  }
}
// -->
</script>

    <form name="bcctl">
    <table summary="bgcolor controller" border="1" cellspacing="0" cellpadding="0">
      <tr>
        <th style="color:#ffffff;background-color:#ff6666;">R</th>
        <th style="color:#ffffff;background-color:#33cc33;">G</th>
        <th style="color:#ffffff;background-color:#6666ff;">B</th>
      </tr>
      <tr>
        <td>
          <select name="rval" size="6" onChange="changeBgcolor()">
            <option value="FF" selected>FF
            <option value="CC">CC
            <option value="99">99
            <option value="66">66
            <option value="33">33
            <option value="00">00
          </select>
        </td>
        <td>
          <select name="gval" size="6" onChange="changeBgcolor()">
            <option value="FF" selected>FF
            <option value="CC">CC
            <option value="99">99
            <option value="66">66
            <option value="33">33
            <option value="00">00
          </select>
        </td>
        <td>
          <select name="bval" size="6" onChange="changeBgcolor()">
            <option value="FF" selected>FF
            <option value="CC">CC
            <option value="99">99
            <option value="66">66
            <option value="33">33
            <option value="00">00
          </select>
        </td>
      </tr>
    </table>
    </form>
<!-- =========================== End of 背景色コントローラ ======================== -->


Copyright © 2001-2002 Masa, All Rights Reserved.