GUI Components JavaScript DHTML

/*
DO NOT USE A TILED BACKGROUND IMAGE ON THE PAGE USING THIS SCRIPT. 
It causes a lagging effect even on a modern computer.
Paste this style sheet to the head of your page or add 
its contents to an existing one.
EXCEPT for background-color in #content, 
do not alter or add to #content or #light! 



Paste this js link IMMEDIATELY after the opening  tag.

Paste this js link as the very last thing just before the  tags.

Example:


Your content here.........



*/



Spotlight









var noOpe = window.toString();
if  (noOpe != "[object Object]"){  
 if  ((document.getElementById) && window.addEventListener || window.attachEvent){
  document.body.style.backgroundColor = "#000000";
  document.write('<\/div>');
 }
}


//Spot Light http://www.btinternet.com/~kurt.grigg/javascript
var noOpe = window.toString();
if  (noOpe != "[object Object]"){ 
if  ((document.getElementById) && 
window.addEventListener || window.attachEvent){
document.write('<\/div>');
var spotLightImage = new Image(124,124);
spotLightImage.src = "spotlight.gif";
var r,h,w,y,x,spotLightDiv,yourContentDiv;
var d = document;
var domWw = (typeof window.innerWidth == "number");
var domSy = (typeof window.pageYOffset == "number");
if (domWw) r = window;
else{ 
  if (d.documentElement && 
  typeof d.documentElement.clientWidth == "number" && 
  d.documentElement.clientWidth != 0)
  r = d.documentElement;
 else{ 
  if (d.body && 
  typeof d.body.clientWidth == "number")
  r = d.body;
 }
}
function winsize(){
var oh,sy,ow,sx,rh,rw;
var scy = (domSy)?r.pageYOffset:r.scrollTop;
var scx = (domSy)?r.pageXOffset:r.scrollLeft;
if (domWw){
   if (d.documentElement && d.defaultView && 
   typeof d.defaultView.scrollMaxY == "number"){
    oh = d.documentElement.offsetHeight;
    sy = d.defaultView.scrollMaxY;
    ow = d.documentElement.offsetWidth;
    sx = d.defaultView.scrollMaxX;
    rh = oh-sy;
    rw = ow-sx;
   }
   else{
    rh = r.innerHeight;
    rw = r.innerWidth;
   }
  h = rh; 
  w = rw;
  }
 else{
  h = r.clientHeight; 
  w = r.clientWidth;
 }
var con_h,con_w;
if (!window.opera && d.documentElement && 
 typeof d.documentElement.scrollHeight == "number" && 
 d.documentElement.scrollHeight != 0){
  con_h = d.documentElement.scrollHeight;
  con_w = d.documentElement.scrollWidth;
 }
else{ 
 if (d.body && 
 typeof d.body.scrollHeight == "number"){
  con_h = d.body.scrollHeight;
  con_w = d.body.scrollWidth;
 }
}
var r_h = (con_h > h)?con_h:h;
var r_w = (con_w > w)?con_w:w;
yourContentDiv.height = r_h-20 + "px";
yourContentDiv.width = r_w-20 + "px";
}
function mouseControl(needed){
if (window.addEventListener){
 if (needed){
  document.addEventListener("mousemove",mouse,false);
 }
 else{ 
  document.removeEventListener("mousemove",mouse,false);
 }
}  
if (window.attachEvent){
 if (needed){
  document.attachEvent("onmousemove",mouse);
 }
 else{ 
  document.detachEvent("onmousemove",mouse);
 }
}
}
function mouse(e){
var scy = (domSy)?r.pageYOffset:r.scrollTop;
var scx = (domSy)?r.pageXOffset:r.scrollLeft;
if (!e) e = window.event;    
 
if (typeof e.pageY == "number"){
 y = e.pageY - spotLightImage.height/2;
 x = e.pageX - spotLightImage.width/2;
}
else{
 y = e.clientY - spotLightImage.height/2 + scy;
 x = e.clientX - spotLightImage.width/2 + scx;
}
if (y >= (h+scy)-spotLightImage.height-5){ 
 y = (h+scy)-spotLightImage.height-5;
}
if (x >= (w+scx)-spotLightImage.width){ 
 x = (w+scx)-spotLightImage.width;
}
  
yourContentDiv.clip = "rect("+y+"px "+(x+spotLightImage.width)+"px "+(y+spotLightImage.height)+"px "+x+"px)";
yourContentDiv.visibility = "visible";
spotLightDiv.top = y + "px";
spotLightDiv.left = x + "px";
}
function reveal(){
mouseControl(false);
spotLightDiv.visibility = "hidden";
yourContentDiv.clip = "rect(auto auto auto auto)";
}
function init(){
yourContentDiv = document.getElementById("content").style;
spotLightDiv = document.getElementById("light").style;
winsize();
mouseControl(true);
}
function rld(){
window.location.reload();
//Not ideal but far too much messing about other wise!
}
if (window.addEventListener){
 window.addEventListener("load",init,false);
 window.addEventListener("resize",rld,false);
}  
else if (window.attachEvent){
 window.attachEvent("onload",function(){init();});
 window.attachEvent("onresize",function(){rld();});

}//End.
}



           
         
  
spotlight.zip( 3 k)