Help - Search - Members - Calendar
Full Version: RaNdOmLy FlOaTiNg BuTtErFlYs On ScReEn?!?!?!?!
Forums > Resource Center > Webmasters' Corner > Webmasters' Corner Resolved Topics
Jonathank91
I found this really neat code that can make random butterflys floating around on the screen. However, I cannot get it to work!!! I found it in the DHTML site, you can look at the demo here, but after I have followed the directions of uploading the picture online and replacing the urls it *still* did not work. It also says to add the script right before the </body> part in the html. This script is similar, I think, to the snow falling script. Does anyone have any advice?

here is the code:
-----------------------------------------------------------------------------------------------

<script language="JavaScript1.2">

/*
Flying Butterfly script (By BGAudioDr@aol.com)
Modified slightly/ permission granted to Dynamic Drive to feature script in archive
For full source, visit http://www.dynamicdrive.com
*/

var Ymax=8; //MAX # OF PIXEL STEPS IN THE "X" DIRECTION
var Xmax=8; //MAX # OF PIXEL STEPS IN THE "Y" DIRECTION
var Tmax=10000; //MAX # OF MILLISECONDS BETWEEN PARAMETER CHANGES

//FLOATING IMAGE URLS FOR EACH IMAGE. ADD OR DELETE ENTRIES. KEEP ELEMENT NUMERICAL ORDER STARTING WITH "0" !!

var floatimages=new Array();
floatimages[0]='butterfly2.gif';
floatimages[1]='butterfly2.gif';

//*********DO NOT EDIT BELOW***********
var NS4 = (navigator.appName.indexOf("Netscape")>=0 && parseFloat(navigator.appVersion) >= 4 && parseFloat(navigator.appVersion) < 5)? true : false;
var IE4 = (document.all)? true : false;
var NS6 = (parseFloat(navigator.appVersion) >= 5 && navigator.appName.indexOf("Netscape")>=0 )? true: false;
var wind_w, wind_h, t='', IDs=new Array();
for(i=0; i<floatimages.length; i++){
t+=(NS4)?'<layer name="pic'+i+'" visibility="hide" width="10" height="10"><a href="java script:hidebutterfly()">' : '<div id="pic'+i+'" style="position:absolute; visibility:hidden;width:10px; height:10px"><a href="java script:hidebutterfly()">';
t+='<img src="'+floatimages[i]+'" name="p'+i+'" border="0">';
t+=(NS4)? '</a></layer>':'</a></div>';
}
document.write(t);

function moveimage(num){
if(getidleft(num)+IDs[num].W+IDs[num].Xstep >= wind_w+getscrollx())IDs[num].Xdir=false;
if(getidleft(num)-IDs[num].Xstep<=getscrollx())IDs[num].Xdir=true;
if(getidtop(num)+IDs[num].H+IDs[num].Ystep >= wind_h+getscrolly())IDs[num].Ydir=false;
if(getidtop(num)-IDs[num].Ystep<=getscrolly())IDs[num].Ydir=true;
moveidby(num, (IDs[num].Xdir)? IDs[num].Xstep : -IDs[num].Xstep , (IDs[num].Ydir)? IDs[num].Ystep: -IDs[num].Ystep);
}

function getnewprops(num){
IDs[num].Ydir=Math.floor(Math.random()*2)>0;
IDs[num].Xdir=Math.floor(Math.random()*2)>0;
IDs[num].Ystep=Math.ceil(Math.random()*Ymax);
IDs[num].Xstep=Math.ceil(Math.random()*Xmax)
setTimeout('getnewprops('+num+')', Math.floor(Math.random()*Tmax));
}

function getscrollx(){
if(NS4 || NS6)return window.pageXOffset;
if(IE4)return document.body.scrollLeft;
}

function getscrolly(){
if(NS4 || NS6)return window.pageYOffset;
if(IE4)return document.body.scrollTop;
}

function getid(name){
if(NS4)return document.layers[name];
if(IE4)return document.all[name];
if(NS6)return document.getElementById(name);
}

function moveidto(num,x,y){
if(NS4)IDs[num].moveTo(x,y);
if(IE4 || NS6){
IDs[num].style.left=x+'px';
IDs[num].style.top=y+'px';
}}

function getidleft(num){
if(NS4)return IDs[num].left;
if(IE4 || NS6)return parseInt(IDs[num].style.left);
}

function getidtop(num){
if(NS4)return IDs[num].top;
if(IE4 || NS6)return parseInt(IDs[num].style.top);
}

