Floating Butterflies - Tested in IE7.0, Netscape8.1.2, Opera9.10, Firefox2.0.0.2 and AOL Explorer1.5

This is a very unique script for the simple fact it allows to to add or subtract any number of images, either the same or different.

We have tested the code in IE7.0, IE6, IE5.5, Firefox2.0.0.2, Opera9.10, Netscape4.08, Netscape8.1.2 and AOL Explorer1.5. and This script worked well in all platforms tested with one (1) variation observed in Firefox2.0.0.2 and Netscape8.1.2.

In both Firefox2.0.0.2 and Netscape8.1.2 as the image(s) bounce on the right side of the browser window, it creates a horizontal scrollbar momentarily.
This in no way hampers the effect in any way other than the obvious visual distraction.

Depending on your knowledge of HTML and javascripts this is an easy, one (1) part copy and paste code (with minimal reconfigurations) that is positioned at the bottom of your document just above the closing </BODY> tag.

Other than the copy and paste you need to also upload the butterfly image to your directory from the script page if you want to use it. This is the unique part that you can also use any image(s) you want by just substituting them with the default. There is only one place to reconfigure the script so it will work on your page. The default comes with the two animated butterflies (that you can upload from the script site) and we have added an angel and a cupid to the reconfigurations. First we will show the default section and then the reconfiguration section of the script.

Default

//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***********

Reconfigured

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

var floatimages=new Array();
floatimages[0]='Your Complete URL Path/butterfly2.gif ';
floatimages[1]='Your Complete URL Path/butterfly2.gif ';
floatimages[2]='Your Complete URL Path/lftangel.gif ';
floatimages[3]='Your Complete URL Path/cute.gif ';

//*********DO NOT EDIT BELOW***********

If you also will notice we have used the complete URL path to our image instead of just the image name in the default. This is proper HTML coding unless it is within a script and it specifies different. It loads faster because it tells the computer the exact path to find instead of just the image.

One other thing you need to be very careful about is the error people make when reconfiguring scripts. This script makes use of a single apostrophe ' within your URL configurations. Don't make the mistake of adding the quotation mark " instead. You will get errors on your page and will wonder why.

This script accesses the BODY onload event or in this case the (window.onload). If you have another script on your page that does the same, one of them will not run. Grab the below link for information on getting both scripts to work simultaneously.
[ Script Conflict ]

If you would like either the cupid or the angel, just save these and upload them to your editor.
Cupid Angel

Little Extra Not Included In The Script: Since this script is rather large (4.58 KB or 4,693 bytes). You may want to consider making it into an external.js file and call it from an external location. If you need a little refresher on howto, see below:

The <BODY> section of code starts and ends with opening and closing JavaScript tags, See below:

Opens With:
<script language="JavaScript1.2">

<BODY> Section of code goes here
Closes With:
</script>

Remove the opening and closing JavaScript tags.

Copy/cut and paste everything in-between into a notepad and save it as floatingButterflies.js*

The newly created (Saved As) file will look something like this

Upload the newly created floatingButterflies.js into your directory

Paste the below snipplet of code into the <BODY> section of your document (just above the closing </BODY> tag ) to call floatingButterflies.js
<script type="text/javascript" src="floatingButterflies.js"> </script>

If you have uploaded the floatingButterflies.js into a different directory, you will have to change the path of the above to reflect the location.

If changing the path is a little confusing, grab the below link and it is explained in detail.
[ Upload To Different Directory ]

For your Information: If you happen to have this effect on more than one of your pages and decide to change the image(s), with it being called from an external location, you can reconfigure the image(s) right from the external file in your directory only once and the change will be reflected on all the pages you have this effect. This makes changing the image(s) much easier and quicker.

* We named our external.js file floatingButterflies.js. This is just so we know what it is to at any given moment. You can name it anything you want. This is entirely up to you on this.

If you would like to see an example of this effect with the use of the external.js file in the <BODY> section, grab the below link and you are there.
[ Floating Butterflies With External.JS File ]

We hope our tutorial was easy to follow and we covered everything in detail. If you would like to add this effect into your pages, grab the respective below link and you are there. If you have any problems with this or anything else, feel free to consult our [ FAQ ] and if you can't find the answer there, [ contact us ].
[ Get Code Here ] [ Rate This Page ]