| 複合カラーエディタ ver.3.0 |
||||
◆サンプル |
||||
| ＜機能と特徴＞ ・カラーエディタで作成した色に背景色・文字色を変更できます。 ・ボタンを押し続けるとどんどん数値が変化します。 |
||||
 |
|
|
|
|
 |
|
| 公開日 | 2002.3.10 | ||
| 最終更新日 | 2003.6.15 | ||
| バージョン | ver.3.0 | ||
| 動作確認 | IE6.0,NN4.7,NN7.0,Opera7.0 | ||
| cookie | 使用(NN4のみ) | ||
| CSS | 使用 | ||
| 更新履歴 | 2002.03.20 | ver.1.1 | netscape6の不具合を改善，スタイルシートに対応(変更点：全般) |
| 2002.05.01 | ver1.2 | NN6で文字色の数値が変更できない点を修正 NN4の動作を改良 NN6でレイアウトが崩れる点を修正(変更点：ソース１，２，３) |
|
| 2002.10.24 | ver2.0 | スクリプトを簡略化 エディタ部分のデザインを変更(変更点：ソース全般) |
|
| 2003.06.15 | ver.3.0 | 全般の動作を改良(変更点：ソース全般) | |
 |
|
|
|
|
|
|
||
| 初心者向け解説 | 中級者向け解説 | ダウンロード | ||||
|
|
|
||||
|
１．カスタマイズフォームを使って設定をしてください。 ２．ソース１を<head>〜</head>の間に書き込んでください。 ３．ソース２を<body>〜</body>の間の カラーエディタを表示したい位置に書き込んでください。 ４．ブラウザでテストしてみてください。 正常に動作すれば設置は完了です。 |
||||||
|
|
|||||
 |
|
|
|
|
|
|
||
| カスタマイズフォーム | 補足説明 | 改造方法 | ||||
|
|
|
|
|
|
|
|
■特にありません。
|
||||||
|
|
|||||
|
|
|
|
|
||
| カスタマイズフォーム | 補足説明 | 改造方法 | ||||
|
|
|
|
|
||
|
■色見本部分の大きさを変更する。(半角数字：正の整数) //設定〜//ここまでの１〜２行目を変更してください。 c_a_width = 64; c_a_height = 14;■カラーエディタの初期の色を変更する。(RGB値) //設定〜//ここまでの３〜４行目を変更してください。 ３行目が背景色、４行目が文字色の初期値です。 c_a_shoki1 = '#999999'; c_a_shoki2 = '#333333';■クッキーの名前を変更する。(半角英数字) //設定〜//ここまでの５行目を変更してください。 通常は変更の必要はありません。
c_a_cookie = 'c_a_cookie';
|
||||||
|
|
|||||
 |
 |
