spotlight doesn't work in firefox and chrome...
Code:
<html>
<head>
<title>Your title here</title>
<style type="text/css">
<!--
#content{
position:absolute;top:0px;left:0px;text-align:center;
layer-background-color:#ffffff;background:#ffffff;
visibility:hide;visibility:hidden
}
#light{
position:absolute;top:-130px;left:0px;z-index:500
}
</style>
<script language="JavaScript">
pre=new Image();
pre.src="spotlight3.png";
n4=(document.layers)?1:0;
ie=(document.all)?1:0;
d='document.';
a=(n4)?'':'all.';
s=(n4)?'':'.style';
var y,x,c,l,h,w;
enough=0;
(n4)?window.captureEvents(Event.MOUSEMOVE):0;
function Mouse(evnt){
if (enough==0){
y=(n4)?evnt.pageY-pre.height/2:document.body.scrollTop+event.y-pre.height/2;
x=(n4)?evnt.pageX-pre.width/2:document.body.scrollLeft+event.x-pre.width/2;
searchlight();
}
}
(n4)?window.onMouseMove=Mouse:document.onmousemove=Mouse;
function searchlight(){
c=eval(d+a+"content"+s);
l=(n4)?eval(d+a+"content"+s+"."+d+a+"light"+s):eval(d+a+"light"+s);
l.top=y;
l.left=x;
if (n4){
c.clip.top=y;
c.clip.right=l.left+pre.width;
c.clip.bottom=l.top+pre.height;
c.clip.left=x;
}
else c.clip="rect("+y+","+(x+pre.width)+","+(y+pre.height)+","+x+")";
h=(n4)?window.innerHeight:document.body.clientHeight;
w=(n4)?window.innerWidth:document.body.clientWidth;
c.visibility=(n4)?"show":"visible";
c.height=h;
c.width=w;
}
function reveal(){
l.visibility=(n4)?'hide':'hidden';
if (ie)document.body.style.cssText="overflow-x:hidden;overflow-y:scroll";
document.bgColor=(n4)?c.bgColor:c.background;
enough=1;
update();
}
function update(){
if (n4){
c.clip.top=0;c.clip.right=window.innerWidth;c.clip.bottom=window.innerHeight+window.pageYOffset;c.clip.left=0;
}
else
c.clip="rect(0,"+document.body.clientWidth+","+(document.body.clientHeight+document.body.scrollTop)+",0)";
setTimeout('update()',10);
}
document.write("</head><body bgcolor='#000000'><div id='content'>");
//The image map is not necessary but it stops the dotted link line in IE!
document.write("<div id='light'><img src="+pre.src+" useMap='#pic' border='0'>"
+"<map name='pic'><area shape=CIRCLE coords=65,65,63 href='javascript:reveal()'></map></div>");
if (ie) document.body.style.cssText="overflow-x:hidden;overflow-y:hidden";
//-->
</script>
<p><font size="4">This is the spotlight effect. Use it on "special"
pages, preferably containing only plain text and images. Do not use on complex
pages.</font></p>
<p><font size="4">Click anywhere on the page to turn the lights on!</font></p>
<p><font size="4">This is the spotlight effect. Use it on "special"
pages, preferably containing only plain text and images. Do not use on complex
pages.</font></p>
<p><font size="4">Click anywhere on the page to turn the lights on!</font></p>
<p><font size="4">This is the spotlight effect. Use it on "special"
pages, preferably containing only plain text and images. Do not use on complex
pages.</font></p>
<p><font size="4">Click anywhere on the page to turn the lights on!</font></p>
<p> </p>
<p align="center"><img src="http://bytes.com/hallo.gif"></p>
<script language="JavaScript">
<!--
document.write("</div></body></html>");
if (n4||ie)window.onresize=new Function("window.location.reload()");
//-->
</script>
Comment