How to put 2 diferent JavaSripts on a same page?

Hi to everyone.
I am new in Web Designing and I’m learning how to use some tricks to make page look better.
Recently I try to combine two scripts that I found on the net and it looks like it wont be possible.
Please can someone help me to solve this problem if it is possible.

Now first script that i found is the script that simulates sparkles when I’m moving mouse pointer over my web page:

As you see, this script can be inserted in the HEAD of web page.

Second script that I would like to use is flying butterfly:

This script I inserted in the BODY tag as it is written on the page where I found source.

When i try to run my page with both of this scripts it shows just butterfly effect, no sparkles.

Can someone please help me and tell me how to correct this.

Thank You in advice.

Both scripts have window.onload functions so the first one is replaced by the second one when you try to run them together. You will need to go through both scripts and rework areas that conflict with each other, such as the onload part of each script.

As AllanP says, both scripts have window.onload functions which collide with each other.
Also, both scripts make use of global variables and happily overwrite each other.
These scripts are both old and full of bad practises (especially the butterfly one), such as using document.write and eval()

Saying that, what would life be without sparkles and butterflies?
I’ve gone through the scripts and made them compatible with each other.

Here’s a demo.

You can just copy and paste the JS and use it your project, (but please use it sparingly).

The dancing guy is an awesome touch :rofl:

Cheers dude.
I love trollface.

Having a bit of fun with this now.

Sparkly butterflies without mouse.
Sparkly butterflies with sparkly mouse.