컬러 픽커 테이블 JS (소스)

<script>
var color_arr = new Array('00','11','22','33','44','55','66','77','88','99','AA','BB','CC','DD','EE','FF');
function c_table_rgb(){
    document.write("<table class='c_table' cellspacing='0' cellpadding='0'>");
    for(i=0,m=color_arr.length;i<m;i++){
    var rgb = '#'+color_arr[i].toString()+color_arr[i].toString()+color_arr[i].toString();
    document.write("<tr><td style='background-color:"+rgb+";' onclick='c_sel(this)' onmouseover='c_up(this)'></td></tr>");
    }
    document.write("</table>");        
}
function c_table_(ru,gu,bu){
    document.write("<table class='c_table' cellspacing='0' cellpadding='0'>");
    for(j=0,m=color_arr.length;j<m;j++){
    document.write('<tr>');
    if(ru)    var r = color_arr[j].toString();
    if(gu)    var g = color_arr[j].toString();
    if(bu)    var b = color_arr[j].toString();        
        for(i=0,m=color_arr.length;i<m;i++){
        if(!ru)        var r = color_arr[i].toString();
        if(!gu)        var g = color_arr[i].toString();
        if(!bu)        var b = color_arr[i].toString();                
        
        var rgb = '#'+r+g+b;
    document.write("<td style='background-color:"+rgb+";' onclick='c_sel(this)' onmouseover='c_up(this)'></td>");
        }
    document.write('</tr>');
    }
    document.write("</table>");        
}
function c_up(this_s){
    result = this_s.style.backgroundColor;
    color_picker.txt_color.style.backgroundColor = result;
    color_picker.txt_color.value =result;
}
function c_sel(this_s){
    result = this_s.style.backgroundColor;
    color_picker.btn_color.style.backgroundColor = result;
    color_picker.btn_color.value =result;
}
</script>
<style type="text/css">
.c_table{border-style:none;}
.c_table td{border-style:solid; border-width:0px; overflow:hidden; width:5px; height:5px; font-size:0px; cursor:crosshair; }
</style>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td><script> c_table_rgb(); </script></td>
<td ><script> c_table_(1,0,0); </script></td>
<td ><script> c_table_(0,1,0); </script></td>
<td ><script> c_table_(0,0,1); </script></td>
</tr>
<tr>
<td colspan="4"><form name="color_picker" style="padding:0; margin:0; "><table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr><td width="50%"><label style="border-style:none; font-size:12px; ">색 : </label>
<input name="txt_color" type="text" id="txt_color" style="border-style:solid; border-width:1px; font-size:12px; " readonly="true" size="7" maxlength="0"></td><td align="right"><label style="border-style:none; font-size:12px; ">선택 : </label>
<input name="btn_color" type="button" id="btn_color2" style="border-style:outset; font-size:12px; background-color:#FFFFFF; " value="#FFFFFF">
</td>
</tr><td></td></table><label style="border-style:none; font-size:12px; "></label>
<label style="border-style:none; font-size:12px; "></label>
</form>
    </td>
</tr>
</table>
댓글
  • No Nickname
    No Comment
  • 권한이 없습니다.
    {{m_row.m_nick}}
    -
제목 작성자 날짜
공대여자
공대여자
mins01
mins
mins
mins
mins
mins
mins
mins
mins
mins
mins
mins
mins
mins
mins
mins