인터넷정보

컬러 픽커 테이블

알 수 없는 사용자 2007. 10. 11. 16:48
<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>
반응형