« »
Another script to create a color picker.
Label: Milonic DHTML Color Picker

Demo
Enlarge
Reload
New window
Code
HTML
Print
Copy All x2
<TABLE 
      style="BORDER-RIGHT: #bbbbbb 1px solid; BORDER-TOP: #bbbbbb 1px solid; BORDER-LEFT: #bbbbbb 1px solid; BORDER-BOTTOM: #bbbbbb 1px solid" 
      cellPadding=13 border=0 id="table1">

        <TBODY>
        <TR>
          <TD class=menuW>Color picker is another work in progress.<BR><BR>As we 
			improve it, we will add more details and docs here.<BR><BR>
<SCRIPT language=javascript>

curbgcol="0000ff";
curfgcol="#ffff00";
if(curbgcol.substr(1,0)!="#")curbgcol="#"+curbgcol
bleft=20
btop=20
cpheight=10
cpwidth=10
cpgap=1
samplewidth=50;
sampletext="<b>T<br>e<br>x<br>t"

d=document;curcol="bg";nscurbgcol=curbgcol;nscurfgcol=curfgcol
function rgb2hex(r,g,b){rval=dec2hex(r)+dec2hex(g)+dec2hex(b);return rval}
function rgb2dec(r,g,b){rval=rgb2hex(r,g,b);rval=hex2dec(rval);return rval}
function hex2dec(hd){rval=parseInt(hd,16);return rval}
function dec2hex(dh){rhex=tohex(dh);return rhex}
function tohex(i){a2='';ihex=hexQuot(i);idiff=eval(i+'-('+ihex+'*16)');a2=itohex(idiff)+a2;while(ihex>=16){itmp=hexQuot(ihex);idiff=eval(ihex+'-('+itmp+'*16)');a2=itohex(idiff)+a2;ihex=itmp;}a1=itohex(ihex);return a1+a2;}
function hexQuot(i){return Math.floor(eval(i+'/16'))}
function itohex(i){if(i==0){aa='0'}else{if(i==1){aa='1'}else{if(i==2){aa='2'}else{if(i==3){aa='3'}else{if(i==4){aa='4'}else{if(i==5){aa='5'}else{if(i==6){aa='6'}else{if(i==7){aa='7'}else{if(i==8){aa='8'}else{if(i==9){aa='9'}else{if(i==10){aa='A'}else{if(i==11){aa='B'}else{if(i==12){aa='C'}else{if(i==13){aa='D'}else{if(i==14){aa='E'}else{if(i==15){aa='F'}}}}}}}}}}}}}}}}return aa}
function g_col(rgb,hex){if(rgb=="r"){thv=hex2dec(hex.substr(0,2))}if(rgb=="g"){thv=hex2dec(hex.substr(2,2))}if(rgb=="b"){thv=hex2dec(hex.substr(4,2))}return thv}
function gmobj(mtxt){if(d.getElementById){m=d.getElementById(mtxt)}else if(d.all){m=d.all[mtxt]}else if(d.layers){m=d.cpicker.document.layers.eval(mtxt)}return m;}
ns4=(d.layers)?true:false
ns6=(navigator.userAgent.indexOf("Gecko")!=-1)?true:false
mac=(navigator.appVersion.indexOf("Mac")!=-1)?true:false
opera=(navigator.userAgent.indexOf("Opera")!=-1)?true:false
ns693=(parseInt(navigator.productSub)>=20010726)?true:false
mp=(ns6)?"pointer":"hand"
if(ns4){d.write("<layer id=cpicker>")}else{d.write("<div id=cpicker style='position:absolute;'>")}
swatch=["330000","333300","336600","339900","33CC00","33FF00","66FF00","66CC00","669900","666600","663300","660000","FF0000","FF3300","FF6600","FF9900","FFCC00","FFFF00",
"330033","333333","336633","339933","33CC33","33FF33","66FF33","66CC33","669933","666633","663333","660033","FF0033","FF3333","FF6633","FF9933","FFCC33","FFFF33",
"330066","333366","336666","339966","33CC66","33FF66","66FF66","66CC66","669966","666666","663366","660066","FF0066","FF3366","FF6666","FF9966","FFCC66","FFFF66",
"330099","333399","336699","339999","33CC99","33FF99","66FF99","66CC99","669999","666699","663399","660099","FF0099","FF3399","FF6699","FF9999","FFCC99","FFFF99",
"3300CC","3333CC","3366CC","3399CC","33CCCC","33FFCC","66FFCC","66CCCC","6699CC","6666CC","6633CC","6600CC","FF00CC","FF33CC","FF66CC","FF99CC","FFCCCC","FFFFCC",
"3300FF","3333FF","3366FF","3399FF","33CCFF","33FFFF","66FFFF","66CCFF","6699FF","6666FF","6633FF","6600FF","FF00FF","FF33FF","FF66FF","FF99FF","FFCCFF","FFFFFF",
"0000FF","0033FF","0066FF","0099FF","00CCFF","00FFFF","99FFFF","99CCFF","9999FF","9966FF","9933FF","9900FF","CC00FF","CC33FF","CC66FF","CC99FF","CCCCFF","CCFFFF",
"0000CC","0033CC","0066CC","0099CC","00CCCC","00FFCC","99FFCC","99CCCC","9999CC","9966CC","9933CC","9900CC","CC00CC","CC33CC","CC66CC","CC99CC","CCCCCC","CCFFCC",
"000099","003399","006699","009999","00CC99","00FF99","99FF99","99CC99","999999","996699","993399","990099","CC0099","CC3399","CC6699","CC9999","CCCC99","CCFF99",
"000066","003366","006666","009966","00CC66","00FF66","99FF66","99CC66","999966","996666","993366","990066","CC0066","CC3366","CC6666","CC9966","CCCC66","CCFF66",
"000033","003333","006633","009933","00CC33","00FF33","99FF33","99CC33","999933","996633","993333","990033","CC0033","CC3333","CC6633","CC9933","CCCC33","CCFF33",
"000000","003300","006600","009900","00CC00","00FF00","99FF00","99CC00","999900","996600","993300","990000","CC0000","CC3300","CC6600","CC9900","CCCC00","CCFF00"]
function fixhexcolor(col){col=col+"000000";col=col.substr(0,6);col=col.toUpperCase();ncol="";for(a=0;a<col.length;a++){ts=col.substr(a,1);if(isNaN(ts)){if(ts=="A"||ts=="B"||ts=="C"||ts=="D"||ts=="E"||ts=="F"){ncol+=ts}else{ncol+="0"}}else{ncol+=ts}}return ncol}
function getnstext(){return "<html><head></head><body bgcolor="+nscurbgcol+" text="+nscurfgcol+"><layer width="+samplewidth+"><table width=100%><tr><td class=form1 align=center>"+sampletext+"</td></tr></table></layer></body></html>"}
function redrawnslayer(ac){ac.document.open();nstext=getnstext();ac.document.writeln(nstext);ac.document.close();}

