א"ב בבנית אתרים

...ךשוחב האירקל סנפ

:רוחשה ןולחל טפירקסה

<html>

<head>
<title>(Type a title for your page here)</title>
<STYLE>TD {
FONT-FAMILY: arial,helvetica; FONT-SIZE: 10pt
}
BODY {
BACKGROUND-COLOR: black
}
A {
COLOR: navy; TEXT-DECORATION: none
}
A:hover {
COLOR: red
}
A:visited:unknown {
COLOR: #808080
}
#divExCont {
BACKGROUND-COLOR: white; CLIP: rect(0px 0px 0px 0px); LEFT: -1px; POSITION: absolute; TOP: -1px; layer-background-color: white
}
#divCircle {
POSITION: absolute; VISIBILITY: hidden; WIDTH: 200px; Z-INDEX: 500
}
</STYLE>

<SCRIPT>
/********************************************************************************
This script is made by and copyrighted to Thomas Brattli at www.bratta.com
Visit www.bratta.com/dhtml for more great scripts. This may be used freely as
long as this msg is intact! I'd appriciate any links to my page.
********************************************************************************/

//Easy browsercheck.
var n = (document.layers) ? 1:0;
var ie = (document.all) ? 1:0;

/******************************************************************************
Making the clipobject part
******************************************************************************/
function makeObj(obj,nest,x,y){
nest=(!nest) ? '':'document.'+nest+'.'
this.css=(n) ? eval(nest+'document.'+obj):eval('document.all.'+obj+'.style')
this.clipIt=b_clipIt; this.clip=b_clip;
this.clipTo=b_clipTo;
this.obj = obj + "Object"; eval(this.obj + "=this")
return this
}
//clip part
function b_clipTo(t,r,b,l){
if(n){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+","+r+","+b+","+l+")";
}
}
function b_clipIt(tstop,rstop,bstop,lstop,step,fn){
if(!fn) fn=null
var clipval=new Array()
if(ie) {
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+"')",50)
}else{
this.clipactive=false

eval(fn)
}
}
/******************************************************************************
Initiating the page and the clip objects.
******************************************************************************/
function spotInit(){
pageWidth=(n)?innerWidth:document.body.offsetWidth;

pageHeight=(n)?innerHeight:document.body.offsetHeight;

oExCont=new makeObj('divExCont')
oExCont.clipTo(0,0,0,0)
if(ie){oExCont.css.width=pageWidth+10;oExCont.css.height=pageHeight+10}

oCircle=new makeObj('divCircle','divExCont')
oCircle.css.visibility="visible"
if(n)document.captureEvents(Event.MOUSEMOVE)
document.onmousemove=moveCircle;

}
function moveCircle(e){
x=(n)?e.pageX:event.x;y=(n)?e.pageY:event.y

oExCont.clipTo(y-100,x+100,y+100,x-100)
oCircle.css.left=x-100;oCircle.css.top=y-100

}
//This is being called when someone clicks the circle.
function showCont(){
document.onmousemove=null

oCircle.css.visibility="hidden"
oExCont.clipIt(-20,pageWidth+20,pageHeight+20,-20,20)
}

onload=spotInit;

</SCRIPT>
</head>

<DIV id=divExCont>
<DIV id=divCircle><A
href="#"
onclick="showCont(); if(ie)this.blur()"><IMG border=0 height=241
src="black_circle.gif"
width=234></A> </DIV>
<TABLE border=0 cellPadding=5 cellSpacing=5 width="96%">
<TBODY>
<TR>
<TD width="100%"><FONT face=ARIAL,HELVETICA size=-1><IMG alt=DevHead
border=0 height=35
src="tophead.gif"
width=35><FONT color=#003399 face=ARIAL,HELVETICA size=-1><B>Live Demo:
Dynamic Spotlight</B></FONT>
<P>The main idea of this script is that you have to place all the content
inside the divExCont layer and make the page background black. Then, the
divExCont layer clips (in the size of the tranparent circle) and the
circle moves to the coords of the mouse.
אקסא אקסא אקסאאקסא אקסא אקסאאקסא אקסא אקסאאקסא אקסא אקסאאקסא אקסא אקסאאקסא אקסא אקסאאקסא אקסא אקסאאקסא אקסא אקסא<br>
אקסא אקסא אקסאאקסא אקסא אקסאאקסא אקסא אקסאאקסא אקסא אקסאאקסא אקסא אקסאאקסא אקסא אקסאאקסא אקסא אקסאאקסא אקסא אקסאאקסא אקסא אקסאאקסא אקסא אקסאאקסא אקסא אקסא<br>
אקסא אקסא אקסאאקסא אקסא אקסאאקסא אקסא אקסאאקסא אקסא אקסאאקסא אקסא אקסאאקסא אקסא אקסאאקסא אקסא אקסאאקסא אקסא אקסאאקסא אקסא אקסאאקסא אקסא אקסאאקסא אקסא אקסא<br>
אקסא אקסא אקסאאקסא אקסא אקסאאקסא אקסא אקסאאקסא אקסא אקסאאקסא אקסא אקסאאקסא אקסא אקסאאקסא אקסא אקסאאקסא אקסא אקסאאקסא אקסא אקסאאקסא אקסא אקסאאקסא אקסא אקסאאקסא אקסא אקסא<br>

</body>

</html>