DHTML JavaScript Peepball 2: Flash Like Picture Animator Effect

DHTML JavaScript Peepball 2: Flash Like Picture Animator Effect
Peepball is a new simple script to present your pictures in a unique and sexy way. True copy and paste installation. Very easy configuration of picture URL, picture position and size of peephole. Made for IE5x and NN4x. NN6 displays the picture without special effect. 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 2: 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.fabulant.com & http://www.designerwiz.com
// fabulant01@hotmail.com
// 10/8/2001

// 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.fabulant.com
// right into the webpage where the script
// will be displayed.

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

// The URL of your image
var picurl="test.jpg"

// The horizontal position of your image (distance to the left margin, pixels)
var picposition_x=0

// The vertical position of your image (distance to the top margin, pixels)
var picposition_y=0

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

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

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 stepx=12
var stepy=6
var timer

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)
   		document.all.ball.style.posTop=picposition_y
		document.all.piccontent.style.posLeft=picposition_x
   		document.all.piccontent.style.posTop=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)
   		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() {
	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
    	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

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 (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+"' 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 (document.layers) {
	document.write("<layer name='piccontent' top=-5000 left=-5000><img src='"+picurl+"' 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+"' border=0></DIV>")
	document.close()
}

if (document.all || document.layers) {
	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 URL of your picture, the position of your picture and the size of the peephole.

Step 3: Have fun!

Download 500 free copy-and-paste scripts

Like this code snippet? Why not share it with others by copying this page URL: