| 文字色エディタ 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 | ver.1.2 | netscape6の動作を改良(変更点：ソース１,２) | |
| 2002.10.12 | ver.2.0 | スクリプトを簡略化(変更点：全般) | |
| 2002.10.24 | ver.2.1 | netscapeの色変更の際の値の初期化を修正(変更点：ソース１) | |
| 2003.06.15 | ver.3.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_t_width = 64; //色見本の横幅
c_t_height = 14; //色見本の縦幅
c_t_shoki = '#999999'; //カラーエディタの初期値
c_t_cookie = 'c_t_cookie'; //クッキーの名前
//ここまで
c_t_stoper = 0;
id = "";
function c_t_shoki_rgb()
{document.forms["c_t_form"].elements["c_t_rgb"].value = c_t_shoki;}
function c_t_check_rgb()
{with(document)
{if(forms["c_t_form"].elements["c_t_rgb"].value.replace("#","").length != 6)
{return;}
temp = forms["c_t_form"].elements["c_t_rgb"].value.replace("#","");
forms["c_t_form"].elements["c_t_red"].value = parseInt(temp.substring(0,2),16).toString(10);
forms["c_t_form"].elements["c_t_green"].value = parseInt(temp.substring(2,4),16).toString(10);
forms["c_t_form"].elements["c_t_blue"].value = parseInt(temp.substring(4,6),16).toString(10);}}
function c_t_spacer()
{if(document.layers)
{with(document.layers["c_t_color"].document)
{open();
write('<spacer type="block" width="'+c_t_width+'" height="'+c_t_height+'">');
close();}}}
function c_t_sreach()
{with(document)
{if((forms["c_t_form"].elements["c_t_red"].value-0) > 255)
{forms["c_t_form"].elements["c_t_red"].value = 255;}
else if((forms["c_t_form"].elements["c_t_green"].value-0) > 255)
{forms["c_t_form"].elements["c_t_green"].value = 255;}
else if((forms["c_t_form"].elements["c_t_blue"].value-0) > 255)
{forms["c_t_form"].elements["c_t_blue"].value = 255;}
else if((forms["c_t_form"].elements["c_t_red"].value-0) < 0)
{forms["c_t_form"].elements["c_t_red"].value = 0;}
else if((forms["c_t_form"].elements["c_t_green"].value-0) < 0)
{forms["c_t_form"].elements["c_t_green"].value = 0;}
else if((forms["c_t_form"].elements["c_t_blue"].value-0) < 0)
{forms["c_t_form"].elements["c_t_blue"].value = 0;}
temp_r = (forms["c_t_form"].elements["c_t_red"].value-0).toString(16);
if(temp_r.length == 1)
{temp_r = "0"+temp_r;}
temp_g = (forms["c_t_form"].elements["c_t_green"].value-0).toString(16);
if(temp_g.length == 1)
{temp_g = "0"+temp_g;}
temp_b = (forms["c_t_form"].elements["c_t_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_t_stoper)
{forms["c_t_form"].elements["c_t_rgb"].value = temp_rgb;}
if(document.all)
{all("c_t_color").style.background = temp_rgb;}
else if(document.getElementById)
{getElementById("c_t_color").style.background = temp_rgb;}
else if(document.layers)
{layers["c_t_color"].bgColor = temp_rgb;}}
setTimeout('c_t_sreach()',200);}
function c_t_edit_start(posi,i)
{clearTimeout(id);
with(document)
{temp = forms["c_t_form"].elements["c_t_"+posi].value-0+i
if(temp > 255)
{temp = 255;}
else if(temp < 0)
{temp = 0;}
forms["c_t_form"].elements["c_t_"+posi].value = temp;}
id = setTimeout('c_t_edit_start("'+posi+'",'+i+');',50);}
function c_t_edit_stop()
{clearTimeout(id);}
function c_t_stop()
{c_t_stoper = 1;}
function c_t_start()
{c_t_stoper = 0;}
function change_fgcolor()
{with(document)
{temp = forms["c_t_form"].elements["c_t_rgb"].value;
if(document.all)
{all.tags("body")[0].style.color = temp;}
else if(document.getElementById)
{getElementsByTagName("body")[0].style.color = temp;}
else if(document.layers)
{c_t_date = new Date();
c_t_date.setTime(new Date().getTime()+15*1000);
cookie=c_t_cookie+"="+temp+"; expires="+c_t_date.toGMTString()+";";
if(cookie.indexOf(c_t_cookie+"="+temp) != -1)
{location.reload();}
else
{alert('cookieを有効にしてご利用ください')}}}}
with(document)
{open();
write('<style type="text/css">\n<!-\-\n');
if(document.all || document.getElementById)
{write('.c_t_style {background:'+c_t_shoki+';width:'+c_t_width+'px;height:'+c_t_height+'px;}\n');}
else if(document.layers)
{write('.c_t_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_t_cookie) != -1)
{temp_cookie2 = temp_cookie[i].split('=');
if(temp_cookie2[0] == c_t_cookie)
{fgColor = temp_cookie2[1];
write('body {color:'+temp_cookie2[1]+';}\n');
c_t_shoki = temp_cookie2[1];
break;}
else
{temp_cookie2 = new Array();}}}}
write('.c_t_style2{background:'+c_t_shoki+';}\n')
write('\n-\->\n<\/style>\n')}
// -->
</script>
|
■ソース２(以下のソースを<body>〜<body>の間に書き込んでください) | |
<form id="c_t_form" name="c_t_form">
<table border="0" cellspacing="0" cellpadding="3"><tr><td>
<table border="0" cellspacing="1" cellpadding="0"><tr>
<td class="c_t_style2"><div class="c_t_style" id="c_t_color">
<script type="text/javascript" langurge="JavaScript"><!--
c_t_spacer();
// --></script></div></td>
</tr></table></td>
<td><input type="text" size="8" value="#000000" id="c_t_rgb" name="c_t_rgb" onChange="c_t_check_rgb();" onfocus="c_t_stop();" onBlur="c_t_start();">
<input type="button" value="文字色変更" onClick="change_fgcolor();"></td>
</tr></table>
<table border="0" cellspacing="0" cellpadding="1"><tr>
<td>赤：<input type="text" size="3" id="c_t_red" name="c_t_red">
<input type="button" value="▲" name="c_t_b1" onMouseDown="c_t_edit_start('red',1);" onMouseOut="c_t_edit_stop();" onMouseUp="c_t_edit_stop();"
><input type="button" value="▼" name="c_t_b2" onMouseDown="c_t_edit_start('red',-1);" onMouseOut="c_t_edit_stop();" onMouseUp="c_t_edit_stop();"></td>
<td>緑：<input type="text" size="3" id="c_t_green" name="c_t_green">
<input type="button" value="▲" name="c_t_b3" onMouseDown="c_t_edit_start('green',1);" onMouseOut="c_t_edit_stop();" onMouseUp="c_t_edit_stop();"
><input type="button" value="▼" name="c_t_b4" onMouseDown="c_t_edit_start('green',-1);" onMouseOut="c_t_edit_stop();" onMouseUp="c_t_edit_stop();"></td>
<td>青：<input type="text" size="3" id="c_t_blue" name="c_t_blue">
<input type="button" value="▲" name="c_t_b5" onMouseDown="c_t_edit_start('blue',1);" onMouseOut="c_t_edit_stop();" onMouseUp="c_t_edit_stop();"
><input type="button" value="▼" name="c_t_b6" onMouseDown="c_t_edit_start('blue',-1);" onMouseOut="c_t_edit_stop();" onMouseUp="c_t_edit_stop();"></td>
</tr></table></form>
<script type="text/javascript" langurge="JavaScript"><!--
c_t_shoki_rgb();
c_t_check_rgb();
c_t_sreach();
// --></script>
 |
|