본문 바로가기

자바스크립트/기타등등

색상표 [컬러피커 color picker]

반응형

javascriptsource 사이트에서 다운받아 사용하고 있는 것입니다.

스타일을 약간 수정하고 백그라운드가 색상이 바뀌는 것 없애고 사용하니 좀 낫네요..

북마크바에다 달아놓고 쓰니 코딩할때 편하네요.

[출처: http://www.javascriptsource.com

 

 

홈페이지에 사용하실 분을 위해서 코드

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<head>
<title>색상표 코드 스크립트</title>

<SCRIPT LANGUAGE="JavaScript">

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!--//Heres the code for the RGB in paint.
function rgb(x)
  {
  var value=0;
  var value_array=new Array("0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f");
  var first=x.charAt(0);
  var second=x.charAt(1);
  var a=0;
  var b=0;
  while (value_array[value]!=first)
    {
    value++;
    a=a+16;
    }
  value="0";
  while (value_array[value]!=second)
    {
    value++;
    b++;
    }
  x=a+b;
  return x;
  }
// end RGB in paint-->
</script>

<SCRIPT LANGUAGE="JavaScript">
<!-- Heres the code to type in you own Hexadecimal value
function changeBack()
  {
  var hex=window.document.f.c.value;
  document.bgColor=hex;
  var hex1=hex.charAt(0);
  if (hex1!="#")
    {
    hex=document.bgColor;
    }
  var red=hex.substring (1,3);
  var rdd=rgb(red);
  document.bb.re.value=rdd;
  var green=hex.substring (3,5);
  var grn=rgb(green);
  document.cc.gr.value=grn;
  var blue=hex.substring (5,7);
  var blue1=rgb(blue);
  document.dd.bl.value=blue1;
  }
// End own Hexadecimal-->
</script>

<SCRIPT LANGUAGE="JavaScript">
<!--Here\'s the code to type in your own RGB
  function changeBackRGB()
  {
  var red=window.document.bb.re.value;
  var green=window.document.cc.gr.value;
  var blue=window.document.dd.bl.value;
  red1=rgb_hex(red);
  green1=rgb_hex(green);
  blue1=rgb_hex(blue);
  var hex="#"+red1+green1+blue1;
  document.bgColor=hex;
  document.f.c.value=hex;
  }
// End your own RGB-->

//<!-- Change from RGB to hexadecimal
function rgb_hex(colour)
{
 var rgb_array=new Array("0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f");
if (colour==0)
  {
  var colour="00";
  return colour;
  }
else
  {
  var y=colour/16;
  var y=y+"a";
  if (y.indexOf(".")==-1)
    {
    var hex2="0";
    var u=y.indexOf("a");
    var q=y.substring(0,u);
    var hex1=rgb_array[q];
    }
  else
    {
    var l=y.split(".");
    var q=l[0];
    var z=q*16;
    var xyz=colour-z;
    var hex1=rgb_array[q];
    var hex2=rgb_array[xyz];
    }
  var colour=hex1+hex2;
  return colour;
  }
}
// end-->
</script>

<SCRIPT LANGUAGE="JavaScript">
<!--Here\'s the background changer for the cube

 leftclick=0;

 function r(hval)
  {
    if (leftclick==0)
      {
//     아래 주석표시를 제거하면 background color가 같이 변화 합니다.
//      document.bgColor=hval;
      document.f.c.value=hval;
      var red=hval.substring (1,3);
      var rdd=rgb(red);
      document.bb.re.value=rdd;
      var green=hval.substring (3,5);
      var grn=rgb(green);
      document.cc.gr.value=grn;
      var blue=hval.substring (5,7);
      var blue1=rgb(blue);
      document.dd.bl.value=blue1;
      document.colour1.colour2.value="";
      }
  }
 
//end changer
//Heres the lock button
function lock()
  {
  if (leftclick==0)
    {
    leftclick=1;
    }
  else
    {
    leftclick=0;
    }
  }
//end lock-->
</script>

<SCRIPT LANGUAGE="JavaScript">
<!--  Reverse Lookup Color
function changeColor()
{
var clr=window.document.colour1.colour2.value;
document.f.c.value=clr;
var clr=changeBack();
var clr=changeBackRGB();
}
// End Reverse Lookup Color-->
</script>

<style>
.color-a {
    width:500px;
    margin:auto;
    border:1px solid black;
    padding: 20px 0 10px 0;
    box-shadow:3px 3px 5px #999;
    }
.textall {width:110px;text-align:center;font-weight:bolder;}
</style>
</head>


<body>

 

<center>
<br/>
<h3>[ 색 상 표 ]</H3></center>
<center><span style="font-size:12px">원본 스크립트를 아주 약간 수정했어요<br/><br/></span></center>

<div class="color-a">
<center>
<table>

<SCRIPT LANGUAGE="JavaScript">
<!-- Cube Maker
var hex_Red=new Array("00","33","66","99","cc","ff");
var hex_Green=new Array("00","33","66","99","cc","ff");
var hex_Blue=new Array("00","33","66","99","cc","ff");
var hexred="00";
var hexgreen="00";
var hexblue="00";
var red=0;
var green=0;
var blue=0;
var x=0;
var y=0;
var z=0;
var xyz=0;

while (y<6)
  {
  window.document.write("<tr>");
  var x=0;
  var hexblue=hex_Blue[blue];
    while (x<6)
    {
    var z=0;
    var hexgreen=hex_Green[green];
      while (z<6)
      {
      var hexred=hex_Red[red];
      var hexadecimal="#"+hexred+hexgreen+hexblue;
      window.document.write("<td bgColor="+hexadecimal+"><a href=\"javascript:lock()\" onmouseover=\"r(\'"+hexadecimal+"\'); return true\"><img src=\"\" border=\"0\" height=\"20\" width=\"20\"/></a></td>");
      z++;
      red++;
      if (red==6)
      {
      red=0;
      }
      }
    x++;
    green++;
    if (green==6)
    {
    green=0;
    }
    xyz++;
    if (xyz==3)
    {
    window.document.write("</tr>");
    xyz=0;
    }
    }
  y++;
  blue++
  if (blue==6)
  {
  blue=0;
  }
  }
// End color cube. -->
</script>
</table>
</center>
<br/>
<center><form name="f" onSubmit="changeBack(); return false;"><input class="textall" type="text" name="c" size="7"></form></center>
</div>
<p></p>

<div class="color-a">
<table align="center">
  <tr>
     <td align="center" width="100"><span style="color:red; font-weight:bolder">R</span>ed</td>
     <td align="center" width="100"><span style="color:green; font-weight:bolder">G</span>reen</td>
     <td align="center" width="100"><span style="color:blue; font-weight:bolder">B</span>lue</td>
  </tr>
  <tr>
     <td align="center"><form name="bb" onSubmit="changeBackRGB(); return false;"><input class="textall" type="text" name="re" size="2"></form></td>
     <td align="center"><form name="cc" onSubmit="changeBackRGB(); return false;"><input class="textall" type="text" name="gr" size="2"></form></td>
     <td align="center"><form name="dd" onSubmit="changeBackRGB(); return false;"><input class="textall" type="text" name="bl" size="2"></form></td>
  </tr>
</table>
</div>
<p></p>
<center><span style="font-size:12px">칼라박스를 클릭하면 색상이 고정되고 <br/> 다른 칼라박스를 클릭하면  고정이 풀립니다.<br/><br/> [출처: http://www.javascriptsource.com] </span></center>


</body>
</html>


반응형