Full version: jsB@nk » Image » Floating Butterfly
URL: https://www.javascriptbank.com/floating-butterfly-index.html
This JavaScript will create the moving image in a frame. Here in example are the butterflies.
Full version: jsB@nk » Image » Floating Butterfly
URL: https://www.javascriptbank.com/floating-butterfly-index.html
<script language=\"javascript\">var bgpicURL=\'clouds.jpg\'; //YOUR BACKGROUND PICTURE WHICH \"TILES\" TO FIT THE SIZE.var bgpicW=300; //MAX WIDTH OF BACKGROUND IMAGE. WILL TILE TO FIT.var bgpicH=150; //MAX HEIGHT OF BACKGROUND IMAGE. WILL TILE TO FIT.var border=5; //SPECIFIES BORDER SIZE AROUND BACKGROUND IMAGEvar Ymax=8; //MAX # OF PIXEL STEPS IN THE \"X\" DIRECTIONvar Xmax=8; //MAX # OF PIXEL STEPS IN THE \"Y\" DIRECTIONvar Tmax=1000; //MAX # OF MILLISECONDS BETWEEN PARAMETER CHANGES//FLOATING IMAGE URLS FOR EACH IMAGE. ADD OR DELETE ENTRIES.var floatimages=[ \'butterfly.gif\' , \'butterfly.gif\' , \'butterfly.gif\' , \'butterfly.gif\' ];//*********DO NOT EDIT BELOW***********var ns4=(document.layers)?true:false;var w3c=(document.getElementById)?true:false;var ie4=(document.all && !w3c)?true:false;var ie5=(w3c && document.all)?true:false;var ns6=(w3c && navigator.appName.indexOf(\"Netscape\")>=0)?true:false;var pic=new Array();var t=\'<table width=\"\'+bgpicW+\'\" height=\"\'+bgpicH+\'\" cellpadding=\"0\" cellspacing=\"0\" border=\"\'+border+\'\" background=\"\'+bgpicURL+\'\"><tr><td width=\"\'+bgpicW+\'\" height=\"\'+bgpicH+\'\">\';t+=(ns4)? \'<ilayer width=\"\'+bgpicW+\'\" height=\"\'+bgpicH+\'\">\' : \'<div style=\"position:relative; width:\'+bgpicW+\'px; height:\'+bgpicH+\'px;\">\';for(i=0; i<floatimages.length; i++){t+=(ns4)?\'<layer name=\"pic\'+i+\'\" visibility=\"hide\" width=\"10\" height=\"10\">\' : \'<div id=\"pic\'+i+\'\" style=\"position:absolute; visibility:hidden;\">\';t+=\'<img src=\"\'+floatimages[i]+\'\" name=\"p\'+i+\'\">\';t+=(ns4)? \'</layer>\':\'</div>\';}t+=(ns4)? \'</ilayer>\':\'</div>\';t+=\'</td></tr></table>\';document.write(t);function moveimage(num){var p=pic[num];if(getidleft(num)+p.W+p.Xstep>=bgpicW)p.Xdir=false;if(getidleft(num)-p.Xstep<=0)p.Xdir=true;if(getidtop(num)+p.H+p.Ystep>=bgpicH)p.Ydir=false;if(getidtop(num)-p.Ystep<=0)p.Ydir=true;moveidby(num, (p.Xdir)? p.Xstep:-p.Xstep , (p.Ydir)? p.Ystep:-p.Ystep);}function getnewprops(num){var p=pic[num];p.Ydir=Math.floor(Math.random()*2)>0;p.Xdir=Math.floor(Math.random()*2)>0;p.Ystep=Math.ceil(Math.random()*Ymax);p.Xstep=Math.ceil(Math.random()*Xmax);setTimeout(\'getnewprops(\'+num+\')\', Math.floor(Math.random()*Tmax));}function getid(id){if(ns4) return findlayer(id,document);else if(ie4)return document.all[id];else return document.getElementById(id);}// FUNCTION TO FIND NESTED LAYERS IN NS4 BY MIKE HALLfunction findlayer(name,doc){var i,layer;for(i=0;i<doc.layers.length;i++){layer=doc.layers[i];if(layer.name==name)return layer;if(layer.document.layers.length>0)if((layer=findlayer(name,layer.document))!=null)return layer;}return null;}function getidleft(num){if(ns4)return pic[num].left;else return parseInt(pic[num].style.left);}function getidtop(num){if(ns4)return pic[num].top;else return parseInt(pic[num].style.top);}function moveidby(num,dx,dy){if(ns4)pic[num].moveBy(dx, dy);else{pic[num].style.left=(getidleft(num)+dx)+\'px\';pic[num].style.top=(getidtop(num)+dy)+\'px\';}}function moveidto(num,x,y){if(ns4)pic[num].moveTo(x,y);else{pic[num].style.left=x+\'px\';pic[num].style.top=y+\'px\';}}window.onload=function(){for(i=0; i<floatimages.length;i++){pic[i]=getid(\'pic\'+i);if(ns4){pic[i].W=pic[i].document.images[\"p\"+i].width;pic[i].H=pic[i].document.images[\"p\"+i].height;}else{pic[i].W=document.images[\"p\"+i].width;pic[i].H=document.images[\"p\"+i].height;}getnewprops(i);moveidto(i, Math.floor(Math.random()*(bgpicW-pic[i].W)), Math.floor(Math.random()*(bgpicH-pic[i].H)));if(ns4)pic[i].visibility=\"show\";else pic[i].style.visibility=\"visible\";setInterval(\'moveimage(\'+i+\')\',Math.floor(Math.random()*100)+100);}}window.onresize=function(){if(ns4)setTimeout(\"history.go(0)\",400);}</script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->http://javascriptbank.com/javascript/image/Floating_Butterfly/clouds.jpghttp://javascriptbank.com/javascript/image/Floating_Butterfly/butterfly.gif