|
|
■ソース１(以下のソースを<head>〜</head>の間に書き込んでください) | |
<script language="JavaScript" type="text/javascript">
<!--//Script Created by あう,http://www5c.biglobe.ne.jp/~horoau/
//ver.3.0
//設定
c_a_width = 64; //色見本の横幅
c_a_height = 14; //色見本の縦幅
c_a_shoki1 = '#999999'; //カラーエディタの初期値(背景色)
c_a_shoki2 = '#333333'; //カラーエディタの初期値(文字色)
c_a_cookie = 'c_a_cookie'; //クッキーの名前
//ここまで
c_a_temp = 1;
c_a_stoper = 0;
id = "";
function c_a_shoki_rgb()
{document.forms["c_a_form"].elements["c_a_rgb1"].value = c_a_shoki1;
document.forms["c_a_form"].elements["c_a_rgb2"].value = c_a_shoki2;}
function c_a_check_rgb()
{with(document)
{if(forms["c_a_form"].elements["c_a_rgb"+c_a_temp].value.replace("#","").length != 6)
{return;}
temp = forms["c_a_form"].elements["c_a_rgb"+c_a_temp].value.replace("#","");
forms["c_a_form"].elements["c_a_red"].value = parseInt(temp.substring(0,2),16).toString(10);
forms["c_a_form"].elements["c_a_green"].value = parseInt(temp.substring(2,4),16).toString(10);
forms["c_a_form"].elements["c_a_blue"].value = parseInt(temp.substring(4,6),16).toString(10);}}
function c_a_spacer()
{if(document.layers)
{with(document.layers["c_a_color"].document)
{open();
write('<spacer type="block" width="'+c_a_width+'" height="'+c_a_height+'">');
close();}}}
function c_a_sreach()
{with(document)
{if((forms["c_a_form"].elements["c_a_red"].value-0) > 255)
{forms["c_a_form"].elements["c_a_red"].value = 255;}
else if((forms["c_a_form"].elements["c_a_green"].value-0) > 255)
{forms["c_a_form"].elements["c_a_green"].value = 255;}
else if((forms["c_a_form"].elements["c_a_blue"].value-0) > 255)
{forms["c_a_form"].elements["c_a_blue"].value = 255;}
else if((forms["c_a_form"].elements["c_a_red"].value-0) < 0)
{forms["c_a_form"].elements["c_a_red"].value = 0;}
else if((forms["c_a_form"].elements["c_a_green"].value-0) < 0)
{forms["c_a_form"].elements["c_a_green"].value = 0;}
else if((forms["c_a_form"].elements["c_a_blue"].value-0) < 0)
{forms["c_a_form"].elements["c_a_blue"].value = 0;}
temp_r = (forms["c_a_form"].elements["c_a_red"].value-0).toString(16);
if(temp_r.length == 1)
{temp_r = "0"+temp_r;}
temp_g = (forms["c_a_form"].elements["c_a_green"].value-0).toString(16);
if(temp_g.length == 1)
{temp_g = "0"+temp_g;}
temp_b = (forms["c_a_form"].elements["c_a_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_a_stoper)
{forms["c_a_form"].elements["c_a_rgb"+c_a_temp].value = temp_rgb;}
if(document.all)
{all("c_a_color").style.background = temp_rgb;}
else if(document.getElementById)
{getElementById("c_a_color").style.background = temp_rgb;}
else if(document.layers)
{layers["c_a_color"].bgColor = temp_rgb;}}
setTimeout('c_a_sreach()',200);}
function c_a_edit_start(posi,i)
{clearTimeout(id);
with(document)
{temp = forms["c_a_form"].elements["c_a_"+posi].value-0+i
if(temp > 255)
{temp = 255;}
else if(temp < 0)
{temp = 0;}
forms["c_a_form"].elements["c_a_"+posi].value = temp;}
id = setTimeout('c_a_edit_start("'+posi+'",'+i+');',50);}
function c_a_edit_stop()
{clearTimeout(id);}
function c_a_stop()
{c_a_stoper = 1;}
function c_a_start()
{c_a_stoper = 0;}
function change_color()
{with(document)
{temp1 = forms["c_a_form"].elements["c_a_rgb1"].value;
temp2 = forms["c_a_form"].elements["c_a_rgb2"].value;
if(document.all)
{all.tags("body")[0].style.background = temp1;
all.tags("body")[0].style.color = temp2;}
else if(document.getElementById)
{getElementsByTagName("body")[0].style.background = temp1;
getElementsByTagName("body")[0].style.color = temp2;}
else if(document.layers)
{c_a_date = new Date();
c_a_date.setTime(new Date().getTime()+15*1000);
cookie=c_a_cookie+"="+temp1+'-'+temp2+"; expires="+c_a_date.toGMTString()+";";
if(cookie.indexOf(c_a_cookie+"="+temp1+'-'+temp2) != -1)
{location.reload();}
else
{alert('cookieを有効にしてご利用ください')}}}}
function c_a_rgb_set(i)
{c_a_temp = i;
c_a_check_rgb();}
with(document)
{open();
write('<style type="text/css">\n<!-\-\n');
if(document.all || document.getElementById)
{write('.c_a_style {background:'+c_a_shoki1+';width:'+c_a_width+'px;height:'+c_a_height+'px;}\n');}
else if(document.layers)
{write('.c_a_style {position:relative;}\n');
temp_cookie = cookie
while(temp_cookie.indexOf(" ") != -1)
{temp_cookie = temp_cookie.replace(" ","");}
temp_cookie = temp_cookie.split(";");
for(i in temp_cookie)
{if(temp_cookie[i].indexOf(c_a_cookie) != -1)
{temp_cookie2 = temp_cookie[i].split('=');
if(temp_cookie2[0] == c_a_cookie)
{temp_cookie3 = temp_cookie2[1].split('-');
bgcolor = temp_cookie3[0];
fgColor = temp_cookie3[1];
write('body {color:'+temp_cookie3[1]+';background:'+temp_cookie3[0]+';}\n');
c_a_shoki1 = temp_cookie3[0];
c_a_shoki2 = temp_cookie3[1];
break;}
else
{temp_cookie2 = new Array();}}}}
write('.c_a_style2{background:'+c_a_shoki1+';}\n')
write('\n-\->\n<\/style>\n')}
// -->
</script>
|
■ソース２(以下のソースを<body>〜<body>の間に書き込んでください) | |
<form id="c_a_form" name="c_a_form">
<table border="0" cellspacing="0" cellpadding="1"><tr><td>
<table border="0" cellspacing="1" cellpadding="0"><tr>
<td class="c_a_style2"><div class="c_a_style" id="c_a_color">
<script type="text/javascript" langurge="JavaScript"><!--
c_a_spacer();
// --></script></div></td>
</tr></table></td>
<td><input type="text" size="8" value="#000000" id="c_a_rgb1" name="c_a_rgb1" onChange="c_a_check_rgb();" onfocus="c_a_stop();" onBlur="c_a_start();"><td>
<td><input type="radio" name="c_a_select" onClick="c_a_rgb_set(1)" checked>背景色</td>
<td><input type="button" value="色変更" onClick="change_color();"></td>
</tr><tr>
<td></td>
<td><input type="text" size="8" value="#000000" id="c_a_rgb2" name="c_a_rgb2" onChange="c_a_check_rgb();" onfocus="c_a_stop();" onBlur="c_a_start();"><td>
<td><input type="radio" name="c_a_select" onClick="c_a_rgb_set(2)">文字色</td>
</tr></table>
<table border="0" cellspacing="0" cellpadding="1"><tr>
<td>赤：<input type="text" size="3" id="c_a_red" name="c_a_red">
<input type="button" value="▲" name="c_a_b1" onMouseDown="c_a_edit_start('red',1);" onMouseOut="c_a_edit_stop();" onMouseUp="c_a_edit_stop();"
><input type="button" value="▼" name="c_a_b2" onMouseDown="c_a_edit_start('red',-1);" onMouseOut="c_a_edit_stop();" onMouseUp="c_a_edit_stop();"></td>
<td>緑：<input type="text" size="3" id="c_a_green" name="c_a_green">
<input type="button" value="▲" name="c_a_b3" onMouseDown="c_a_edit_start('green',1);" onMouseOut="c_a_edit_stop();" onMouseUp="c_a_edit_stop();"
><input type="button" value="▼" name="c_a_b4" onMouseDown="c_a_edit_start('green',-1);" onMouseOut="c_a_edit_stop();" onMouseUp="c_a_edit_stop();"></td>
<td>青：<input type="text" size="3" id="c_a_blue" name="c_a_blue">
<input type="button" value="▲" name="c_a_b5" onMouseDown="c_a_edit_start('blue',1);" onMouseOut="c_a_edit_stop();" onMouseUp="c_a_edit_stop();"
><input type="button" value="▼" name="c_a_b6" onMouseDown="c_a_edit_start('blue',-1);" onMouseOut="c_a_edit_stop();" onMouseUp="c_a_edit_stop();"></td>
</tr></table></form>
<script type="text/javascript" langurge="JavaScript"><!--
c_a_shoki_rgb();
c_a_check_rgb();
c_a_sreach();
// --></script>
 |
|