Cacher is the code snippet organizer for pro developers

{"view":"split-vertical","fontsize":"90","seethrough":"","prefixfree":"1","page":"javascript"}

var holder = document.getElementById("holder");

var sizeSquares = 100;
var numberSquares = 8;

for (var i = 0; i < numberSquares; i++){
      for (var j = 0; j < numberSquares; j++){
        var div = document.createElement("div");
        div.setAttribute("id","x"+i+"y"+j);
        div.style.backgroundColor = "#ccc";
        div.style.width = sizeSquares+"px";
        div.style.height = sizeSquares+"px";
	      holder.appendChild(div);
        div.style.position = "absolute";
        div.style.left = (i*sizeSquares)+"px";
        div.style.top = (j*sizeSquares)+"px";
    }	
  }

//document.onmousemove = function (e) {

holder.onmousemove = function (e) {

	normX = e.clientX/holder.width;
	normY = e.clientY/holder.height;
	red = Math.floor(normX * 255);
	green = Math.floor(normY * 255);
  
  for (var i = 0; i < numberSquares; i++){
      for (var j = 0; j < numberSquares; j++){
        var div = document.getElementById("x"+i+"y"+j);
	      blue = Math.floor(i*128/numberSquares +  j*128/numberSquares);
 //       div.style.backgrounColor = "rgb("+ red +", "+green+","+ blue +")";
        div.style.backgroundColor = "rgb("128,0,0)";	
    }	
  }
}

<div style="width:100%; height:100%;">
<div id="wrapper" style="position:relative; left:50%; top:50%; width:800px; height:800px;">
<div id="holder" style="position: relative;  background-color:#000; left:-400px; top:-400px; width:800px; height:800px; "></div>
</div>
</div>

/**
 * 2x Rez, Math.floor keeps squares form fringing 
 */

background: #333;
margin:0;
padding:0;
overflow:hidden;