Full version: jsB@nk » Image » PicturePong
URL: https://www.javascriptbank.com/picturepong.html
PicturePong transforms your favourite picture into a snake wriggling its way through your your webpage.
Full version: jsB@nk » Image » PicturePong
URL: https://www.javascriptbank.com/picturepong.html
<script><!-- Beginning of JavaScript -// PicturePong// URL of your image. Attention: big images will slow down the script!var your_image="testimage86.gif"// speedvar tempo=40// average horizontal distance between the imagesvar stepx=20// average vertical distance between the imagesvar stepy=20// number of imagesvar numberofimages=12// do not edit the variables belowvar imgpreload=new Image()imgpreload.src=your_imagevar x,yvar marginbottomvar marginleft=0var margintop=0var marginrightvar timervar xpos=new Array()var ypos=new Array()var spancontent=new Array()for (i=0; i<=numberofimages;i++) { xpos[i]=0ypos[i]=0}for (i=0;i<=numberofimages;i++) {spancontent[i]="<img src='"+your_image+"'>"}function setValues() { var firsttimer= setTimeout("setValues2()",2000)}function setValues2() {if (document.all) { marginbottom=document.body.clientHeight-5 marginright=document.body.clientWidth-5for (i=0;i<=numberofimages;i++) { var thisspan = eval("document.all.span"+i) thisspan.innerHTML=spancontent[i]var thisspan = eval("document.all.span"+(i)+".style") thisspan.posLeft=0 thisspan.postop=0 }moveball()}if (document.layers) { marginbottom=window.innerHeight-5 marginright=window.innerWidth-5for (i=0;i<=numberofimages;i++) { var thisspan=eval("document.span"+i+".document") thisspan.write(spancontent[i])thisspan.close()var thisspan=eval("document.span"+i) thisspan.left=0 thisspan.top=0 } moveball()}}function randommaker(range) {rand=Math.floor(range*Math.random()) return rand}function moveball() {if (document.all) {checkposition() makesnake() document.all.span0.style.posTop+=stepy timer=setTimeout("moveball()",tempo)}if (document.layers) {checkposition() makesnake() document.span0.top+=stepy timer=setTimeout("moveball()",tempo)}}function makesnake() {for (i=numberofimages; i>=1; i--) { xpos[i]=xpos[i-1]ypos[i]=ypos[i-1] }if (document.all) {xpos[0]=document.all.span0.style.posLeft+stepxypos[0]=document.all.span0.style.posTop+stepyfor (i=0;i<=numberofimages;i++) { var thisspan=eval("document.all.span"+(i)+".style") thisspan.posLeft=xpos[i]thisspan.posTop=ypos[i] }}if (document.layers) {xpos[0]=document.span0.left+stepxypos[0]=document.span0.top+stepyfor (i=0;i<=numberofimages;i++) { var thisspan = eval("document.span"+i) thisspan.left=xpos[i]thisspan.top=ypos[i] }}}function checkposition() {if (document.all) {if (document.all.span0.style.posLeft>marginright) {stepx=(stepx+randommaker(2))*-1document.all.span0.style.posLeft-=1}if (document.all.span0.style.posLeft<marginleft) {stepx=(stepx+randommaker(2))*-1document.all.span0.style.posLeft+=1}if (document.all.span0.style.posTop>marginbottom) {stepy=(stepy+randommaker(2))*-1document.all.span0.style.posTop-=1}if (document.all.span0.style.posTop<margintop) {stepy=(stepy+randommaker(2))*-1document.all.span0.style.posTop+=1}}if (document.layers) {if (document.span0.left>=marginright) {stepx=(stepx+randommaker(2))*-1document.span0.left-=10}if (document.span0.left<=marginleft) {stepx=(stepx+randommaker(2))*-1document.span0.left+=10}if (document.span0.top>=marginbottom) {stepy=(stepy+randommaker(2))*-1document.span0.top-=10}if (document.span0.top<=margintop) {stepy=(stepy+randommaker(2))*-1document.span0.top+=10}}}// - End of JavaScript - --></script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><body id="thisbody" onLoad="setValues()" style="width:100%;overflow-x:hidden;overflow-y:hidden"><script><!-- Beginning of JavaScript -for (i=0;i<=numberofimages;i++) { document.write("<span id='span"+i+"' style='position:absolute'></span>") document.close()}// - End of JavaScript - --></script></body><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->