Thaimisc.com : ทำตารางสี RGB แบบแสดงออกมาเป็นรหัสสี
ThaiMisc.Com : Free Webboard | Free GuestBook | Free Poll | Free Ecard Server | Free Java Chat Room | Advertising | Contact Us | Colocation | Web Hosting | เปิดร้านค้าฟรี


Category : Today's Tips Print Article Only Print Aticle With Comment
ทำตารางสี RGB แบบแสดงออกมาเป็นรหัสสี
เขียนโดย Poj , 07-05-2007
เหมาะที่จะเอาไว้ใช้ดูรหัสสีเวลาทำเว็บครับ
ทำตารางสีเมื่อนำ Mouse ไปชี้จะขึ้นเป็นรหัสสีและแยกเป็น R G B ให้ด้วย ดูตัวอย่างได้ ที่นี่ ครับ

1.นำโค้ดส่วนนี้ไปใส่ไว้ใน <head>....</head> ครับ

<SCRIPT LANGUAGE="JavaScript">
<!-- ;

// Free JavaScript code provided by SysCo.ch
// javascript@sysco.ch

cellsize = 4;
colorstep = 16; // Perfect square please !

substep = Math.ceil(Math.sqrt(colorstep));
corrector = 255/(colorstep-1);

red = 0
green = 0
blue = 0

redH = '00'
greenH = '00'
blueH = '00'

function HexToDec(Code)
{
result = 0
refDec='0123456789ABCDEF'
for (var posCode = 0; posCode < Code.length; posCode++)
{
currentCode = Code.substring(posCode,posCode+1).toUpperCase();
posDec = refDec.indexOf(currentCode);
if (posDec < 0)
{
posDec=0;
}
result = result * 16 + posDec;
}
return result;
}

function Calculate()
{
red=HexToDec(document.SelectColor.red.value);
green=HexToDec(document.SelectColor.green.value);
blue=HexToDec(document.SelectColor.blue.value);
calculateColor();
}

function RedP(value)
{
red=red+value;
calculateColor()
}

function RedM(value)
{
red=red-value;
calculateColor()
}

function GreenP(value)
{
green=green+value;
calculateColor()
}

function GreenM(value)
{
green=green-value;
calculateColor()
}

function BlueP(value)
{
blue=blue+value;
calculateColor()
}

function BlueM(value)
{
blue=blue-value;
calculateColor()
}

function SetColor(cell)
{
selectColor = cell.bgColor.substring(1,7).toUpperCase();

redH = selectColor.substring(0,2);
greenH = selectColor.substring(2,4);
blueH = selectColor.substring(4,6);

red = HexToDec(redH);
green = HexToDec(greenH);
blue = HexToDec(blueH);
calculateColor();
}

function OverColor(cell)
{
actualColor = cell.bgColor.toUpperCase();

redH = actualColor.substring(1,3);
greenH = actualColor.substring(3,5);
blueH = actualColor.substring(5,7);

document.all.sampleO.bgColor = cell.bgColor;
document.SelectColor.actualcolor.value = redH + greenH + blueH;
}

function calculateColor()
{
if (red>255)
{
red=255
}
else if (red<0)
{
red=0
}
if (green>255)
{
green=255
}
else if (green<0)
{
green=0
}
if (blue>255)
{
blue=255
}
else if (blue<0)
{
blue=0
}
redH = '00' + red.toString(16).toUpperCase();
redH = redH.substring(redH.length-2,redH.length);
greenH = '00' + green.toString(16).toUpperCase();
greenH= greenH.substring(greenH.length-2,greenH.length);
blueH = '00' + blue.toString(16).toUpperCase();
blueH = blueH.substring(blueH.length-2,blueH.length);

document.SelectColor.red.value = redH;
document.SelectColor.green.value = greenH;
document.SelectColor.blue.value = blueH;
document.SelectColor.fullcolor.value = redH + greenH + blueH;
document.SelectColor.actualcolor.value = redH + greenH + blueH;

document.all.sample.bgColor = redH + greenH + blueH;
document.all.sampleO.bgColor = redH + greenH + blueH;
}

