Floating Butterfly - V4.0 - Partial Page Version

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...

//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 HALL
function 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.onresize=function(){
if(ns4)setTimeout("history.go(0)",400);
}
</script>

Then, edit the parameters in the script to make it look/work like you want.