묻고답하기
소스 수정 좀 부탁드립니다.
2006.01.13 09:51
도저히 이렇게 복잡한 자바스크립트는 처음이라서 어디서부터 어떻게 건드려야 할지 전혀 모르겠네요.
컬러매치라는 기능을 하는건데요. 홈페이지 제작할때 하나의 색을 결정하면 그 색과 가장 잘어울리는 5가지 색깔을 골라주는 소스에요.(맨 처음것이 고른색깔)
이 소스에 text input 을 넣어서 hex 코드를 직접넣어 자기가 원하는 색을 고를수 있으면 좋겠습니다. 매번 색깔을 고를때마다 좌측바를 움직여서 할려니 정확한 값을 측정하기가 힘드네요
---------------------------------------------------------------------------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<style>
body {background-color:#cccccc;font:10px;margin:10px;margin-top:20px;color:#323232;font-family : Tahoma;}
p {margin:0px;margin-bottom:4px;font:11px;font-family : Tahoma;line-height: 12px;}
td {vertical-align:top;}
h1 {font-size:12px;font-weight:bold;margin:0px;margin-bottom:8px;}
</style>
</head>
<body>
<style>
.s{border:inset 2;width:50}
.s2{border:outset 2;width:19;height:19;background-color:#d3d3d3;position:absolute;left:1;top:1}
.t{font:11px tahoma;color:#555555}
.t2{font:bold 36px verdana}
</style>
</head>
<script language="JavaScript">
var mover=moveg=moveb=moveh=0;
var hs=new Object();
var rg=new Object();
rg.r=rg.g=rg.b=0;
function click(x,s) {
if(x<10){x=10};
if(x>265){x=265}x-=10;
eval("h"+s+".style").left=x+1;
eval("rg."+s+"="+x);rg2hs(rg);ud("0",rg);
sw.style.backgroundColor="rgb("+rg.r+","+rg.g+","+rg.b+")";
dom();
}
function bclick(s) {
x=window.event.offsetX+eval("h"+s+".style.pixelLeft-1");
click(x,s);
}
function sc(s) {
x=window.event.offsetX;click(x,s);
}
function movee(s) {
eval("move"+s+"=0")
}
function rc(x,m) {
if(x>m) {return m}
if(x<0) {return 0}
else{return x}
}
function rg2hs(rg) {
m=rg.r;
if(rg.g<m){m=rg.g};
if(rg.b<m){m=rg.b};
v=rg.r;
if(rg.g>v){v=rg.g};
if(rg.b>v){v=rg.b};
value=100*v/255;
delta=v-m;
if(v==0.0){hs.s=0}
else{hs.s=100*delta/v};
if(hs.s==0){hs.h=0}
else {
if(rg.r==v){hs.h=60.0*(rg.g-rg.b)/delta}
else if(rg.g==v){hs.h=120.0+60.0*(rg.b-rg.r)/delta}
else if(rg.b=v){hs.h=240.0+60.0*(rg.r-rg.g)/delta}
if(hs.h<0.0){hs.h=hs.h+360.0}
}
hs.v=Math.round(value);
hs.h=Math.round(hs.h);
hs.s=Math.round(hs.s);
return(true);
}
function rg2html(z) {
return "#"+d2h(z.r)+d2h(z.g)+d2h(z.b);
}
function d2h(d) {
hch="0123456789ABCDEF";a=d%16;b=(d-a)/16;
return hch.charAt(b)+hch.charAt(a);
}
function c2r(d) {
k=window.event.srcElement.style.backgroundColor;j=(k.substr(4,k.indexOf(")")-4)).split(",");
click(parseInt(j[0])+10,"r");
click(parseInt(j[1])+10,"g");
click(parseInt(j[2])+10,"b");
}
function h2r(hs) {
var rg=new Object();
if(hs.s==0){rg.r=rg.g=rg.b=Math.round(hs.v*2.55);
return rg;
}
hs.s=hs.s/100;hs.v=hs.v/100;hs.h/=60;
i=Math.floor(hs.h);f=hs.h-i;p=hs.v*(1-hs.s);
q=hs.v*(1-hs.s*f);
t=hs.v*(1-hs.s*(1-f));
switch(i) {
case 0:rg.r=hs.v;rg.g=t;rg.b=p;
break;
case 1:rg.r=q;rg.g=hs.v;rg.b=p;
break;
case 2:rg.r=p;rg.g=hs.v;rg.b=t;
break;
case 3:rg.r=p;rg.g=q;rg.b=hs.v;
break;
case 4:rg.r=t;rg.g=p;rg.b=hs.v;
break;
default:rg.r=hs.v;rg.g=p;rg.b=q;
}
rg.r=Math.round(rg.r*255);
rg.g=Math.round(rg.g*255);
rg.b=Math.round(rg.b*255);
return rg;
}
function ps(x) {
document.write('<td><div style="width:53;height:53;background-color:rgb(0,0,0);cursor:hand" class=s id="sw'+x+'" onClick="c2r()" title="Click to promote to primary color"></div></td>');
}
function ph(x) {
document.write('<td><div class=t id="hc'+x+'">#000000</div></td>');
}
function ud(x,c) {
eval("sw"+x).style.backgroundColor="rgb("+c.r+","+c.g+","+c.b+")";
eval("hc"+x).innerHTML=rg2html(c)
}
function pl(t,c,l) {
document.write('<div style="position:absolute;left:30;top:'+t+';background-color:black"><div class=s style="width:276;height:21;background-color:'+c+';filter:alpha(style=1,startx=360,finishx=0);" onMouseDown="move'+l+'=1;sc(''+l+'');" onMouseMove="if(move'+l+'==1){sc(''+l+''+ '+ ');}"></div><div class=s2 id=h'+l+' onMouseDown="move'+l+'=1;bclick(''+l+'');" onMouseUp="movee(''+l+'');" onMouseMove="if(move'+l+'==1){bclick(''+l+'');}"></div></div>')
}
function dom() {
z=new Object();
y=new Object();
yx=new Object();
y.s=hs.s;y.h=hs.h;
if(hs.v>70) {
y.v=hs.v-30
}
else {y.v=hs.v+30};
z=h2r(y);ud("1",z);
if((hs.h>=0)&&(hs.h<30)) {
yx.h=y.h=hs.h+20;yx.s=y.s=hs.s;y.v=hs.v;
if(hs.v>70){yx.v=hs.v-30}
else{yx.v=hs.v+30}
}
if((hs.h>=30)&&(hs.h<60)){yx.h=y.h=hs.h+150;y.s=rc(hs.s-30,100);y.v=rc(hs.v-20,100);yx.s=rc(hs.s-70,100);yx.v=rc(hs.v+20,100);}
if((hs.h>=60)&&(hs.h<180)){yx.h=y.h=hs.h-40;y.s=yx.s=hs.s;y.v=hs.v;
if(hs.v>70){yx.v=hs.v-30}
else{yx.v=hs.v+30}
}
if((hs.h>=180)&&(hs.h<220))
{yx.h=hs.h-170;y.h=hs.h-160;yx.s=y.s=hs.s;y.v=hs.v;if(hs.v>70){yx.v=hs.v-30}else{yx.v=hs.v+30}}if((hs.h>=220)&&(hs.h<300)){yx.h=y.h=hs.h;yx.s=y.s=rc(hs.s-60,100);y.v=hs.v;if(hs.v>70){yx.v=hs.v-30}else{yx.v=hs.v+30}
}
if(hs.h>=300){
if(hs.s>50){y.s=yx.s=hs.s-40}
else {y.s=yx.s=hs.s+40}
yx.h=y.h=(hs.h+20)%360;y.v=hs.v;
if(hs.v>70){yx.v=hs.v-30}
else{yx.v=hs.v+30}
}
z=h2r(y);
ud("2",z);
z=h2r(yx);
ud("3",z);
y.h=0;y.s=0;y.v=100-hs.v;
z=h2r(y);ud("4",z);
y.h=0;y.s=0;
y.v=hs.v;z=h2r(y);
ud("5",z);
}
</script>
<body onMouseUp="mover=moveg=moveb=0;" bgcolor=#E6E6E6 leftmargin=0 topmargin=0 class=t>
<script>
pl(10,"red","r");
pl(35,"green","g");
pl(60,"blue","b")
</script>
<div class=s id=sw style="position:absolute;
left:316;
top:10;
height:72;
width:82;
background-color:black;">
</div>
<div style="position:absolute;left:20;top:80;">
<table cellspacing=10 cellpadding=0>
<tr>
<script>
ps(0);
ps(1);
ps(2);
ps(3);
ps(4);
ps(5);
</script>
</tr>
<tr>
<script>
ph(0);
ph(1);
ph(2);
ph(3);
ph(4);
ph(5);
</script>
</tr>
</table>
</div>
</body>
</html>
컬러매치라는 기능을 하는건데요. 홈페이지 제작할때 하나의 색을 결정하면 그 색과 가장 잘어울리는 5가지 색깔을 골라주는 소스에요.(맨 처음것이 고른색깔)
이 소스에 text input 을 넣어서 hex 코드를 직접넣어 자기가 원하는 색을 고를수 있으면 좋겠습니다. 매번 색깔을 고를때마다 좌측바를 움직여서 할려니 정확한 값을 측정하기가 힘드네요
---------------------------------------------------------------------------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<style>
body {background-color:#cccccc;font:10px;margin:10px;margin-top:20px;color:#323232;font-family : Tahoma;}
p {margin:0px;margin-bottom:4px;font:11px;font-family : Tahoma;line-height: 12px;}
td {vertical-align:top;}
h1 {font-size:12px;font-weight:bold;margin:0px;margin-bottom:8px;}
</style>
</head>
<body>
<style>
.s{border:inset 2;width:50}
.s2{border:outset 2;width:19;height:19;background-color:#d3d3d3;position:absolute;left:1;top:1}
.t{font:11px tahoma;color:#555555}
.t2{font:bold 36px verdana}
</style>
</head>
<script language="JavaScript">
var mover=moveg=moveb=moveh=0;
var hs=new Object();
var rg=new Object();
rg.r=rg.g=rg.b=0;
function click(x,s) {
if(x<10){x=10};
if(x>265){x=265}x-=10;
eval("h"+s+".style").left=x+1;
eval("rg."+s+"="+x);rg2hs(rg);ud("0",rg);
sw.style.backgroundColor="rgb("+rg.r+","+rg.g+","+rg.b+")";
dom();
}
function bclick(s) {
x=window.event.offsetX+eval("h"+s+".style.pixelLeft-1");
click(x,s);
}
function sc(s) {
x=window.event.offsetX;click(x,s);
}
function movee(s) {
eval("move"+s+"=0")
}
function rc(x,m) {
if(x>m) {return m}
if(x<0) {return 0}
else{return x}
}
function rg2hs(rg) {
m=rg.r;
if(rg.g<m){m=rg.g};
if(rg.b<m){m=rg.b};
v=rg.r;
if(rg.g>v){v=rg.g};
if(rg.b>v){v=rg.b};
value=100*v/255;
delta=v-m;
if(v==0.0){hs.s=0}
else{hs.s=100*delta/v};
if(hs.s==0){hs.h=0}
else {
if(rg.r==v){hs.h=60.0*(rg.g-rg.b)/delta}
else if(rg.g==v){hs.h=120.0+60.0*(rg.b-rg.r)/delta}
else if(rg.b=v){hs.h=240.0+60.0*(rg.r-rg.g)/delta}
if(hs.h<0.0){hs.h=hs.h+360.0}
}
hs.v=Math.round(value);
hs.h=Math.round(hs.h);
hs.s=Math.round(hs.s);
return(true);
}
function rg2html(z) {
return "#"+d2h(z.r)+d2h(z.g)+d2h(z.b);
}
function d2h(d) {
hch="0123456789ABCDEF";a=d%16;b=(d-a)/16;
return hch.charAt(b)+hch.charAt(a);
}
function c2r(d) {
k=window.event.srcElement.style.backgroundColor;j=(k.substr(4,k.indexOf(")")-4)).split(",");
click(parseInt(j[0])+10,"r");
click(parseInt(j[1])+10,"g");
click(parseInt(j[2])+10,"b");
}
function h2r(hs) {
var rg=new Object();
if(hs.s==0){rg.r=rg.g=rg.b=Math.round(hs.v*2.55);
return rg;
}
hs.s=hs.s/100;hs.v=hs.v/100;hs.h/=60;
i=Math.floor(hs.h);f=hs.h-i;p=hs.v*(1-hs.s);
q=hs.v*(1-hs.s*f);
t=hs.v*(1-hs.s*(1-f));
switch(i) {
case 0:rg.r=hs.v;rg.g=t;rg.b=p;
break;
case 1:rg.r=q;rg.g=hs.v;rg.b=p;
break;
case 2:rg.r=p;rg.g=hs.v;rg.b=t;
break;
case 3:rg.r=p;rg.g=q;rg.b=hs.v;
break;
case 4:rg.r=t;rg.g=p;rg.b=hs.v;
break;
default:rg.r=hs.v;rg.g=p;rg.b=q;
}
rg.r=Math.round(rg.r*255);
rg.g=Math.round(rg.g*255);
rg.b=Math.round(rg.b*255);
return rg;
}
function ps(x) {
document.write('<td><div style="width:53;height:53;background-color:rgb(0,0,0);cursor:hand" class=s id="sw'+x+'" onClick="c2r()" title="Click to promote to primary color"></div></td>');
}
function ph(x) {
document.write('<td><div class=t id="hc'+x+'">#000000</div></td>');
}
function ud(x,c) {
eval("sw"+x).style.backgroundColor="rgb("+c.r+","+c.g+","+c.b+")";
eval("hc"+x).innerHTML=rg2html(c)
}
function pl(t,c,l) {
document.write('<div style="position:absolute;left:30;top:'+t+';background-color:black"><div class=s style="width:276;height:21;background-color:'+c+';filter:alpha(style=1,startx=360,finishx=0);" onMouseDown="move'+l+'=1;sc(''+l+'');" onMouseMove="if(move'+l+'==1){sc(''+l+''+ '+ ');}"></div><div class=s2 id=h'+l+' onMouseDown="move'+l+'=1;bclick(''+l+'');" onMouseUp="movee(''+l+'');" onMouseMove="if(move'+l+'==1){bclick(''+l+'');}"></div></div>')
}
function dom() {
z=new Object();
y=new Object();
yx=new Object();
y.s=hs.s;y.h=hs.h;
if(hs.v>70) {
y.v=hs.v-30
}
else {y.v=hs.v+30};
z=h2r(y);ud("1",z);
if((hs.h>=0)&&(hs.h<30)) {
yx.h=y.h=hs.h+20;yx.s=y.s=hs.s;y.v=hs.v;
if(hs.v>70){yx.v=hs.v-30}
else{yx.v=hs.v+30}
}
if((hs.h>=30)&&(hs.h<60)){yx.h=y.h=hs.h+150;y.s=rc(hs.s-30,100);y.v=rc(hs.v-20,100);yx.s=rc(hs.s-70,100);yx.v=rc(hs.v+20,100);}
if((hs.h>=60)&&(hs.h<180)){yx.h=y.h=hs.h-40;y.s=yx.s=hs.s;y.v=hs.v;
if(hs.v>70){yx.v=hs.v-30}
else{yx.v=hs.v+30}
}
if((hs.h>=180)&&(hs.h<220))
{yx.h=hs.h-170;y.h=hs.h-160;yx.s=y.s=hs.s;y.v=hs.v;if(hs.v>70){yx.v=hs.v-30}else{yx.v=hs.v+30}}if((hs.h>=220)&&(hs.h<300)){yx.h=y.h=hs.h;yx.s=y.s=rc(hs.s-60,100);y.v=hs.v;if(hs.v>70){yx.v=hs.v-30}else{yx.v=hs.v+30}
}
if(hs.h>=300){
if(hs.s>50){y.s=yx.s=hs.s-40}
else {y.s=yx.s=hs.s+40}
yx.h=y.h=(hs.h+20)%360;y.v=hs.v;
if(hs.v>70){yx.v=hs.v-30}
else{yx.v=hs.v+30}
}
z=h2r(y);
ud("2",z);
z=h2r(yx);
ud("3",z);
y.h=0;y.s=0;y.v=100-hs.v;
z=h2r(y);ud("4",z);
y.h=0;y.s=0;
y.v=hs.v;z=h2r(y);
ud("5",z);
}
</script>
<body onMouseUp="mover=moveg=moveb=0;" bgcolor=#E6E6E6 leftmargin=0 topmargin=0 class=t>
<script>
pl(10,"red","r");
pl(35,"green","g");
pl(60,"blue","b")
</script>
<div class=s id=sw style="position:absolute;
left:316;
top:10;
height:72;
width:82;
background-color:black;">
</div>
<div style="position:absolute;left:20;top:80;">
<table cellspacing=10 cellpadding=0>
<tr>
<script>
ps(0);
ps(1);
ps(2);
ps(3);
ps(4);
ps(5);
</script>
</tr>
<tr>
<script>
ph(0);
ph(1);
ph(2);
ph(3);
ph(4);
ph(5);
</script>
</tr>
</table>
</div>
</body>
</html>