function CreateColorTable()
{

document.write('<TABLE CELLSPACING="0" CELLPADDING="0" BORDER="0">');

for (var l0 = 0; l0 <= (colorstep-1); l0++)
{
for (var l1 = 0; l1 <= (substep-1); l1++)
{
document.write('<TR>');
for (var l2 = 0; l2 <= (colorstep-1); l2++)
{
for (var l3 = 0; l3 <= (substep-1); l3++)
{
red = Math.round(l0 * corrector);
green = Math.round(l2 * corrector);

if (((l0/2)-Math.round(l0/2)) != 0)
{
nicel1 = ((substep-1)-l1)
}
else
{
nicel1 = l1
}

if (((l2/2)-Math.round(l2/2)) != 0)
{
nicel3 = ((substep-1)-l3)
}
else
{
nicel3 = l3
}

blue = Math.round((nicel1+nicel3*substep) * corrector);

color = (((red * 256) + green) * 256) + blue;

colorHex = '000000' + color.toString(16).toUpperCase();
colorHex = colorHex.substring(colorHex.length-6,colorHex.length);

cellCode = ' onMouseDown="SetColor(this);" onMouseOver="OverColor(this)"'
document.write('<TD bgcolor="' + colorHex + '" width="' + cellsize + '" height="' + cellsize + '"' + cellCode + '></TD>');
}
}
document.write('</TR>');
}
}

document.write('</TABLE>');

}

// -->
</SCRIPT>



2.นำโค้ดส่วนนี้ไปใส่ไว้ใน <body>....</body> ครับ

<FORM NAME="SelectColor" ACTION="" ENCTYPE="POST">

<TABLE>
<COLGROUP>
<COL ALIGN="RIGHT">
<COL ALIGN="LEFT">
<COL ALIGN="RIGHT">
<COL ALIGN="LEFT">
</COLGROUP>
<TR HEIGHT="30" VALIGN="CENTER">
<TD>
Red:
<INPUT TYPE="BUTTON" NAME="redM16" VALUE=" - - " onClick="RedM(16);">
<INPUT TYPE="BUTTON" NAME="redM" VALUE=" - " onClick="RedM(1);">
<INPUT TYPE="TEXT" NAME="red" MAXLENGTH="2" SIZE="2" onBlur="Calculate();" VALUE="00">
<INPUT TYPE="BUTTON" NAME="redP" VALUE=" + " onClick="RedP(1);">
<INPUT TYPE="BUTTON" NAME="redP16" VALUE=" + + " onClick="RedP(16);">
</TD>
<TD ID="sample" ROWSPAN="4" WIDTH="120" bgcolor="#e0e0e0">
</TD>
<TD ROWSPAN="4" VALIGN="CENTER">
Actual position:
</TD>
<TD ID="sampleO" ROWSPAN="4" WIDTH="120" bgcolor="#e0e0e0">
</TD>
</TR>
<TR HEIGHT="30" VALIGN="CENTER">
<TD>
Green:
<INPUT TYPE="BUTTON" NAME="greenM16" VALUE=" - - " onClick="GreenM(16);">
<INPUT TYPE="BUTTON" NAME="greenM" VALUE=" - " onClick="GreenM(1);">
<INPUT TYPE="TEXT" NAME="green" MAXLENGTH="2" SIZE="2" onBlur="Calculate();" VALUE="00">
<INPUT TYPE="BUTTON" NAME="greenP" VALUE=" + " onClick="GreenP(1);">
<INPUT TYPE="BUTTON" NAME="greenP16" VALUE=" + + " onClick="GreenP(16);">
</TD>
</TR>
<TR HEIGHT="30" VALIGN="CENTER">
<TD>
Blue:
<INPUT TYPE="BUTTON" NAME="blueM16" VALUE=" - - " onClick="BlueM(16);">
<INPUT TYPE="BUTTON" NAME="blueM" VALUE=" - " onClick="BlueM(1);">
<INPUT TYPE="TEXT" NAME="blue" MAXLENGTH="2" SIZE="2" onBlur="Calculate();" VALUE="00">
<INPUT TYPE="BUTTON" NAME="blueP" VALUE=" + " onClick="BlueP(1);">
<INPUT TYPE="BUTTON" NAME="blueP16" VALUE=" + + " onClick="BlueP(16);">
</TD>
</TR>
<TR>
<TD>
<INPUT TYPE="BUTTON" NAME="calculate();" VALUE="Calculate" onClick="Calculate();">
</TD>
<TD COLSPAN="3">
</TD>
</TR>
<TR>
<TD COLSPAN="2">
Selected color code:
<INPUT TYPE="TEXT" NAME="fullcolor" MAXLENGTH="6" SIZE="6">
</TD>
<TD COLSPAN="2">
Actual color code:
<INPUT TYPE="TEXT" NAME="actualcolor" MAXLENGTH="6" SIZE="6">
</TD>
</TR>
</TABLE>

<BR>
<BR>

<SCRIPT LANGUAGE="Javascript">
<!-- ;
CreateColorTable();
Calculate();
// -->
</SCRIPT>

</FORM>



Credit - Codetukyang

<- Back | Next ->

ThaiMisc.Com : Free Webboard | Free GuestBook | Free Poll | Free Ecard Server | Free Java Chat Room | Advertising | Contact Us
Copyright 1999-2006 Thailand Miscellaneous. Allrights reserved. webmaster@thaimisc.com