This spotlight script was one of the effects in the bratta dhtml demo.

Instructions
Instructions in source-code.

Note: clipping is used a lot in this script, and early versions of Netscape 6 do not implement that very well yet, so some rendering glitches may occur.

Spotlight demo example 

Source
You have two options on getting the source to this script.

1. Copy the source from the textboxes below and place the code inside the body textbox in the body of your document and the code in the head textbox in the head of your document. If there are images to the script right click on the images below the textboxes and choose "save as" to get them.

2. Download the sourcecode and images in a zip file

Head

<sup><style type="text/css">
#divExCont {position:absolute; left:0px; top:0px; clip:rect(0px 0px 0px 0px); layer-background-color:#ffffff; background-color:#ffffff;}
#divCircle {position:absolute; z-index:500; visibility:hidden; width:170px;}
body       {background-color:#000000; overflow:hidden;}
</style>


<script language="JavaScript" type="text/javascript">
/**********************************************************************************  
Spotlight
*   Copyright (C) 2001 Thomas Brattli
*   This script was released at DHTMLCentral.com
*   Visit for more great scripts!
*   This may be used and changed freely as long as this msg is intact!
*   We will also appreciate any links you could give us.
*
*   Made by Thomas Brattli
*
*   Script date: 09/04/2001 (keep this date to check versions)
*********************************************************************************/
function lib_bwcheck(){ //Browsercheck (needed)
    this.ver=navigator.appVersion
    this.agent=navigator.userAgent
    this.dom=document.getElementById?1:0
    this.opera5=(navigator.userAgent.indexOf("Opera")>-1 && document.getElementById)?1:0
    this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom && !this.opera5)?1:0;
    this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom && !this.opera5)?1:0;
    this.ie4=(document.all && !this.dom && !this.opera5)?1:0;
    this.ie=this.ie4||this.ie5||this.ie6
    this.mac=this.agent.indexOf("Mac")>-1
    this.ns6=(this.dom && parseInt(this.ver) >= 5) ?1:0;
    this.ns4=(document.layers && !this.dom)?1:0;
    this.bw=(this.ie6 || this.ie5 || this.ie4 || this.ns4 || this.ns6 || this.opera5)
    return this
}
var bw=lib_bwcheck()

/*** Variables to set ***/
sCircleWidth = 168    //The width the script will clip to
sCircleHeight = 168    //The height the script will clip to
sStarty = 200        //Where do you want it to initially start
sStartx = 200        //Where do you want it to initially start
clipSpeed = 20        //Number of pixels for each step in the animation.

/******************************************************************************
Making the clipobject part
******************************************************************************/   
function makeObj(obj, nest, x, y){
    nest = (!nest) ? "":'document.'+nest+'.';                                       
       this.css = bw.dom? document.getElementById(obj).style:bw.ie4?document.all[obj].style:bw.ns4?eval(nest+"document.layers." +obj):0;       
    this.evnt = bw.dom? document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?eval(nest+"document.layers." +obj):0;                                                   
    this.clip = b_clip;
    this.clipIt = b_clipIt;
    this.clipTo = b_clipTo;
    this.obj = obj + "Object";
    eval(this.obj + "=this");
    return this;
}

// A unit of measure that will be added when setting the position or size of a layer.
var px = bw.ns4||window.opera?"":"px";

