Change Colour on Mouse Move

Friday 15th May, 2009

This is a little background colour changing script I put together a while back using scraps of other scripts available else where online.

It can be extremely overwhelming if used in large areas, but sublte use can add a nice effect.

var IE = document.all?true:false;
if (!IE) document.captureEvents(Event.MOUSEMOVE)
document.onmousemove = getMouseXY;
var tempX = 0;
var tempY = 0;

function getMouseXY(e) {
if (IE) { // grab the x-y pos.s if browser is IE
   tempX = event.clientX + document.body.scrollLeft;
   tempY = event.clientY + document.body.scrollTop;
}
else {  // grab the x-y pos in other browsers
   tempX = e.pageX;
   tempY = e.pageY;
}  
if (tempX < 0){tempX = 0;}
if (tempY < 0){tempY = 0;}  

// limit size of variables (divide by two) & round to whole number
posX = (tempX / 2).toFixed(0);
posY = (tempY / 2).toFixed(0);
posZ = (Math.sqrt(posX) * Math.sqrt(posY)).toFixed(0); // get hypotenues for 3rd variable

// modify each variable for desired color range area - change these equations to fine tune the colour changing effect
posY = (posY / 2).toFixed(0);
posZ = (posZ / 4).toFixed(0);

// limit range to actual RGB values
if (posX < 0) { posX = 0;}
if (posY < 0) { posY = 0;}
if (posZ < 0) { posZ = 0;}
if (posX > 255) { posX = 255;}
if (posY > 255) { posY = 255;}
if (posZ > 255) { posZ = 255;}

// convert RGB values to HEX values - functions not written by me!
function RGBtoHex(posX,posY,posZ)
{return toHex(posX)+toHex(posY)+toHex(posZ)}
function toHex(N) {
 if (N==null) return "00";
 N=parseInt(N); if (N==0 || isNaN(N)) return "00";
 N=Math.max(0,N); N=Math.min(N,255); N=Math.round(N);
 return "0123456789ABCDEF".charAt((N-N%16)/16)
      + "0123456789ABCDEF".charAt(N%16);
}

// Change the background colour of the element with the ID 'bg'
document.getElementById("bg").style.background = '#' + RGBtoHex(posX,posY,posZ);

return true;
}

Simply add this script to your site and include a Div element with the id 'bg' and you're away!

Comments

Please login to comment on this page

back