function showcolor(adiv)
{
	if (ns4)
	{
		ac = gmobj("acol");
		ad = gmobj("container");
		hex = dec2hex(adiv.bgColor)
		if(hex.length==2)hex="0000"+hex
		if(hex.length==4)hex="00"+hex
		if(ad.document.forms.cp.R1[0].checked)
		{
			curcol="txt"
			nscurfgcol=hex
		}
		else
		{
			curcol="bg"	
			nscurbgcol=hex
		}
		redrawnslayer(ac)
	}
	else
	{
		if(d.forms.cp.R1[0].checked){curcol="txt"}else{curcol="bg"}
		ac = gmobj("acol");
		if (opera)
		{
			scol = adiv.style.background
			if(curcol=="txt")
			{
				ac.style.color = adiv.style.background

			}
			else
			{
				ac.style.background = adiv.style.background
			}
		}
		else
		{
			scol = adiv.style.backgroundColor
			if(curcol=="txt")
			{
				ac.style.color = adiv.style.backgroundColor
			}
			else
			{
				ac.style.backgroundColor = adiv.style.backgroundColor
			}
		}
	}
}

function changetype(what)
{
	if(curcol=="bg")curcol="fg"; else curcol="bg"

	if (ns4)
	{
		nscurbgcol = curbgcol
		nscurfgcol = curfgcol
		ac=gmobj(what)
		redrawnslayer(ac)
		set_texts(hex)
	}
	else
	{
		ac = gmobj(what);
		if (opera)
		{
			ac.style.background = curbgcol
			ac.style.color =curfgcol
		}
		else
		{
			ac.style.backgroundColor = curbgcol
			ac.style.color = curfgcol
		}
	}
}