//clip part
function b_clipTo(t,r,b,l){
    if (bw.ns4){
        this.css.clip.top=t;this.css.clip.right=r;this.css.clip.bottom=b;this.css.clip.left=l;
    }
    else {
        this.css.clip="rect("+t+"px "+r+"px "+b+"px "+l+"px)";
    }
}
function b_clipIt(tstop,rstop,bstop,lstop,step,fn){
    if (!fn) fn = null
    var clipval = new Array()
    if (bw.dom || bw.ie4) {
        clipval = this.css.clip
        clipval = clipval.slice(5,clipval.length-1);
        clipval = clipval.split(' ')
        for (var i=0; i<4; i++) clipval[i] = parseInt(clipval[i])
    }
    else {
        clipval[0] = this.css.clip.top
        clipval[1] = this.css.clip.right
        clipval[2] = this.css.clip.bottom
        clipval[3] = this.css.clip.left
    }
    totantstep = Math.max(Math.max(Math.abs((tstop-clipval[0])/step),Math.abs((rstop-clipval[1])/step)),
        Math.max(Math.abs((bstop-clipval[2])/step),Math.abs((lstop-clipval[3])/step)))
    if (!this.clipactive)
        this.clip(clipval[0],clipval[1],clipval[2],clipval[3],(tstop-clipval[0])/totantstep,
            (rstop-clipval[1])/totantstep,(bstop-clipval[2])/totantstep,
                (lstop-clipval[3])/totantstep,totantstep,0, fn)
}
function b_clip(tcurr,rcurr,bcurr,lcurr,tperstep,rperstep,bperstep,lperstep,totantstep,antstep, fn){
    tcurr=tcurr+tperstep; rcurr=rcurr+rperstep
    bcurr=bcurr+bperstep; lcurr=lcurr+lperstep
    this.clipTo(tcurr,rcurr,bcurr,lcurr)
    if(antstep<totantstep){
        this.clipactive=true
        antstep++
        setTimeout(this.obj+".clip("+tcurr+","+rcurr+","+bcurr+","+lcurr+","+tperstep+","
            +rperstep+","+bperstep+","+lperstep+","+totantstep+","+antstep+",'"+fn+"')", 40)   
    }else{
        this.clipactive = false
        eval(fn)
    }
}
/******************************************************************************
Initiating the page and the clip objects.
******************************************************************************/   
function spotInit(){
    pageWidth = (bw.ns4 || bw.ns6)?innerWidth:document.body.clientWidth;
    pageHeight = (bw.ns4 || bw.ns6)?innerHeight:document.body.clientHeight;
    oExCont = new makeObj('divExCont')
    if (bw.dom || bw.ie4){
        oExCont.css.width = pageWidth+px
        oExCont.css.height = pageHeight+px
    }
    oCircle = new makeObj('divCircle','divExCont')
    oExCont.clipTo(sStarty,sStartx+sCircleWidth,sStarty+sCircleHeight,sStartx)
    oCircle.css.left = sStartx+px
    oCircle.css.top = sStarty+px
    oCircle.css.visibility = "visible"
    if (bw.ns4)document.captureEvents(Event.MOUSEMOVE)
    document.onmousemove = moveCircle;
}
function moveCircle(e){
    x = (bw.ns4 || bw.ns6)?e.pageX:event.x
    y = (bw.ns4 || bw.ns6)?e.pageY:event.y
    oExCont.clipTo(y-sCircleHeight/2, x+sCircleWidth/2, y+sCircleHeight/2, x-sCircleWidth/2)
    oCircle.css.left = x - sCircleWidth/2 + px
    oCircle.css.top = y - sCircleHeight/2 + px
}
//This is being called when someone clicks the circle.
function showCont(){
    document.onmousemove = null
    oCircle.css.visibility = "hidden"
    oCircle.css.left = 0+px
    oCircle.css.top = 0+px
    oExCont.clipIt(-clipSpeed, pageWidth+clipSpeed, pageHeight+clipSpeed, -clipSpeed, clipSpeed, 'oExCont.css.overflow="auto"')
}

if (bw.bw) onload = spotInit
</script></sup>
        

Body

^{<div id="divExCont">
<div id="divCircle"><a href="#" onclick="showCont(); return false" onfocus="if(this.blur)this.blur()"><img src="spotlight_circle.gif" width="170" height="170" alt="" border="0"></a></div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<font face="arial,helvetica,sans-serif" size="2" color="#000000">Your regular body content goes here.</font>
</div>}