Peepball - JavaScript Made Easy: Free JavaScripts Tutorials Example Code

WebSiteMadeEasy.net

|

FontsMadeEasy.com

|

RankChecker.net

Submit your Script

Google Search:

Learn Java Script Today

|

Over 5000 Free Fonts

|

|

Javascript Forum

|

Other Javascript Resources

|

JavaScript Basics

Inserting Javascript

Complete Tutorial

Advance DHTML Tutorial


Peepball

Peepball is a new way to present all kind of pictures. The script combines several DHTML-tricks: dynamic movement, filter-effects, clipping-methods, CSS, screen-size-calculations. Yet the effect is pure fun.


Insert into <HEAD>
<STYLE TYPE="text/css"> <!-- A { font-family: Arial,Helvetica,sans-serif; color: #0000FF;text-decoration:underline} A:visited { font-family: Arial,Helvetica,sans-serif; color: #0000FF} A:hover { font-family: Arial,Helvetica,sans-serif; color: #0000FF} --> </STYLE> <script> <!-- Beginning of JavaScript - // PeepBall // Copyright Peter Gehrig and Urs Dudli // http://www.24fun.ch // info@24fun.ch // 12/2/1999 // All rights reserved var x,y var marginbottom var marginleft=0 var margintop=0 var marginright var cliptop var clipbottom var clipleft var clipright var clippoints var ballheight=100 var ballwidth=100 var imageheight=280 var imagewidth=580 // less is faster var tempo=25 // horizontal move (pixels) within time unit var stepx=12 // vertical move (pixels) within time unit var stepy=6 var timer // check the width and the height of the document // gets the starting position of the ball by random function setValues() { if (document.all) { marginbottom = imageheight-ballheight marginright = imagewidth-ballwidth document.all.ball.style.posLeft=randommaker(400) document.all.ball.style.posTop=0 document.all.textcontent.style.posLeft=0 document.all.textcontent.style.posTop=0 document.all.ball.style.filter="alpha(opacity=0,finishopacity=100,style=2,startX=0px,startY=0px,finishX=100px,finishY=100px)" moveball() } } // randomfunction function randommaker(range) { rand=Math.floor(rangeMath.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 clipbottom=cliptop+ballheight clipleft=document.all.ball.style.posLeft clipright=clipleft+ballwidth clippoints="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")" document.all.textcontent.style.clip=clippoints 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 } } } // - End of JavaScript - --> </script>

Insert into <BODY>
<body bgcolor=#FFFFFF onLoad="setValues()"> <DIV id="textcontent" style="position: absolute; top:-5000px; left:-5000px"><img src="zeta0212.jpg" border="0"></DIV> <DIV id="ball" style="position:absolute; top:-50px; width:100px;height:100px;background-color:white;"></DIV>

Other Options