Background Color Changer Version 2.0These two codes have two lines. The first line should be copied to the HEAD of your HTML document and the second line should be copied to the BODY of your HTML document.Download both codes
Code1: This coding enables you to change the background color by moving the cursor over each color. <style type="text/css">#btn1{ position:absolute;width:34px;height:22px;left:0px;top:0px}#btn2{ position:absolute;width:34px;height:22px;left:0px;top:0px;visibility:hidden}#table{ position:absolute;width:178px;height:88px;left:0px;top:22px;visibility:hidden}</style><script type="text/javascript">function MM_showHideLayers() {var i,p,v,obj,args=MM_showHideLayers.arguments;for (i=0; i<(args.length-2); i+=3) with (document) if (getElementById && ((obj=getElementById(args[i]))!=null)) { v=args[i+2];if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }obj.visibility=v; }}</script><br> <div id="btn1"><img src="http://akbari694.persiangig.com/image/btn1.png" onclick="MM_showHideLayers('btn1','','hide','table','','show','btn2','','show')" onmousedown="this.src='http://akbari694.persiangig.com/image/btn3.png'" onmouseup="this.src='http://akbari694.persiangig.com/image/btn2.png'" onmouseover="this.src='http://akbari694.persiangig.com/image/btn2.png'" onmouseout="this.src='http://akbari694.persiangig.com/image/btn1.png'"></div><div id="btn2"><img src="http://akbari694.persiangig.com/image/btn1.png" onclick="MM_showHideLayers('btn2','','hide','table','','hide','btn1','','show')" onmousedown="this.src='http://akbari694.persiangig.com/image/btn3.png'" onmouseup="this.src='http://akbari694.persiangig.com/image/btn2.png'" onmouseover="this.src='http://akbari694.persiangig.com/image/btn2.png'" onmouseout="this.src='http://akbari694.persiangig.com/image/btn1.png'"></div><div id="table"><table width="178" height="88" border="0" cellspacing="0" cellpadding="0" background="http://akbari694.persiangig.com/image/BGColor.png"><tr height="7"><td width="7" height="7"></td><td width="11"></td><td width="6"></td><td width="11"></td><td width="6"></td><td width="11"></td><td width="6"></td><td width="11"></td><td width="6"></td><td width="11"></td><td width="6"></td><td width="11"></td><td width="6"></td><td width="11"></td><td width="6"></td><td width="11"></td><td width="6"></td><td width="11"></td><td width="6"></td><td width="11"></td><td width="7"></td></tr><tr height="11"><td height="11"></td><td onmouseover="document.bgColor='#f2f2f2'"></td><td></td><td onmouseover="document.bgColor='#7f7f7f'"></td><td></td><td onmouseover="document.bgColor='#ddd9c3'"></td><td></td><td onmouseover="document.bgColor='#c6d9f0'"></td><td></td><td onmouseover="document.bgColor='#dbe5f1'"></td><td></td><td onmouseover="document.bgColor='#f2dcdb'"></td><td></td><td onmouseover="document.bgColor='#ebf1dd'"></td><td></td><td onmouseover="document.bgColor='#e5e0ec'"></td><td></td><td onmouseover="document.bgColor='#dbeef3'"></td><td></td><td onmouseover="document.bgColor='#fdeada'"></td><td></td></tr><tr height="11"><td height="11"></td><td onmouseover="document.bgColor='#d8d8d8'"></td><td></td><td onmouseover="document.bgColor='#595959'"></td><td></td><td onmouseover="document.bgColor='#c4bd97'"></td><td></td><td onmouseover="document.bgColor='#8db3e2'"></td><td></td><td onmouseover="document.bgColor='#b8cce4'"></td><td></td><td onmouseover="document.bgColor='#e5b9b7'"></td><td></td><td onmouseover="document.bgColor='#d7e3bc'"></td><td></td><td onmouseover="document.bgColor='#ccc1d9'"></td><td></td><td onmouseover="document.bgColor='#b7dde8'"></td><td></td><td onmouseover="document.bgColor='#fbd5b5'"></td><td></td></tr><tr height="11"><td height="11"></td><td onmouseover="document.bgColor='#bfbfbf'"></td><td></td><td onmouseover="document.bgColor='#3f3f3f'"></td><td></td><td onmouseover="document.bgColor='#938953'"></td><td></td><td onmouseover="document.bgColor='#548dd4'"></td><td></td><td onmouseover="document.bgColor='#95b3d7'"></td><td></td><td onmouseover="document.bgColor='#d99694'"></td><td></td><td onmouseover="document.bgColor='#c3d69b'"></td><td></td><td onmouseover="document.bgColor='#b2a2c7'"></td><td></td><td onmouseover="document.bgColor='#92cddc'"></td><td></td><td onmouseover="document.bgColor='#fac08f'"></td><td></td></tr><tr height="11"><td height="11"></td><td onmouseover="document.bgColor='#a5a5a5'"></td><td></td><td onmouseover="document.bgColor='#262626'"></td><td></td><td onmouseover="document.bgColor='#494429'"></td><td></td><td onmouseover="document.bgColor='#17365d'"></td><td></td><td onmouseover="document.bgColor='#366092'"></td><td></td><td onmouseover="document.bgColor='#953734'"></td><td></td><td onmouseover="document.bgColor='#76923c'"></td><td></td><td onmouseover="document.bgColor='#5f497a'"></td><td></td><td onmouseover="document.bgColor='#31859b'"></td><td></td><td onmouseover="document.bgColor='#e36c09'"></td><td></td></tr><tr height="11"><td height="11"></td><td onmouseover="document.bgColor='#7f7f7f'"></td><td></td><td onmouseover="document.bgColor='#0c0c0c'"></td><td></td><td onmouseover="document.bgColor='#1d1b10'"></td><td></td><td onmouseover="document.bgColor='#0f243e'"></td><td></td><td onmouseover="document.bgColor='#244061'"></td><td></td><td onmouseover="document.bgColor='#632423'"></td><td></td><td onmouseover="document.bgColor='#4f6118'"></td><td></td><td onmouseover="document.bgColor='#3f3151'"></td><td></td><td onmouseover="document.bgColor='#205867'"></td><td></td><td onmouseover="document.bgColor='#974806'"></td><td></td></tr><tr height="8"><td height="8"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr height="11"><td height="11"></td><td onmouseover="document.bgColor='#c00000'"></td><td></td><td onmouseover="document.bgColor='#ff0000'"></td><td></td><td onmouseover="document.bgColor='#ffc000'"></td><td></td><td onmouseover="document.bgColor='#ffff00'"></td><td></td><td onmouseover="document.bgColor='#92d050'"></td><td></td><td onmouseover="document.bgColor='#00b050'"></td><td></td><td onmouseover="document.bgColor='#00b0f0'"></td><td></td><td onmouseover="document.bgColor='#0070c0'"></td><td></td><td onmouseover="document.bgColor='#002060'"></td><td></td><td onmouseover="document.bgColor='#7030a0'"></td><td></td></tr><tr height="7"><td height="7"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr></table></div>	Code2: This coding enables you to change the background color by clicking on each colored cell. <style type="text/css">#btn1{ position:absolute;width:34px;height:22px;left:0px;top:0px}#btn2{ position:absolute;width:34px;height:22px;left:0px;top:0px;visibility:hidden}#table{ position:absolute;width:178px;height:88px;left:0px;top:22px;visibility:hidden}</style><script type="text/javascript">function MM_showHideLayers() {var i,p,v,obj,args=MM_showHideLayers.arguments;for (i=0; i<(args.length-2); i+=3) with (document) if (getElementById && ((obj=getElementById(args[i]))!=null)) { v=args[i+2];if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }obj.visibility=v; }}</script><br> <div id="btn1"><img src="http://akbari694.persiangig.com/image/btn1.png" onclick="MM_showHideLayers('btn1','','hide','table','','show','btn2','','show')" onmousedown="this.src='http://akbari694.persiangig.com/image/btn3.png'" onmouseup="this.src='http://akbari694.persiangig.com/image/btn2.png'" onmouseover="this.src='http://akbari694.persiangig.com/image/btn2.png'" onmouseout="this.src='http://akbari694.persiangig.com/image/btn1.png'"></div><div id="btn2"><img src="http://akbari694.persiangig.com/image/btn1.png" onclick="MM_showHideLayers('btn2','','hide','table','','hide','btn1','','show')" onmousedown="this.src='http://akbari694.persiangig.com/image/btn3.png'" onmouseup="this.src='http://akbari694.persiangig.com/image/btn2.png'" onmouseover="this.src='http://akbari694.persiangig.com/image/btn2.png'" onmouseout="this.src='http://akbari694.persiangig.com/image/btn1.png'"></div><div id="table"><table width="178" height="88" border="0" cellspacing="0" cellpadding="0" background="http://akbari694.persiangig.com/image/BGColor.png"><tr height="7"><td width="7" height="7"></td><td width="11"></td><td width="6"></td><td width="11"></td><td width="6"></td><td width="11"></td><td width="6"></td><td width="11"></td><td width="6"></td><td width="11"></td><td width="6"></td><td width="11"></td><td width="6"></td><td width="11"></td><td width="6"></td><td width="11"></td><td width="6"></td><td width="11"></td><td width="6"></td><td width="11"></td><td width="7"></td></tr><tr height="11"><td height="11"></td><td onclick="document.bgColor='#f2f2f2'"></td><td></td><td onclick="document.bgColor='#7f7f7f'"></td><td></td><td onclick="document.bgColor='#ddd9c3'"></td><td></td><td onclick="document.bgColor='#c6d9f0'"></td><td></td><td onclick="document.bgColor='#dbe5f1'"></td><td></td><td onclick="document.bgColor='#f2dcdb'"></td><td></td><td onclick="document.bgColor='#ebf1dd'"></td><td></td><td onclick="document.bgColor='#e5e0ec'"></td><td></td><td onclick="document.bgColor='#dbeef3'"></td><td></td><td onclick="document.bgColor='#fdeada'"></td><td></td></tr><tr height="11"><td height="11"></td><td onclick="document.bgColor='#d8d8d8'"></td><td></td><td onclick="document.bgColor='#595959'"></td><td></td><td onclick="document.bgColor='#c4bd97'"></td><td></td><td onclick="document.bgColor='#8db3e2'"></td><td></td><td onclick="document.bgColor='#b8cce4'"></td><td></td><td onclick="document.bgColor='#e5b9b7'"></td><td></td><td onclick="document.bgColor='#d7e3bc'"></td><td></td><td onclick="document.bgColor='#ccc1d9'"></td><td></td><td onclick="document.bgColor='#b7dde8'"></td><td></td><td onclick="document.bgColor='#fbd5b5'"></td><td></td></tr><tr height="11"><td height="11"></td><td onclick="document.bgColor='#bfbfbf'"></td><td></td><td onclick="document.bgColor='#3f3f3f'"></td><td></td><td onclick="document.bgColor='#938953'"></td><td></td><td onclick="document.bgColor='#548dd4'"></td><td></td><td onclick="document.bgColor='#95b3d7'"></td><td></td><td onclick="document.bgColor='#d99694'"></td><td></td><td onclick="document.bgColor='#c3d69b'"></td><td></td><td onclick="document.bgColor='#b2a2c7'"></td><td></td><td onclick="document.bgColor='#92cddc'"></td><td></td><td onclick="document.bgColor='#fac08f'"></td><td></td></tr><tr height="11"><td height="11"></td><td onclick="document.bgColor='#a5a5a5'"></td><td></td><td onclick="document.bgColor='#262626'"></td><td></td><td onclick="document.bgColor='#494429'"></td><td></td><td onclick="document.bgColor='#17365d'"></td><td></td><td onclick="document.bgColor='#366092'"></td><td></td><td onclick="document.bgColor='#953734'"></td><td></td><td onclick="document.bgColor='#76923c'"></td><td></td><td onclick="document.bgColor='#5f497a'"></td><td></td><td onclick="document.bgColor='#31859b'"></td><td></td><td onclick="document.bgColor='#e36c09'"></td><td></td></tr><tr height="11"><td height="11"></td><td onclick="document.bgColor='#7f7f7f'"></td><td></td><td onclick="document.bgColor='#0c0c0c'"></td><td></td><td onclick="document.bgColor='#1d1b10'"></td><td></td><td onclick="document.bgColor='#0f243e'"></td><td></td><td onclick="document.bgColor='#244061'"></td><td></td><td onclick="document.bgColor='#632423'"></td><td></td><td onclick="document.bgColor='#4f6118'"></td><td></td><td onclick="document.bgColor='#3f3151'"></td><td></td><td onclick="document.bgColor='#205867'"></td><td></td><td onclick="document.bgColor='#974806'"></td><td></td></tr><tr height="8"><td height="8"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr height="11"><td height="11"></td><td onclick="document.bgColor='#c00000'"></td><td></td><td onclick="document.bgColor='#ff0000'"></td><td></td><td onclick="document.bgColor='#ffc000'"></td><td></td><td onclick="document.bgColor='#ffff00'"></td><td></td><td onclick="document.bgColor='#92d050'"></td><td></td><td onclick="document.bgColor='#00b050'"></td><td></td><td onclick="document.bgColor='#00b0f0'"></td><td></td><td onclick="document.bgColor='#0070c0'"></td><td></td><td onclick="document.bgColor='#002060'"></td><td></td><td onclick="document.bgColor='#7030a0'"></td><td></td></tr><tr height="7"><td height="7"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr></table></div>