Javascript Background Color Changer

This Javascript function helps you to change background color of the web page or html table.

Features

  • This javascript color changer is used dynamically to change the color of background.
  • You can also change the background color of the html table.
  • You can select color from color palette.

Preview

Preview to change bgcolor of HTML Table
Preview to change background color of the web page Demo

Downloads

Javascript Code
<!-- Script by hscripts.com -->
<script type="text/javascript">
function clicked(gg,rr,bb)
{
var hex='#'+deciToHex(gg)+deciToHex(rr)+deciToHex(bb);
document.body.style.backgroundColor=hex;
document.getElementById('tbprev').style.backgroundColor=hex;
}
function getHexNum(num)
{
ar1=new Array('0','1','2','3','4','5','6','7','8','9','10','11','12','13','14','15');
ar2=new Array('0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F');
if(num>15)
return num;
else
{
red=ar2[num];
return red;
} } function deciToHex(arg) {
res2=999;
args=arg;
while(args>15)
{
arg1=parseInt(args/16);
arg2=args%16;
arg2=getHexNum(arg2);
args=arg1;
if(res2==999)
res2=arg2.toString();
else
res2=arg2.toString()+res2.toString();
}
if(args<16 && res2 != 999)
{
def=getHexNum(args);
res2=def+res2.toString();
}
else if(res2==999)
{
if(args<16)
res2=getHexNum(args);
else
res2=1;
}
if(res2.length==1)
res2="0"+res2;
return res2; } </script>


HTML Code
<style type="text/css"> .tab{border: 1px inset black; background-color: black;} </style>
<form name=colchanger>
<table style="width:100%;" id='tbprev'> <tr><td> <table class=tab cellpadding=0 cellspacing=0> <script type="text/javascript">
for(i=0;i<=256;i+=18)
{
if(i==252) i=255;
document.write("<tr>");
for(j=0;j<=256;j=j+51)
{
for(k=0;k<=256;k=k+51)
{
document.write("<td onclick='clicked("+i+","+j+","+k+")' \
style=\"border: 1px inset black; width:10px; \
height: 3px; font-size: 6px; background-color: rgb("+i+","+j+","+k+");\""+"> </td>");
}
}
document.write("</tr>");
}
</script>
</table>
</td>
</tr>
</table>
</form>

  • Get free version without ©copyright link for just $10/-
  • For customization of this script or any script development, mail to support@hscripts.com

Usage

  • Copy the above code into your file.
  • Use the following function, inorder to view background color change for a table.
  •  function clicked(gg,rr,bb)
     {
    var hex='#'+deciToHex(gg)+deciToHex(rr)+deciToHex(bb);
     document.getElementById('tbprev').style.backgroundColor=hex;
    }
  • Set the table-id as 'tbprev' inorder to change the background color for a table.
  • Use the following function, inorder to view background color change for a page.
  •  function clicked(gg,rr,bb)
     {
    var hex='#'+deciToHex(gg)+deciToHex(rr)+deciToHex(bb);
     document.body.style.backgroundColor=hex;
     }
  • You can use any of the above function to view background-color change.

License

Related Scripts

Free Javascript Scripts


Ask Questions

Ask Question