| 背景色エディタ ver.3.0 |
||||
◆サンプル |
||||
| ＜機能と特徴＞ ・カラーエディタで作成した色に背景色を変更できます。 ・ボタンを押し続けるとどんどん数値が変化します。 |
||||
 |
|
|
|
|
 |
|
| 公開日 | 2002.3.10 | ||
| 最終更新日 | 2003.6.15 | ||
| バージョン | ver.3.0 | ||
| 動作確認 | IE6.0,NN4.7,NN7.0,Opera7.0 | ||
| cookie | 不使用 | ||
| CSS | 使用 | ||
| 更新履歴 | 2002.10.12 | ver2.0 | スクリプトの簡略化(変更点：ソース全般) |
| 2003.6.15 | ver3.0 | 全般の動作を改良(変更点：ソース全般) | |
 |
|
|
|
|
|
|
||
| 初心者向け解説 | 中級者向け解説 | ダウンロード | ||||
|
|
|
||||
|
１．カスタマイズフォームを使って設定をしてください。 ２．ソース１を<head>〜</head>の間に書き込んでください。 ３．ソース２を<body>〜</body>の間の カラーエディタを表示したい位置に書き込んでください。 ４．ブラウザでテストしてみてください。 正常に動作すれば設置は完了です。 |
||||||
|
|
|||||
 |
|
 |
 |
|
|
■ソース１(以下のソースを<head>〜</head>の間に書き込んでください) | |
<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_b_stoper = 0;
id = "";
function c_b_shoki_rgb()
{document.forms["c_b_form"].elements["c_b_rgb"].value = c_b_shoki;}
function c_b_check_rgb()
{with(document)
{if(forms["c_b_form"].elements["c_b_rgb"].value.replace("#","").length != 6)
{return;}
temp = forms["c_b_form"].elements["c_b_rgb"].value.replace("#","");
forms["c_b_form"].elements["c_b_red"].value = parseInt(temp.substring(0,2),16).toString(10);
forms["c_b_form"].elements["c_b_green"].value = parseInt(temp.substring(2,4),16).toString(10);
forms["c_b_form"].elements["c_b_blue"].value = parseInt(temp.substring(4,6),16).toString(10);}}
function c_b_spacer()
{if(document.layers)
{with(document.layers["c_b_color"].document)
{open();
write('<spacer type="block" width="'+c_b_width+'" height="'+c_b_height+'">');
close();}}}
function c_b_sreach()
{with(document)
{if((forms["c_b_form"].elements["c_b_red"].value-0) > 255)
{forms["c_b_form"].elements["c_b_red"].value = 255;}
else if((forms["c_b_form"].elements["c_b_green"].value-0) > 255)
{forms["c_b_form"].elements["c_b_green"].value = 255;}
else if((forms["c_b_form"].elements["c_b_blue"].value-0) > 255)
{forms["c_b_form"].elements["c_b_blue"].value = 255;}
else if((forms["c_b_form"].elements["c_b_red"].value-0) < 0)
{forms["c_b_form"].elements["c_b_red"].value = 0;}
else if((forms["c_b_form"].elements["c_b_green"].value-0) < 0)
{forms["c_b_form"].elements["c_b_green"].value = 0;}
else if((forms["c_b_form"].elements["c_b_blue"].value-0) < 0)
{forms["c_b_form"].elements["c_b_blue"].value = 0;}
temp_r = (forms["c_b_form"].elements["c_b_red"].value-0).toString(16);
if(temp_r.length == 1)
{temp_r = "0"+temp_r;}
temp_g = (forms["c_b_form"].elements["c_b_green"].value-0).toString(16);
if(temp_g.length == 1)
{temp_g = "0"+temp_g;}
temp_b = (forms["c_b_form"].elements["c_b_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_b_stoper)
{forms["c_b_form"].elements["c_b_rgb"].value = temp_rgb;}
if(document.all)
{all("c_b_color").style.background = temp_rgb;}
else if(document.getElementById)
{getElementById("c_b_color").style.background = temp_rgb;}
else if(document.layers)
{layers["c_b_color"].bgColor = temp_rgb;}}
setTimeout('c_b_sreach()',200);}
function c_b_edit_start(posi,i)
{clearTimeout(id);
with(document)
{temp = forms["c_b_form"].elements["c_b_"+posi].value-0+i
if(temp > 255)
{temp = 255;}
else if(temp < 0)
{temp = 0;}
forms["c_b_form"].elements["c_b_"+posi].value = temp;}
id = setTimeout('c_b_edit_start("'+posi+'",'+i+');',50);}
function c_b_edit_stop()
{clearTimeout(id);}
function c_b_stop()
{c_b_stoper = 1;}
function c_b_start()
{c_b_stoper = 0;}
function change_bgcolor()
{with(document)
{temp = forms["c_b_form"].elements["c_b_rgb"].value;
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_b_style {background:#000000;width:'+c_b_width+'px;height:'+c_b_height+'px;}\n');}
else if(document.layers)
{write('.c_b_style {position:relative;}\n');}
write('.c_b_style2{background:#000000;}\n')
write('\n-\->\n<\/style>\n')}
// -->
</script>
|
■ソース２(以下のソースを<body>〜<body>の間に書き込んでください) | |
<form id="c_b_form" name="c_b_form">
<table border="0" cellspacing="0" cellpadding="3"><tr><td>
<table border="0" cellspacing="1" cellpadding="0"><tr>
<td class="c_b_style2"><div class="c_b_style" id="c_b_color">
<script type="text/javascript" langurge="JavaScript"><!--
c_b_spacer();
// --></script></div></td>
</tr></table></td>
<td><input type="text" size="8" value="#000000" id="c_b_rgb" name="c_b_rgb" onChange="c_b_check_rgb();" onfocus="c_b_stop();" onBlur="c_b_start();">
<input type="button" value="背景色変更" onClick="change_bgcolor();"></td>
</tr></table>
<table border="0" cellspacing="0" cellpadding="1"><tr>
<td>赤：<input type="text" size="3" id="c_b_red" name="c_b_red">
<input type="button" value="▲" name="c_b_b1" onMouseDown="c_b_edit_start('red',1);" onMouseOut="c_b_edit_stop();" onMouseUp="c_b_edit_stop();"
><input type="button" value="▼" name="c_b_b2" onMouseDown="c_b_edit_start('red',-1);" onMouseOut="c_b_edit_stop();" onMouseUp="c_b_edit_stop();"></td>
<td>緑：<input type="text" size="3" id="c_b_green" name="c_b_green">
<input type="button" value="▲" name="c_b_b3" onMouseDown="c_b_edit_start('green',1);" onMouseOut="c_b_edit_stop();" onMouseUp="c_b_edit_stop();"
><input type="button" value="▼" name="c_b_b4" onMouseDown="c_b_edit_start('green',-1);" onMouseOut="c_b_edit_stop();" onMouseUp="c_b_edit_stop();"></td>
<td>青：<input type="text" size="3" id="c_b_blue" name="c_b_blue">
<input type="button" value="▲" name="c_b_b5" onMouseDown="c_b_edit_start('blue',1);" onMouseOut="c_b_edit_stop();" onMouseUp="c_b_edit_stop();"
><input type="button" value="▼" name="c_b_b6" onMouseDown="c_b_edit_start('blue',-1);" onMouseOut="c_b_edit_stop();" onMouseUp="c_b_edit_stop();"></td>
</tr></table></form>
<script type="text/javascript" langurge="JavaScript"><!--
c_b_shoki_rgb();
c_b_check_rgb();
c_b_sreach();
// --></script>
 |
|