リモコン
背景色エディタ
ver.3.0
　
　◆サンプル
　 　 ＜機能と特徴＞
　
　・カラーエディタで作成した色に背景色を変更できます。

　・ボタンを押し続けるとどんどん数値が変化します。
 



 

公開日 2002.6.15
最終更新日 2003.6.15
バージョン ver.3.0
動作確認 IE6.0,NN4.7,NN7.0,Opera7.0
cookie 不使用
CSS 使用
更新履歴 2002.10.12 ver2.0 - スクリプトの簡略化(変更点：ソース全般)
2003.06.15 ver3.0 - 全般の動作を改良(変更点：ソース全般)

 

☆★☆使い方☆★☆
 
 初心者向け解説   中級者向け解説   ダウンロード 

１．カスタマイズフォームを使って設定をしてください。

２．ソース１をそのまま書き込み新しいHTMLファイルを作ってください

３．作ったHTMLファイルを背景色を変更したいページから
　　ちらっと小窓君で呼び出してください。

４．ブラウザでテストしてみてください。
　　正常に動作すれば設置は完了です。
 
 
 初心者向け解説   中級者向け解説   ダウンロード 

１．ソース１をそのまま書き込み新しいHTMLファイルを作ってください

２．作ったHTMLファイルをちらっと小窓君で呼び出してください。

３．ブラウザでテストしてみてください。
　　正常に動作すれば設置は完了です。
 
 
 初心者向け解説   中級者向け解説   ダウンロード 
 
  【スクリプトを１つのページに組み込む】 

１．カスタマイズフォームを使って設定をする場合は、
　　ダウンロードの前に設定をしてください。

２．右のボタンを押してファイルをダウンロードしてください。
 

 
 
 
 カスタマイズフォーム   補足説明   改造方法 
 
色見本の横幅： (半角数字：正の整数)
色見本の縦幅： (半角数字：正の整数)
カラーエディタの初期値： (RGB値)
背景色変更ボタンの文字：
　
 カスタマイズフォーム   補足説明   改造方法 
 
■特にありません。
 
 カスタマイズフォーム   補足説明   改造方法 
 
■色見本部分の大きさを変更する。(半角数字：正の整数)

//設定〜//ここまでの１〜２行目を変更してください。 
c_br_width  = 64;
c_br_height = 14;
■カラーエディタの初期の色を変更する。(RGB値)

//設定〜//ここまでの３行目を変更してください。 
c_br_shoki  = '#999999';
 
 
  

■ソース１(以下のソースを書き込んで１つのページを作ってください)  
  
<html>
<head>
 <title>リモコン背景色エディタ</title>
<script language="JavaScript" type="text/javascript">
<!--//Script Created by あう,http://www5c.biglobe.ne.jp/~horoau/
    //ver.3.0


//設定
c_b_width  = 64;        //色見本の横幅
c_b_height = 14;        //色見本の縦幅
c_b_shoki  = '#999999'; //カラーエディタの初期値
//ここまで


c_br_stoper  = 0;
id = "";


function c_br_shoki_rgb()
{document.forms["c_br_form"].elements["c_br_rgb"].value = c_br_shoki;}


function c_br_check_rgb()
{with(document)
 {if(forms["c_br_form"].elements["c_br_rgb"].value.replace("#","").length != 6)
  {return;}
  temp = forms["c_br_form"].elements["c_br_rgb"].value.replace("#","");
  forms["c_br_form"].elements["c_br_red"].value   = parseInt(temp.substring(0,2),16).toString(10);
  forms["c_br_form"].elements["c_br_green"].value = parseInt(temp.substring(2,4),16).toString(10);
  forms["c_br_form"].elements["c_br_blue"].value  = parseInt(temp.substring(4,6),16).toString(10);}}


function c_br_spacer()
{if(document.layers)
 {with(document.layers["c_br_color"].document)
  {open();
   write('<spacer type="block" width="'+c_br_width+'" height="'+c_br_height+'">');
   close();}}}


function c_br_sreach()
{with(document)
 {if((forms["c_br_form"].elements["c_br_red"].value-0) > 255)
  {forms["c_br_form"].elements["c_br_red"].value = 255;}
  else if((forms["c_br_form"].elements["c_br_green"].value-0) > 255)
  {forms["c_br_form"].elements["c_br_green"].value = 255;}
  else if((forms["c_br_form"].elements["c_br_blue"].value-0) > 255)
  {forms["c_br_form"].elements["c_br_blue"].value = 255;}
  else if((forms["c_br_form"].elements["c_br_red"].value-0) < 0)
  {forms["c_br_form"].elements["c_br_red"].value = 0;}
  else if((forms["c_br_form"].elements["c_br_green"].value-0) < 0)
  {forms["c_br_form"].elements["c_br_green"].value = 0;}
  else if((forms["c_br_form"].elements["c_br_blue"].value-0) < 0)
  {forms["c_br_form"].elements["c_br_blue"].value = 0;}
  temp_r   = (forms["c_br_form"].elements["c_br_red"].value-0).toString(16);
  if(temp_r.length == 1)
  {temp_r = "0"+temp_r;}
  temp_g   = (forms["c_br_form"].elements["c_br_green"].value-0).toString(16);
  if(temp_g.length == 1)
  {temp_g = "0"+temp_g;}
  temp_b   = (forms["c_br_form"].elements["c_br_blue"].value-0).toString(16);
  if(temp_b.length == 1)
  {temp_b = "0"+temp_b;}
  temp_rgb = "#"+temp_r+temp_g+temp_b;
  if(!c_br_stoper)
  {forms["c_br_form"].elements["c_br_rgb"].value = temp_rgb;}
  if(document.all)
  {all("c_br_color").style.background = temp_rgb;}
  else if(document.getElementById)
  {getElementById("c_br_color").style.background = temp_rgb;}
  else if(document.layers)
  {layers["c_br_color"].bgColor = temp_rgb;}}
 setTimeout('c_br_sreach()',200);}


