Using JS script for "raining images". Can't seem to hide pre-loaded image
<p>I am trying to hide an image in a script pre-loading on the page.</p>

<p>Below script makes images "rain" down the screen onClick. It functions well, but it displays the pre-loaded image itself on the page before the button is clicked. I'm trying to hide the image until the button is pressed.</p>

<p>If anyone has any insight on how to hide the image until the function dispenseMittens() runs, I'd be eternally grateful :)</p>

<p>Thanks!</p>

<pre><code>&lt;script language="javascript"&gt;
var pictureSrc = 'mitten.gif'; //the location of the mittens
var pictureWidth = 40;            //the width of the mittens
var pictureHeight = 46;           //the height of the  mittens
var numFlakes = 10;               //the number of  mittens
var downSpeed = 0.01;          
var lrFlakes = 10;         
var EmergencyMittens = false; 

//safety checks. Browsers will hang if this is wrong. If other values are wrong there will just be errors
if( typeof( numFlakes ) != 'number' || Math.round( numFlakes ) != numFlakes || numFlakes &lt; 1 ) { numFlakes = 10; }

//draw the snowflakes
for( var x = 0; x &lt; numFlakes; x++ ) {
    if( document.layers ) { //releave NS4 bug
        document.write('&lt;layer id="snFlkDiv'+x+'"&gt;&lt;img src="'+pictureSrc+'" height="'+pictureHeight+'" width="'+pictureWidth+'" alt="*" border="0"&gt;&lt;/layer&gt;');
    } else {
        document.write('&lt;div style="position:absolute;" id="snFlkDiv'+x+'"&gt;&lt;img src="'+pictureSrc+'" height="'+pictureHeight+'" width="'+pictureWidth+'" alt="*" border="0"&gt;&lt;/div&gt;');
    }
}

//calculate initial positions (in portions of browser window size)
var xcoords = new Array(), ycoords = new Array(), snFlkTemp;
for( var x = 0; x &lt; numFlakes; x++ ) {
    xcoords[x] = ( x + 1 ) / ( numFlakes + 1 );
    do { snFlkTemp = Math.round( ( numFlakes - 1 ) * Math.random() );
    } while( typeof( ycoords[snFlkTemp] ) == 'number' );
    ycoords[snFlkTemp] = x / numFlakes;
}

//now animate
function mittensFall() {
    if( !getRefToDivNest('snFlkDiv0') ) { return; }
    var scrWidth = 0, scrHeight = 0, scrollHeight = 0, scrollWidth = 0;
    //find screen settings for all variations. doing this every time allows for resizing and scrolling
    if( typeof( window.innerWidth ) == 'number' ) { scrWidth = window.innerWidth; scrHeight = window.innerHeight; } else {
        if( document.documentElement &amp;&amp; ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
            scrWidth = document.documentElement.clientWidth; scrHeight = document.documentElement.clientHeight; } else {
            if( document.body &amp;&amp; ( document.body.clientWidth || document.body.clientHeight ) ) {
                scrWidth = document.body.clientWidth; scrHeight = document.body.clientHeight; } } }
    if( typeof( window.pageYOffset ) == 'number' ) { scrollHeight = pageYOffset; scrollWidth = pageXOffset; } else {
        if( document.body &amp;&amp; ( document.body.scrollLeft || document.body.scrollTop ) ) { scrollHeight = document.body.scrollTop; scrollWidth = document.body.scrollLeft; } else {
            if( document.documentElement &amp;&amp; ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) { scrollHeight = document.documentElement.scrollTop; scrollWidth = document.documentElement.scrollLeft; } }
    }
    //move the snowflakes to their new position
    for( var x = 0; x &lt; numFlakes; x++ ) {
        if( ycoords[x] * scrHeight &gt; scrHeight - pictureHeight ) { ycoords[x] = 0; }
        var divRef = getRefToDivNest('snFlkDiv'+x); if( !divRef ) { return; }
        if( divRef.style ) { divRef = divRef.style; } var oPix = document.childNodes ? 'px' : 0;
        divRef.top = ( Math.round( ycoords[x] * scrHeight ) + scrollHeight ) + oPix;
        divRef.left = ( Math.round( ( ( xcoords[x] * scrWidth ) - ( pictureWidth / 2 ) ) + ( ( scrWidth / ( ( numFlakes + 1 ) * 4 ) ) * ( Math.sin( lrFlakes * ycoords[x] ) - Math.sin( 3 * lrFlakes * ycoords[x] ) ) ) ) + scrollWidth ) + oPix;
        ycoords[x] += downSpeed;
    }
}

//DHTML handlers
function getRefToDivNest(divName) {
    if( document.layers ) { return document.layers[divName]; } //NS4
    if( document[divName] ) { return document[divName]; } //NS4 also
    if( document.getElementById ) { return document.getElementById(divName); } //DOM (IE5+, NS6+, Mozilla0.9+, Opera)
    if( document.all ) { return document.all[divName]; } //Proprietary DOM - IE4
    return false;
}


function dispenseMittens() {
if (EmergencyMittens) {
 window.clearInterval(EmergencyMittens);

} else {
EmergencyMittens = window.setInterval('mittensFall();',100);
}
}
&lt;/script&gt;
</code></pre>
