Floating Image 1

<HTML>
<HEAD>
<TITLE>Floating Image 1</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 initBounce1(){
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()
randx=posx
randy=posy
moveX()
moveY()
}

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

function randomX(){
randx = Math.round(Math.random()*(W-picWidth))
if( randx > W-picWidth-50){
randomX()
}
}

function moveX(){
if (posx>= randx-step&&posx<=randx+step){
randomX()
}
(posx<randx?posx+=step:posx-=step)
motion()
setTimeout("moveX()", speed)
}

function randomY(){
randy = Math.round(Math.random()*(H-picHeight))
if( randy > H-picHeight ){
randomY()
}
}

function moveY(){
if (posy>=randy-step&&posy<=randy+step){
randomY()
}
(posy<randy?posy+=step:posy-=step)
//motion()
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="initBounce1()" to the opening BODY tag

// -->
</script>

</HEAD>
<BODY onload="initBounce1()">
<h1>Floating Image</h1>
Random Bounce
<DIV ID="moveme1" STYLE="position: absolute; left:10; top:10;color:gold"><img id="mypic" alt="" src="pic01.jpg" ></DIV> 
</BODY>
</HTML>