웹솔루션개발 22년 노하우! 해피CGI의 모든것

[해피CGI][cgimall] DHTML Color Picker Type.2 본문

웹프로그램밍 자료실/DHTML 자료

[해피CGI][cgimall] DHTML Color Picker Type.2

해피CGI윤실장 2016. 11. 9. 13:23

<!--/// (1) <HEAD> 태그안에 아래의 소스코드를 삽입하세요. ///-->
<script langauge="javascript">
// Author: Dion, biab@iinet.net.au, http://biab.howtojs.com/
// Courtesy of SimplytheBest.net - http://simplythebest.net/scripts/

addary=new Array(255,1,1);
clrary=new Array(360);
for(i=0;i<6;i++)
for(j=0;j<60;j++)
{ clrary[60*i+j]=new Array(3);
for(k=0;k<3;k++)
{ clrary[60*i+j][k]=addary[k];
addary[k]+=((Math.floor(65049010/Math.pow(3,i*3+k))%3)-1)*4; }; };

function capture()
{ if(document.layers)
{ with(document.layers['imgdiv'])
{ document.captureEvents(Event.MOUSEMOVE);
document.onmousemove=moved; }; }
else { document.all.imgdiv.onmousemove=moved; };
};

function moved(e)
{ sx=((document.layers)?e.layerY:event.offsetY)-256;
sy=((document.layers)?e.layerX:event.offsetX)-256;
quad=new Array(-180,360,180,0);
xa=Math.abs(sx); ya=Math.abs(sy);
d=ya*45/xa;
if(ya>xa) d=90-(xa*45/ya);
deg=Math.floor(Math.abs(quad[2*((sy<0)?0:1)+((sx<0)?0:1)]-d));
n=0; c="000000";
r=Math.sqrt((xa*xa)+(ya*ya));
if(sx!=0 || sy!=0)
{ for(i=0;i<3;i++)
{ r2=clrary[deg][i]*r/128;
if(r>128) r2+=Math.floor(r-128)*2;
if(r2>255) r2=255;
n=256*n+Math.floor(r2); };
c=(n.toString(16)).toUpperCase();
while(c.length<6) c="0"+c; };
if(document.layers)
{ document.layers['clrdiv'].bgColor="#"+c; }
else
{ document.all["clrdiv"].style.backgroundColor="#"+c; };
document.frm.txt.value="#"+c;
document.frm.hid.value="#"+c;
return false; };
function setcolor()
{ document.frm.sel.value=document.frm.hid.value; };
</script>
<style type="text/css">
#imgdiv { position:relative; }
#clrdiv { position:relative; background-color:white; }
</style>

 

<!--/// (2) <BODY> 태그에 아래의 소스코드를 삽입하세요. ///-->
<body onload="capture();">



<!--/// (3) <BODY> 태그안에 아래의 소스코드를 삽입하세요. ///-->
<table border=1 cellpadding=0 cellspacing=0>
<tr><td><div id=imgdiv><a href="javascript:void(0);" onclick="setcolor(); return false;">
<img src="images/colorwheel.jpg" width=512 height=512 border=0></a></div></td></tr>
<tr><td align="center"><div id=clrdiv>262,144 colors to choose from</div></td></tr>
<tr><form name="frm"><td align="center"><input type="text" name="txt" size=12>
<input type="text" name="sel" size=12>
<input type="hidden" name="hid"></td></form></tr>
</table>


<!--/// (4) 아래 보이는 이미지를 해당폴더 위치에 저장합니다. (HTML파일기준: images/colorwheel.jpg) ///-->

 

 

 

 

홈페이지바로가기 

저작자표시

'웹프로그램밍 자료실 > DHTML 자료' 카테고리의 다른 글

[해피CGI][cgimall] SQLCA.COM - 개발자 네트  (0) 2016.11.15
[해피CGI][cgimall] DHTML Color Picker  (0) 2016.11.11
[해피CGI][cgimall] 필터를이용한 롤오버효과  (0) 2016.11.07
[해피CGI][cgimall] CSS 무료 템플릿 사이트  (0) 2016.11.03
[해피CGI][cgimall] 모바일 홈페이지에 카카오톡 연결하기  (0) 2016.11.01
공유하기 링크
'웹프로그램밍 자료실/DHTML 자료' Related Articles more
Comments