function moveidby(num,dx,dy){
if(NS4)IDs[num].moveBy(dx, dy);
if(IE4 || NS6){
IDs[num].style.left=(getidleft(num)+dx)+'px';
IDs[num].style.top=(getidtop(num)+dy)+'px';
}}

function getwindowwidth(){
if(NS4 || NS6)return window.innerWidth;
if(IE4)return document.body.clientWidth;
}

function getwindowheight(){
if(NS4 || NS6)return window.innerHeight;
if(IE4)return document.body.clientHeight;
}

function init(){
wind_w=getwindowwidth();
wind_h=getwindowheight();
for(i=0; i<floatimages.length; i++){
IDs[i]=getid('pic'+i);
if(NS4){
IDs[i].W=IDs[i].document.images["p"+i].width;
IDs[i].H=IDs[i].document.images["p"+i].height;
}
if(NS6 || IE4){
IDs[i].W=document.images["p"+i].width;
IDs[i].H=document.images["p"+i].height;
}
getnewprops(i);
moveidto(i , Math.floor(Math.random()*(wind_w-IDs[i].W)), Math.floor(Math.random()*(wind_h-IDs[i].H)));
if(NS4)IDs[i].visibility = "show";
if(IE4 || NS6)IDs[i].style.visibility = "visible";
startfly=setInterval('moveimage('+i+')',Math.floor(Math.random()*100)+100);
}}

function hidebutterfly(){
for(i=0; i<floatimages.length; i++){
if (IE4)
eval("document.all.pic"+i+".style.visibility='hidden'")
else if (NS6)
document.getElementById("pic"+i).style.visibility='hidden'
else if (NS4)
eval("document.pic"+i+".visibility='hide'")
clearInterval(startfly)
}
}

if (NS4||NS6||IE4){
window.onload=init;
window.onresize=function(){ wind_w=getwindowwidth(); wind_h=getwindowheight(); }
}

</script>
adrenaline2darush
how do i change the butterflies to something else? i see a lot of butterfly stuff on the html....
Dreamy_illusions
i like but have no clue wut u did wrong...maybe u should y andplay it the code a lil...oo and do u know if it iz possibleto change the color of the butterfies?
california_roxy
did you save the butterfly pic to your comp it says to do that on the page that may be why its not working if you find the url of the butterfly pic and put in something else you can probably figure out how to change the image
xjjajeengx
isnt this the flosting image code only with butterflies? lmao this was posted in scripts.
galilea
no, that code is different. The floating effect (if you actually went to the link) is not the same.

It's because dynamic drive scripts do not work on xanga.

It's pretty sad because a lot of those scripts are really awesome.
Orofaniel
Cool butterflies...but sad it doesn't work on Xanga. I tried a snowflake script by dynamic drive..didn't work either..
d3v1l1ci0us
i think i heard xanga disabled flaoting or falling images, if im mistaking, sorry pinch.gif
DrNick311
Your two possibilities are these:

1: Xanga disabled this type of Javascript.
2: Your butterfly URLs arent working.

CODE
<!-- begin code provided by createblog.com -->

var floatimages=new Array();
floatimages[0]='butterfly2.gif';
floatimages[1]='butterfly2.gif';

<!-- end code provided by createblog.com -->

That's what you have now. It should be something like this:
CODE
<!-- begin code provided by createblog.com -->

var floatimages=new Array();
floatimages[0]='http://www.butterfly.com/butterfly2.gif';
floatimages[1]='http://www.butterfly.com/butterfly2.gif';

<!-- end code provided by createblog.com -->

You need to find exactly which site has the butterflies and link to them.

EDIT:
If you check back at that link you gave in your post it tells you to save the pictures of the butterflies to your computer
QUOTE
Step 2: Download the following image file and upload it into your webpage directory (either by clicking it, or clicking it with the shift key depressed for NS users): Or, ignore this step if you wish to use your own image.



Note: Do NOT link directly to this image on our server
mai_z
i'm pretty sure floating stuff has been disabled by xanga.... a lot of DD scripts don't work on xanga.....which is really unfortunate
juliar
QUOTE
function getnewprops(num){
IDs[num].Ydir=Math.floor(Math.random()*2)>0;
IDs[num].Xdir=Math.floor(Math.random()*2)>0;
IDs[num].Ystep=Math.ceil(Math.random()*Ymax);
IDs[num].Xstep=Math.ceil(Math.random()*Xmax)
settimeout('getnewprops('+num+')', Math.floor(Math.random()*Tmax));

They disableed that.
tofumonzter
Yup. Xanga disabled setTimeOut function.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.