Snowing Links

Launch wintertime with this unique snowing script and surprise your visitors with this charming DHTML-animation. The script makes your links start snowing on rollover. Easy configuration of colors, number of snowflakes, size and speed.

We have tested the code in IE 7.0, Firefox 2.0.0.4, Opera 9.21, Netscape 9.0b1, Netscape 8.1.3, AOL Explorer 1.5 and Safari 3.0. This script worked well in IE 7.0, Opera 9.21 and AOL Explorer 1.5. In all other platforms the effect will not be seen. It degrades well and you will not receive any error messages.

Depending on your knowledge of HTML and javascripts, this is an easy two (2) part copy and paste code that goes in the section <BODY> section (just before the closing </BODY> tag) of your document and a snipplet of code you insert into every link you want this effect associated with.

// CONFIGURATION STARTS HERE
///////////////////////////////////////////////////////////////////////////

// Set the number of snowflakes (more than 30 - 40 not recommended)
var snowmax=35

// Set the colors for the snow. Add as many colors as you like
var snowcolor=new Array("#aaaacc","#ddddFF","#ccccDD")

// Set the fonts, that create the snowflakes. Add as many fonts as you like
var snowtype=new Array("Arial Black","Arial Narrow","Times","Comic Sans MS")

// Set the letter that creates your snowflake (recommended:*)
var snowletter=" * "

// Set the speed of sinking (recommended values range from 0.3 to 2)
var sinkspeed=0.6

// Set the maximal-size of your snowflaxes
var snowmaxsize=22

// Set the minimal-size of your snowflaxes
var snowminsize=8

// Set the width of the snowing-zone (pixels)
var snowboxwidth=100

///////////////////////////////////////////////////////////////////////////
// CONFIGURATION ENDS HERE
///////////////////////////////////////////////////////////////////////////

// Do not edit below this line

The portion of code located to the left is where you will be making all the reconfigurations. Just play around with it until if fits your site.

Insert the below Color Coded section of code into each and every link you want this effect to be associated with.

onMouseOver="startsnow()" onMouseOut="stopsnow()"

If you want to have the link(s) open in a new browser window, add the attribute of target="_blank" into the link. If you also want to have a hint come up on mouseover, add a title tag* attribute into the link.
title="Place Cursor Here"

* A title tag in a text link is the same as an alt tag in an image link. It gives you a little description of what the link has to offer on mouseover.

This should cover all the reconfigurations that can be made within this effect.

Little Extra Not Included In The Script: The <BODY> section of code is rather large and take up lots of space (4.92 KB (5,048 bytes) in your document. If you would prefer to make this section of code into external.js file as opposed to the bloated overweight code, this is no problem.

The <BODY> section of code has opening and closing script tags. To make it into an external.js file, you need to remove those tags, copy and paste what is left into a notepad, save as snowingLinks.js (or any name you want), upload it to your directory and paste a snipplet of code into the <BODY> section (just before the closing </BODY> tag to call the external file. See below on where and howto for the <BODY> section.

Default

What's Left After You Save As

This is what you will have once you remove the opening and closing script tags and save as. Click on the icon and you will see what you have saved as and need to upload to your directory.
Once you have saved as and uploaded the section of code as an external.js file, now paste the below snipplet of code into the <BODY> section of your document just before the closing </BODY> tag.
Snipplet of code for <BODY> section
<script type="text/javascript" src="Your File Name.js"> </script>

If you would like to see our example of making use of the external .js file in the <BODY> section, grab the below link.
[ External .js File In The <BODY> Section ]

For your Information: We named our external.js file snowingLinks.js. This makes it easy for us to know which is which at any given moment.

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 ]