function nssetcolor(e){setcolor(nsobj)}

function changehexcolor(hexcolor)
{
	if(curcol=="bg")
	{
		curbgcol=fixhexcolor(hexcolor.value)
		nscurbgcol=curbgcol
		set_texts(curbgcol)
	}
	else
	{
		curfgcol=fixhexcolor(hexcolor.value)
		nscurfgcol=curfgcol
		set_texts(curfgcol)
	}
	
	changetype('acol');
	changetype('selcol');
}


function set_texts(hex)
{
	if (ns4)
	{
		ad = gmobj("container");
		ad.document.forms.cp.cpcolor.value=hex.toUpperCase()
		ad.document.forms.cp.vred.value = g_col("r",hex)
		ad.document.forms.cp.vgreen.value = g_col("g",hex)
		ad.document.forms.cp.vblue.value = g_col("b",hex)
	}
	else
	{
		d.forms.cp.cpcolor.value = hex.toUpperCase()
		d.forms.cp.vred.value = g_col("r",hex)
		d.forms.cp.vgreen.value = g_col("g",hex)
		d.forms.cp.vblue.value = g_col("b",hex)
	}
}


function changergb(colr,type)
{
	if (ns4)
	{
	
	}
	else
	{
		r=parseInt(d.forms.cp.vred.value)
		g=parseInt(d.forms.cp.vgreen.value)
		b=parseInt(d.forms.cp.vblue.value)
		rh=dec2hex(r)
		//alert(rh)
		//rint=(r+1)*(g+1)*(b+1)

		//hex = dec2hex(rint)
		//if(hex.length==2)hex="0000"+hex
		//if(hex.length==4)hex="00"+hex
		
	//	set_texts(dec2hex(rint))
		//alert(hex)
		//alert(rint);
	}
}

function setcolor(adiv)
{
	if (ns4)
	{
		hex=dec2hex(adiv.bgColor)
		if(hex.length==2)hex="0000"+hex
		if(hex.length==4)hex="00"+hex
		set_texts(hex)
		sc = gmobj("selcol");
		if(curcol=="bg"){curbgcol=hex}else{curfgcol=hex}
		redrawnslayer(sc)
	}
	else
	{
		if(ns6)
		{
			scol=scol.substr(4,20)
			scol=scol.substr(0,scol.length-1)
			scol=scol.split("\,")
			hex=dec2hex(scol[0])+dec2hex(scol[1])+dec2hex(scol[2])
		}
		else
		{
			hex=scol.substr(1,scol.length)
		}
		if(curcol=="bg"){curbgcol=hex}else{curfgcol=hex}
		set_texts(hex)

		sc = gmobj("selcol");
		if (opera)
		{
			if(curcol=="bg")
			{
				sc.style.background = adiv.style.background
			}
			else
			{
				sc.style.color = adiv.style.background
			}
		}
		else
		{
			if(curcol=="bg")
			{
				sc.style.backgroundColor = adiv.style.backgroundColor
			}
			else
			{
				sc.style.color = adiv.style.backgroundColor
			}
		}
	}
}

cnt=0;
itop = btop;

