DHTML JavaScript Peepball 3: Flash Like Picture Animator Effect Code

Peepshow 3: flash like picture animator
The world's most sexy Peepshow is even more sexy now. Due to its popularity we have added several new features. Now it's cross-browser working in IE5x/6x and NN4x/6x. Furthermore, you may insert as many pictures as you like. True copy-and-paste installation. Very easy configuration of picture URLs, position and size of peephole. Please wait a few seconds to see the effect.

Configuration:

Step 1: Open your web page. Paste the following code above the </body> tag of your web page (end of document):

// CREDITS:
// Peepball 3: flashlike picture animator
// by Urs Dudli and Peter Gehrig 
// Copyright (c) 2001 Peter Gehrig and Urs Dudli. All rights reserved.
// Permission given to use the script provided that this notice remains as is.
// Additional scripts can be found at http://www.24fun.com & http://www.designerwiz.com
// info@24fun.com
// 4/9/2002

// IMPORTANT: 
// If you add this script to a script-library or a script-archive 
// you are required to insert a highly visible link to http://www.24fun.com
// right into the webpage where the script
// will be displayed.

/////////////////////////////////////////////////////////////////
// CONFIGURATION STARTS HERE
/////////////////////////////////////////////////////////////////

// The URLs of your images. Add as many URls as you like.
var picurl=new Array ("girl1.jpg", "girl3.jpg","girl4.jpg")

// The horizontal position of your image (distance to the left margin of browser-window, pixels)
var picposition_x=200

// The vertical position of your image (distance to the top margin of browser-window, pixels)
var picposition_y=10

// The size of the peephole (dimension in pixels)
var peepholesize=70

// Standstill of your pictures. Higher means slower.
var picstandstill=60

/////////////////////////////////////////////////////////////////
// CONFIGURATION ENDS HERE
/////////////////////////////////////////////////////////////////

var imgpreload=new Array()
for (i=0;i<=picurl.length-1;i++) {
	imgpreload[i]=new Image()
	imgpreload[i].src=picurl[i]
}
var x,y
var marginbottom
var marginleft
var margintop
var marginright

var cliptop
var clipbottom
var clipleft
var clipright
var clippoints

var imageheight
var imagewidth
									  								   
var tempo=25
var i_picstandstill=0
var i_pic=0
var stepx=12
var stepy=6
var timer

var ns6=document.getElementById&&!document.all?1:0

function setValues() {
	if (document.all) {
		var thisspan=eval("document.all.piccontent")
		imagewidth=thisspan.offsetWidth
		imageheight=thisspan.offsetHeight
		margintop=picposition_y
    	marginleft=picposition_x
    	marginbottom=imageheight-peepholesize+picposition_y
    	marginright=imagewidth-peepholesize+picposition_x
		document.all.ball.style.posLeft=randommaker(imagewidth)+picposition_x
   		document.all.ball.style.posTop=picposition_y
		document.all.piccontent.style.posLeft=picposition_x
   		document.all.piccontent.style.posTop=picposition_y	
    	moveball()
	}
	if (ns6) {
		imagewidth=parseInt(document.getElementById("piccontent").offsetWidth)
		imageheight=parseInt(document.getElementById("piccontent").offsetHeight)
		margintop=picposition_y
    	marginleft=picposition_x
    	marginbottom=imageheight-peepholesize+picposition_y
    	marginright=imagewidth-peepholesize+picposition_x
		document.getElementById('ball').style.left=randommaker(imagewidth)+picposition_x
   		document.getElementById('ball').style.top=picposition_y
		document.getElementById('piccontent').style.left=picposition_x
   		document.getElementById('piccontent').style.top=picposition_y	
    	moveball()
	}
	if (document.layers) {
		var thisspan=eval("document.piccontent.document")
		imagewidth=thisspan.width
		imageheight=thisspan.height
		margintop=picposition_y
    	marginleft=picposition_x
    	marginbottom=imageheight-peepholesize+picposition_y
    	marginright=imagewidth-peepholesize+picposition_x
		document.ball.left=randommaker(imagewidth)+picposition_x
   		document.ball.top=picposition_y
		document.piccontent.left=picposition_x
   		document.piccontent.top=picposition_y	
    	moveball()
	}
}

function randommaker(range) {		
	rand=Math.floor(range*Math.random())
    return rand
}

