|
Background Effects >>>
Chase the image across the screen with your mouse, but you will never catch it.
Step 1: Add the below code to the <body> section of your page:
<script
language="javascript"
type="text/javascript">
M
=
(navigator.appName.indexOf("Microsoft")
!=
-1);
N
=
!M;
Vis
=
new
Array();
Vis[0]
=
"hidden";
Vis[1]
=
"visible";
function
GetDiv(divId,
divY,
divX,
divW,
divH,
bCol,
visb,
zInd)
{
bkCol
=
(bCol
!=
"")?((N)?"
bgColor = "+bCol:";background:"+bCol):"";
DivTyp
=
"<DIV"
;
Styl
=
" ID="+divId+"
style = 'position:absolute; top:"+divY+";
left:"+divX+";
width:"+divW+";
height:"+divH+bkCol+";
visibility:"+Vis[visb]+";
z-index:"+zInd+"'>";
document.writeln(DivTyp+Styl);
}
function
EndDiv()
{
document.writeln("</DIV>");
}
GetDiv('Obj',
200,
300,
20,
20,
'',
1,
0);
document.write("<img
src=ball.gif width=30 height=29>");
EndDiv();
if(N)
document.captureEvents(Event.MOUSEMOVE);
document.onmousemove
=
newPos;
function
newPos(e)
{
X
=
(navigator.appName.indexOf("Microsoft")
!=
-1)?event.clientX:e.pageX;
Y
=
(navigator.appName.indexOf("Microsoft")
!=
-1)?event.clientY:e.pageY;
Xo
=
parseInt((M)?document.all.Obj.style.left:document.getElementById('Obj').style.left);
Yo
=
parseInt((M)?document.all.Obj.style.top:document.getElementById('Obj').style.top);
if(Math.abs(X
-
Xo)
<
50
&&
Math.abs(Y
-
Yo)
<
50)
{
if(M)
{
document.all.Obj.style.left
=
Math.floor(Math.random()
*
400);
document.all.Obj.style.top
=
100
+
Math.floor(Math.random()
*
300);
}
if(N)
{
document.getElementById('Obj').style.left
=
Math.floor(Math.random()
*
700);
document.getElementById('Obj').style.top
=
Math.floor(Math.random()
*
500);
}
}
}
</script>
|
Step 2: The script uses an image as part of its interface. You can create your own, or use the below :
(right click image, and select "Save Image As")
Upload it into the same directory as your webpage.
|