for (sn=0;sn<11;sn++)
{
	ileft=bleft
	for (a=0;a<18;a++)
	{
		if(ns4)
		{
			ndiv = "<layer onmouseover=\"this.captureEvents(Event.CLICK);nsobj=this;this.onClick=nssetcolor;showcolor(this);\" bgcolor=#" + swatch[cnt] + " left=" + ileft + " top="+itop+" width="+cpwidth+" height="+cpheight+"></layer>"
		}
		else
		{
			ndiv = "<div onmouseover=\"this.style.cursor='"+mp+"';showcolor(this);\" onmouseup=\"setcolor(this);\" style=\"font-size:6px;width:"+cpwidth+"px;height:"+cpheight+"px;position:absolute;background-color:#" + swatch[cnt] + ";left:" + ileft + "px; top:"+itop+"px; \"></div>"
		}
		d.write(ndiv);
		cnt++
		ileft=ileft+cpwidth+cpgap;
	}
	itop=itop+cpheight+cpgap
}

ileft=ileft+cpwidth+cpgap;
tbl="<form name=cp><table width="+(ileft+samplewidth)+" border=0 cellspacing=0><tr><td class=form1 valign=bottom>Red</td><td class=form1 valign=bottom><input name=vred onblur=changergb() size=3></td><td class=form1 nowrap><input onclick=changetype('acol') type=radio value=sfgc name=R1>Text<br><input onclick=changetype('acol') type=radio value=sbgc name=R1 checked>Background</td><td class=form1 width=101 rowspan=4> </td></tr><tr><td class=form1 rowspan=2>Green</td><td class=form1 rowspan=2><input name=vgreen onblur=changergb() size=3></td><td class=form1 nowrap>Hex #<input type=text name=cpcolor size=7 onblur=changehexcolor(this)></td></tr><tr><td class=form1 rowspan=2 align=center><input type=button value=OK name=btnok> <input type=button value=Cancel name=btncancel></td></tr><tr><td class=form1 valign=top>Blue</td><td class=form1 valign=top><input name=vblue onblur=changergb() size=3></td></tr></table></form>"
if (ns4)
{

}
else
{
sampletext = "<div valign=middle align=center>"+sampletext+"</div>"
}

if (ns4)
{	
	ndiv = "<layer id=acol left="+ ileft + " top="+(btop+5)+" width="+samplewidth+" height="+(itop-cpgap-btop-10)+"><table width=100%><tr><td class=form1 align=center>"+sampletext+"</td></tr></table></layer>"
	d.write(ndiv);
	ndiv = "<layer id=container left="+bleft+" top="+itop+">"+tbl+"</layer>"	
	d.write(ndiv);
	nstext = getnstext();
	ndiv = "<layer id=selcol bgcolor="+curbgcol+" left="+ ileft + " top="+(itop+5)+" width="+samplewidth+" height=100>"+nstext+"</layer>"
	d.write(ndiv);
}
else
{
	brdr = "border:solid 2px; border-left-color:#cccccc;border-top-color:#cccccc;border-bottom-color:#000000;border-right-color:#000000;"
	ndiv = "<div id=acol style=\"background-color:white;position:absolute;left:" + ileft + "px; top:"+(btop+5)+"px;width:"+samplewidth+"px;height:"+(itop-cpgap-btop-10)+"px;"+brdr+"\">"+sampletext+"</div>"
	d.write(ndiv);
	ndiv = "<div style=\"position:absolute;left:"+bleft+"px;top:"+itop+"px;\">"+tbl+"</div>"
	d.write(ndiv);
	ndiv = "<div id=selcol style=\"width:"+samplewidth+"px;height:100px;color:"+curfgcol+";background-color:"+curbgcol+";position:absolute;left:"+ileft+"px;top:"+(itop+5)+"px;\">"+sampletext+"</div>"
	d.write(ndiv);
}

if (ns4)
{d.write("</layer>")
}
else
{d.write("</div>")}

</SCRIPT>
            <BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
</TD></TR></TBODY></TABLE>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->