function moveball() {
	i_picstandstill++
	
	checkposition()
	if (document.all) {	
   		document.all.ball.style.posLeft+=stepx
   		document.all.ball.style.posTop+=stepy
		
		cliptop=document.all.ball.style.posTop-picposition_y
		clipbottom=cliptop+peepholesize
		clipleft=document.all.ball.style.posLeft-picposition_x
		clipright=clipleft+peepholesize
		
		clippoints="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
		document.all.piccontent.style.clip=clippoints
		if (i_picstandstill>picstandstill) {
			i_pic++
			if (i_pic>picurl.length-1)	{i_pic=0}
			piccontent.innerHTML="<img src='"+picurl[i_pic]+"'>"
			i_picstandstill=0
			
		}
    	timer=setTimeout("moveball()",tempo)
	}
	if (ns6) {	
		
   		document.getElementById('ball').style.left=parseInt(document.getElementById('ball').style.left)+stepx
   		document.getElementById('ball').style.top=parseInt(document.getElementById('ball').style.top)+stepy
		
		cliptop=parseInt(document.getElementById('ball').style.top)-picposition_y
		clipbottom=cliptop+peepholesize
		clipleft=parseInt(document.getElementById('ball').style.left)-picposition_x
		clipright=clipleft+peepholesize
		clippoints="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
		document.getElementById('piccontent').style.clip=clippoints
		if (i_picstandstill>picstandstill) {
			i_pic++
			if (i_pic>picurl.length-1)	{i_pic=0}
			document.getElementById('piccontent').innerHTML="<img src='"+picurl[i_pic]+"'>"
			i_picstandstill=0
		}
    	timer=setTimeout("moveball()",tempo)
	}
	if (document.layers) {	
   		document.ball.left+=stepx
   		document.ball.top+=stepy
		
		cliptop=document.ball.top-picposition_y
		clipbottom=cliptop+peepholesize
		clipleft=document.ball.left-picposition_x
		clipright=clipleft+peepholesize
		
		document.piccontent.clip.left=clipleft
        document.piccontent.clip.right=clipright
        document.piccontent.clip.top=cliptop
        document.piccontent.clip.bottom=clipbottom
		
		if (i_picstandstill>picstandstill) {
			i_pic++	
			if (i_pic>picurl.length-1)	{i_pic=0}
			document.piccontent.document.write("<img src='"+picurl[i_pic]+"'>")
			document.piccontent.document.close()
			i_picstandstill=0
		}
    	timer=setTimeout("moveball()",tempo)
	}
}

function checkposition() {
	if (document.all) {
		if (document.all.ball.style.posLeft>=marginright) {
			stepx=stepx*-1
			document.all.ball.style.posLeft-=10
		}
		if (document.all.ball.style.posLeft<=marginleft) {
			stepx=stepx*-1
			document.all.ball.style.posLeft+=10
		}	
		if (document.all.ball.style.posTop>=marginbottom) {
			stepy=stepy*-1
			document.all.ball.style.posTop-=10
		}
		if (document.all.ball.style.posTop<=margintop) {
			stepy=stepy*-1
			document.all.ball.style.posTop+=10
		}
	}
	if (ns6) {
		if (parseInt(document.getElementById('ball').style.left)>=marginright) {
			stepx=stepx*-1
			document.getElementById('ball').style.left=parseInt(document.getElementById('ball').style.left)-10
		}
		if (parseInt(document.getElementById('ball').style.left)<=marginleft) {
			stepx=stepx*-1
			document.getElementById('ball').style.left=parseInt(document.getElementById('ball').style.left)+10
		}	
		if (parseInt(document.getElementById('ball').style.top)>=marginbottom) {
			stepy=stepy*-1
			document.getElementById('ball').style.top=parseInt(document.getElementById('ball').style.top)-10
		}
		if (parseInt(document.getElementById('ball').style.top)<=margintop) {
			stepy=stepy*-1
			document.getElementById('ball').style.top=parseInt(document.getElementById('ball').style.top)+10
		}
	}
	if (document.layers) {
		if (document.ball.left>=marginright) {
			stepx=stepx*-1
			document.ball.left-=10
		}
		if (document.ball.left<=marginleft) {
			stepx=stepx*-1
			document.ball.left+=10
		}	
		if (document.ball.top>=marginbottom) {
			stepy=stepy*-1
			document.ball.top-=10
		}
		if (document.ball.top<=margintop) {
			stepy=stepy*-1
			document.ball.top+=10
		}
	}

}

if (document.all) {
	document.write("<DIV id='piccontent' style='position: absolute; top:-5000px; left:-5000px'><img src='"+picurl[0]+"' border=0></DIV>")
	if (navigator.appVersion.indexOf("Mac") > 0) {
		document.write("<DIV id='ball' style='position:absolute; top:-50px; width:"+peepholesize+"px;height:"+peepholesize+"px'></DIV>")
	}
	else {
		document.write("<DIV id='ball' style='position:absolute; top:-50px; width:"+peepholesize+"px;height:"+peepholesize+"px;background-color:white;filter:alpha(opacity=0,finishopacity=100,style=2,startX=0px,startY=0px,finishX="+peepholesize+"px,finishY="+peepholesize+"px)'></DIV>")
	}
}

else if (ns6) {
	document.write("<DIV id='piccontent' style='position: absolute; top:-5000px; left:-5000px'><img src='"+picurl[0]+"' border=0></DIV>")
	document.write("<DIV id='ball' style='position:absolute; top:-50px; width:"+peepholesize+"px;height:"+peepholesize+"px;'></DIV>")

}

else if (document.layers) {
	document.write("<layer name='piccontent' top=-5000 left=-5000><img src='"+picurl[0]+"' border=0></layer>")
	document.write("<layer name='ball' top=-500 width="+peepholesize+" height="+peepholesize+"></layer>")
	document.close()
	
}

else  {
	document.write("<DIV id='piccontent' style='position:absolute; top:"+picposition_y+"px;left:"+picposition_x+"px'><img src='"+picurl[0]+"' border=0></DIV>")
	document.close()
}

if (document.all || document.layers || ns6) {
	window.onload=setValues
}

// - End of JavaScript - -->
</script>

IMPORTANT: do not paste the code into table-cells or between <div> tags or <span> tags!

Step 2: Open your web page. Go to the top of the script-code and configure the URLs of your pictures, the position of your picture and the size of the peephole.

Step 3: Have fun!

Download 500 free copy-and-paste scripts