function c_br_edit_start(posi,i)
{clearTimeout(id);
 with(document)
 {temp = forms["c_br_form"].elements["c_br_"+posi].value-0+i
  if(temp > 255)
  {temp = 255;}
  else if(temp < 0)
  {temp = 0;}
  forms["c_br_form"].elements["c_br_"+posi].value = temp;}
 id = setTimeout('c_br_edit_start("'+posi+'",'+i+');',50);}


function c_br_edit_stop()
{clearTimeout(id);}


function c_br_stop()
{c_br_stoper = 1;}


function c_br_start()
{c_br_stoper = 0;}


function change_bgcolorB()
{temp = document.forms["c_br_form"].elements["c_br_rgb"].value;
 with(opener.document)
 {if(document.all)
  {all.tags("body")[0].style.background = temp;}
  else if(document.getElementById)
  {getElementsByTagName("body")[0].style.background = temp;}
  else if(document.layers)
  {bgColor = temp}}}


with(document)
{open();
 write('<style type="text/css">\n<!-\-\n');
 if(document.all || document.getElementById)
 {write('.c_br_style {background:'+c_br_shoki+';width:'+c_br_width+'px;height:'+c_br_height+'px;}\n');}
 else if(document.layers)
 {write('.c_br_style {position:relative;}\n');}
 write('.c_br_style2{background:'+c_br_shoki+';}\n')
 write('\n-\->\n<\/style>\n')}


// -->
</script>
</head>
<body>


<form id="c_br_form" name="c_br_form">
<table border="0" cellspacing="0" cellpadding="3"<tr><td>
<table border="0" cellspacing="1" cellpadding="0"><tr>
<td class="c_br_style2"><div class="c_br_style" id="c_br_color">
<script type="text/javascript" langurge="JavaScript"><!--
c_br_spacer();
// --></script></div></td>
</tr></table></td>
<td><input type="text" size="8" value="#000000" id="c_br_rgb" name="c_br_rgb" onChange="c_br_check_rgb();" onfocus="c_br_stop();" onBlur="c_br_start();">
<input type="button" value="背景色変更" onClick="change_bgcolorB();"></td>
</tr></table>
<table border="0" cellspacing="0" cellpadding="1"><tr>
<td>赤：<input type="text" size="3" id="c_br_red" name="c_br_red">
<input type="button" value="▲" name="c_br_b1" onMouseDown="c_br_edit_start('red',1);" onMouseOut="c_br_edit_stop();" onMouseUp="c_br_edit_stop();"
><input type="button" value="▼" name="c_br_b2" onMouseDown="c_br_edit_start('red',-1);" onMouseOut="c_br_edit_stop();" onMouseUp="c_br_edit_stop();"></td>
<td>緑：<input type="text" size="3" id="c_br_green" name="c_br_green">
<input type="button" value="▲" name="c_br_b3" onMouseDown="c_br_edit_start('green',1);" onMouseOut="c_br_edit_stop();" onMouseUp="c_br_edit_stop();"
><input type="button" value="▼" name="c_br_b4" onMouseDown="c_br_edit_start('green',-1);" onMouseOut="c_br_edit_stop();" onMouseUp="c_br_edit_stop();"></td>
<td>青：<input type="text" size="3" id="c_br_blue" name="c_br_blue">
<input type="button" value="▲" name="c_br_b5" onMouseDown="c_br_edit_start('blue',1);" onMouseOut="c_br_edit_stop();" onMouseUp="c_br_edit_stop();"
><input type="button" value="▼" name="c_br_b6" onMouseDown="c_br_edit_start('blue',-1);" onMouseOut="c_br_edit_stop();" onMouseUp="c_br_edit_stop();"></td>
</tr></table></form>
<script type="text/javascript" langurge="JavaScript"><!--
c_br_shoki_rgb();
c_br_check_rgb();
c_br_sreach();
// --></script>
</body>
</html>


■スクリプト無効時にはちらっと小窓君も動作しませんので
　このスクリプトにおける対策は特にありません。

ウェブ木箱＞サンプル集
copyright(C) 2002-2004 あう