« »

Hover over the wheel to view colors. This script displays colorful wheel on the web page, visitors move mouse on it to get color code. This script's submitted by Draco Merest.

Label: BIAB Colorwheel 2.5

Report to us error of this JavaScript

Demo
Enlarge
Reload
New window

Code
Files
CSS
JavaScript
HTML
Print

Copy All x2

<style type="text/css">
   #imgdiv { position:relative; }
   #clrdiv { position:relative; background-color:white; }
  </style>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Copy All x2

<script langauge="javascript">
/*
   Draco Merest
   biab@iinet.net.au
*/

patNum=0;
a=new Array(255,0,0);
d=new Array()
d[0]=new Array(0,0,1);
d[1]=new Array(-1,0,0);
d[2]=new Array(0,1,0);
d[3]=new Array(0,0,-1);
d[4]=new Array(1,0,0);
d[5]=new Array(0,-1,0);

c=new Array();
for(i=0;i<6;i++)
 for(k=0;k<360/6;k++)
  for(j=0;j<3;j++)
   a[j]=a[j]+((255*6/360)*d[i][j])

sum=0;
s=new Array(60);
for(i=0;i<2;i++)
 for(j=1;j<61;j++)
  if(i==0)
   { s[j]=new Array(0,0,Math.sin(j*90/60*0.01745329));
     sum+=s[j][2]; }
  else
   { s[j][2]=s[j][2]*255/sum; };

clr=new Array();
for(i=0;i<6;i++)
 for(k=60;k>0;k--)
  { clr[clr.length]=new Array(3);
    s[k][0]=s[61-k][2]
    for(j=0;j<3;j++)
     { a[j]+=s[k][d[i][j]+1]*d[i][j];
       if(k==1)
        a[j]=(a[j]>128)?255:0;
       clr[clr.length-1][j]=a[j];
     };
  };

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

quad=new Array(-180,360,180,0);

function moved(e)
 { if(document.layers)
    { sx=e.layerY-256;
      sy=e.layerX-256;
    }
   else if(document.all)
    { sx=event.offsetY-256;
      sy=event.offsetX-256;
    }
   else if (document.getElementById)
    { sy = (e.pageX - document.getElementById("imgdiv").offsetLeft)-256;
      sx = (e.pageY - document.getElementById("imgdiv").offsetTop)-256;
    };
   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));
   r=Math.sqrt((xa*xa)+(ya*ya));
   if(patNum==1) deg+=Math.floor(r);
window.status=deg;
   c=new Array(3);
   hc="";
   for(i=0;i<3;i++)
    { c[i]=Math.floor(clr[deg%360][2-i]*r/128);
      if(r>128 && c[i]<255)
       { nc=(r-128)/128*255;
         if(c[i]<nc)
          c[i]=nc;
       };
      if(c[i]>255)
       c[i]=255;
      hc+=((c[i]<16)?"0":"")+Math.floor(c[i]).toString(16);
    };
   if(document.layers)
    { document.layers['clrdiv'].bgColor="#"+hc; }
   else
    { document.getElementById("clrdiv").style.backgroundColor="#"+hc; };
   document.frm.txt.value="#"+hc;
   document.frm.hid.value="#"+hc;
   return false;
 };
function setcolor()
 { document.frm.sel.value=document.frm.hid.value; };
function change()
 { patNum=1-patNum;
   document.getElementById("theImg").src="image"+patNum+".jpg";
 };

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

Copy All x2

<body onload="capture();"><table border=0 cellpadding=0 cellspacing=0>
 <tr><td><div id=imgdiv><a href="javascript:void(0);" onclick="setcolor(); return false;">
  <img src="image0.jpg" width=512 height=512 border=0 id="theImg"></a></div></td></tr>
 <tr><td align="center"><div id=clrdiv>262144 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="button" value="Change" onclick="change();">
 <input type="hidden" name="hid"></td></form></td></tr>
 <tr><td>
 	<a href="index2.php" target=_blank>Use another wheel</a><br>
 	<a href="../javascript/background---color-circling-picker-javascript.html">Original Version 2 Revision 5</a>
	</td></tr>
</table>
</body>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->