<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>BoxMove</title>
<style type='text/css'>
#box {position:absolute; height:50px; width:50px; background-color:#ffff00}
</style>
<script type='text/javascript'>
num=0
function load() {
if (self.innerHeight) {
w=self.innerWidth
h=self.innerHeight
}
else if (document.documentElement && document.documentElement.clientHeight) {
w=document.documentElement.clientWidth
h=document.documentElement.clientHeight
}
else if (document.body) {
w=document.body.clientWidth
h=document.body.clientHeight
}
top=Math.floor(Math.random()*(h-49))
left=Math.floor(Math.random()*(w-49))
atop=Math.floor(Math.random()*(h-top-50))
aleft=Math.floor(Math.random()*(w-left-50))
document.getElementById("box").style.top=top+"px"
document.getElementById("box").style.left=left+"px"
bleft=0
cleft=0
while (aleft>bleft) {
bleft=bleft+cleft+1
cleft=cleft+1
}
cleft=cleft-1
btop=0
ctop=0
while (atop>btop) {
btop=btop+ctop+1
ctop=ctop+1
}
ctop=ctop-1
}
function action() {
if (ctop>0 && cleft>0) {
if (ctop>0) {
ctop-=1
top+=ctop
}
if (cleft>0) {
cleft-=1
left+=cleft
}
document.getElementById("box").style.top=top+"px"
document.getElementById("box").style.left=left+"px"
t=setTimeout("action()",50)
}
else {
num++
if (num==1) ifs=""
else ifs="s"
document.title="BoxMove :: Mouse over box to move it :: The box has now escaped "+num+" time"+ifs+"!"
load()
}
}
window.onload=function(){
document.title+=" :: Mouse over box to move it"
load()
}
</script>
</head>
<body>
<div id='box' onmouseover='action()'></div>
</body>
</html>