twilitegxa Posted August 19, 2009 Share Posted August 19, 2009 I have this fader script that fades in and out the image when the link is clicked. Is there a way to have the image faded out when the page is loaded so that when the link is clicked the image gets faded in? Here is what I have: Javascript: <script> var TimeToFade = 1000.0; function fade(eid) { var element = document.getElementById(eid); if(element == null) return; if(element.FadeState == null) { if(element.style.opacity == null || element.style.opacity == '' || element.style.opacity == '1') { element.FadeState = 2; } else { element.FadeState = -2; } } if(element.FadeState == 1 || element.FadeState == -1) { element.FadeState = element.FadeState == 1 ? -1 : 1; element.FadeTimeLeft = TimeToFade - element.FadeTimeLeft; } else { element.FadeState = element.FadeState == 2 ? -1 : 1; element.FadeTimeLeft = TimeToFade; setTimeout("animateFade(" + new Date().getTime() + ",'" + eid + "')", 33); } } function animateFade(lastTick, eid) { var curTick = new Date().getTime(); var elapsedTicks = curTick - lastTick; var element = document.getElementById(eid); if(element.FadeTimeLeft <= elapsedTicks) { element.style.opacity = element.FadeState == 1 ? '1' : '0'; element.style.filter = 'alpha(opacity = ' + (element.FadeState == 1 ? '100' : '0') + ')'; element.FadeState = element.FadeState == 1 ? 2 : -2; return; } element.FadeTimeLeft -= elapsedTicks; var newOpVal = element.FadeTimeLeft/TimeToFade; if(element.FadeState == 1) newOpVal = 1 - newOpVal; element.style.opacity = newOpVal; element.style.filter = 'alpha(opacity = ' + (newOpVal*100) + ')'; setTimeout("animateFade(" + curTick + ",'" + eid + "')", 33); } </script> Body: <div id="fadeBlock" title="fadeBlock"> <img src="images/brianna_kainan.jpg" width="500" height="400" id="kula" title="kula" /><br /> <p><b>My kids, Brianna and Kainan</b></p> </div> Click here to <a href="#" onclick="fade('fadeBlock')">Fade In/Fade Out</a> How can I do this? Quote Link to comment Share on other sites More sharing options...
RichardRotterdam Posted August 19, 2009 Share Posted August 19, 2009 somthing like this maybe? <script type="text/javascript"> window.onload = function(){ // call your fade out script here } </script> Quote Link to comment Share on other sites More sharing options...
twilitegxa Posted August 23, 2009 Author Share Posted August 23, 2009 I found a way to do it with making the display of the div I put it in as none, and that worked! Thanks for the help! Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.