Question

I am trying to hide an image in a script pre-loading on the page.

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.

If anyone has any insight on how to hide the image until the function dispenseMittens() runs, I’d be eternally grateful 🙂

Thanks!

<script language="javascript">
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 < 1 ) { numFlakes = 10; }

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

//calculate initial positions (in portions of browser window size)
var xcoords = new Array(), ycoords = new Array(), snFlkTemp;
for( var x = 0; x < 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 && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
            scrWidth = document.documentElement.clientWidth; scrHeight = document.documentElement.clientHeight; } else {
            if( document.body && ( 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 && ( document.body.scrollLeft || document.body.scrollTop ) ) { scrollHeight = document.body.scrollTop; scrollWidth = document.body.scrollLeft; } else {
            if( document.documentElement && ( 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 < numFlakes; x++ ) {
        if( ycoords[x] * scrHeight > 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);
}
}
</script>

Answer 1

Why not just set the style of the image to display: 'none' until the button is clicked, whereupon you can set the style back to display: 'inline-block' before the rain commences?