Spot light
/*
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!
<style type="text/css">
<!--
body{
background-image : none ! important;
}
#content{
background-color : #ffffff;
position : absolute;
top : 0px;
left : 0px;
padding : 10px;
visibility : hidden;
}
#light{
position : absolute;
top : 0px;
left : 0px;
overflow : hidden;
z-index : 500;
}
//-->
</style>
Paste this js link IMMEDIATELY after the opening <body> tag.
<script type="text/javascript" src="spotlight_part_1.js"></script>
Paste this js link as the very last thing just before the </body></html> tags.
<script type="text/javascript" src="spotlight_part_2.js"></script>
Example:
<body>
<script type="text/javascript" src="spotlight_part_1.js"></script>
Your content here.........
<script type="text/javascript" src="spotlight_part_2.js"></script>
</body>
</html>
*/
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Spotlight</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="content-script-type" content="text/javascript">
<meta http-equiv="content-style-type" content="text/css">
<style type="text/css">
<!--
body{
background-image : none ! important;
}
#content{
background-color : #ffffff;
position : absolute;
top : 0px;
left : 0px;
padding : 10px;
visibility : hidden;
}
#light{
position : absolute;
top : 0px;
left : 0px;
overflow : hidden;
z-index : 500;
}
//-->
</style>
</head>
<body>
<script type="text/javascript">
var noOpe = window.toString();
if (noOpe != "[object Object]"){
if ((document.getElementById) && window.addEventListener || window.attachEvent){
document.body.style.backgroundColor = "#000000";
document.write('<div id="content"><div id="light"><img src="spotlight.gif" alt="" onclick="reveal()"/><\/div>');
}
}
</script>
<script type="text/javascript">
//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.
}
</script>
</body>
</html>
spotlight.zip( 3 k)Related examples in the same category