Butterfly - Partial Page Version
This version allows you to have the images float in a user-defined size/place.
Copy and paste the following javascript code wherever you want the butterfly "window" to appear in your page:
Select all...
<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 IMAGE var Ymax=8; //MAX # OF PIXEL STEPS IN THE "X" DIRECTION var Xmax=8; //MAX # OF PIXEL STEPS IN THE "Y" DIRECTION var 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='
'; t+=(ns4)? '
' : '
'; for(i=0; i
' : '
'; t+='
'; t+=(ns4)? '':'
'; } t+=(ns4)? '':'
'; t+='
'; 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 HALL function findlayer(name,doc){ var i,layer; for(i=0;i
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
Then, edit the parameters in the script to make it look/work like you want.