Floating Image 2

Edge Bounce

<HTML>
<HEAD>
<TITLE>Floating Image 2</TITLE>

<style>
body{overflow:hidden}
</style>

<script type="text/javascript">
<!--
step=3
speed=50
nextPic=0;picWidth=0;picHeight=0;swapper=""
myPics=new Array("pic01.jpg","pic02.jpg","pic03.jpg","pic04.jpg","pic05.jpg","pic06.jpg","pic07.jpg","pic08.jpg","pic09.jpg","pic10.jpg") 

function initBounce2(){
W=(!window.innerWidth?document.body.clientWidth:window.innerWidth)
H=(!window.innerHeight?document.body.clientHeight:window.innerHeight)
posx=Math.round(Math.random()*150)
posy=Math.round(Math.random()*150)
swap()
moveX()
moveY()
}

function swap(){
pic=new Image()
pic.src=myPics[nextPic]
picWidth= document.getElementById("mypic").offsetWidth // pic.width+10
picHeight=document.getElementById("mypic").offsetHeight // pic.height+10
if(document.getElementById("moveme1").style.left>W-picWidth||document.getElementById("moveme1").style.top>H-picHeight){
clearTimeout(swapper)
setTimeout("swap()",1000)
return
}
else{
document.getElementById("mypic").src=pic.src
nextPic++
lastPicWidth=picWidth
lastPicHeight=picHeight
}
if(nextPic==myPics.length){
nextPic=0
}
swapper=setTimeout("swap()",10000)
}

a=0
function moveX(){
if(posx>(W-lastPicWidth)){
a=1
}
if(posx<10){
a=0
}

if(a==0){
posx+=step
}
else{
posx-=step
}
setTimeout("moveX()", speed)
motion()
}

b=0
function moveY(){
if(posy>(H-lastPicHeight)){
b=1
}
if(posy<10){
b=0
}

if(b==0){
posy+=step
}
else{
posy-=step
}
setTimeout("moveY()", speed)
}

function motion(){
document.getElementById("moveme1").style.left=posx+"px"
document.getElementById("moveme1").style.top=posy+"px"
//document.getElementById("moveme1").style.visibility="visible"
}

// add onload="initBounce2()" to the opening BODY tag

// -->
</script>
</HEAD>
<BODY onload="initBounce2()">
<h1>Floating Image 2</h1>
Edge Bounce
<DIV ID="moveme1" style="position: absolute; left:10px; top:10px;color:gold"><img id="mypic" alt="" src="pic01.jpg" ></DIV> 
</BODY>
</HTML>