niveanvp73 Posted July 2, 2008 Share Posted July 2, 2008 Hi...I put the bulb from javascript tutorial and a picture of a small room and connected them as following: when you click on the bulb, it gets on (the source changes) AND the room starts to slowly change the opacity till 100 (the starting opacity is 0). You can have a look at my creation here: http://sweb.cz/srandovni-video/Now I would like it to run backwards...I would like to click on the bulb to switch it off AND to let the opacity go down to 0...I tried to make it happen very long yet it still doesn't work...Could someone help, please? Here's the code:<html><head><!--not important--><style type="text/css">div{background-color:black;width:200px;height:200px;}img.room{width:200px;height:200px;}</style><!--The functions:--><script type="text/javascript">cc=0;function changeimage() <!--this functions changes the source of the bulb-->{if (cc==0) {cc=1;document.getElementById('myimage').src="http://sweb.cz/srandovni-video/bulbon.gif";}else{cc=0;document.getElementById('myimage').src="http://sweb.cz/srandovni-video/bulboff.gif";}}var'>http://sweb.cz/srandovni-video/bulboff.gif";}}var dd=0var c=0; <!--c stands for opacity of the picture under the bulb-->var t;var t2;function timedCount(){if (dd==0){dd=1;fce()}else{dd=0;fce2()}}function fce(){clearTimeout(t2)document.getElementById('img').style.cssText = "opacity: " + (c / 100) + "; filter:alpha(opacity=" + c + ")";c=c+1;var t=setTimeout("fce()",5)}function fce2(){clearTimeout(t)document.getElementById('img').style.cssText = "opacity: " + (c / 100) + "; filter:alpha(opacity=" + c + ")";c=c-1;var t2=setTimeout("fce2()",5)}</script></head><body><img src="http://sweb.cz/srandovni-video/bulboff.gif" onClick="changeimage();timedCount()" id="myimage" /><div><img class="room" src="http://sweb.cz/srandovni-video/room.jpg" id="img" style="opacity:0;filter:alpha(opacity=0)" /></div></body></html> Link to comment Share on other sites More sharing options...
Jesdisciple Posted July 2, 2008 Share Posted July 2, 2008 The only possible problem I can find is that you set no limit on how long the opacity will fade. Try limiting the opacity's range with an 'if' (in each fce) and see if that helps. Link to comment Share on other sites More sharing options...
niveanvp73 Posted July 2, 2008 Author Share Posted July 2, 2008 The only possible problem I can find is that you set no limit on how long the opacity will fade. Try limiting the opacity's range with an 'if' (in each fce) and see if that helps.I've tried it yet I still can't make it work...could you write a recommended code, please? Link to comment Share on other sites More sharing options...
aalbetski Posted July 2, 2008 Share Posted July 2, 2008 try adding these to your functionsfunction fce(){ clearTimeout(t2) document.getElementById('img').style.cssText = "opacity: " + (c / 100) + "; filter:alpha(opacity=" + c + ")"; c=c+1; if (c>99) return var t=setTimeout("fce()",5)}function fce2(){ clearTimeout(t) document.getElementById('img').style.cssText = "opacity: " + (c / 100) + "; filter:alpha(opacity=" + c + ")"; c=c-1; if (c<1) return var t2=setTimeout("fce2()",5)} Link to comment Share on other sites More sharing options...
niveanvp73 Posted July 2, 2008 Author Share Posted July 2, 2008 Thank you so much!!!!! It finally WORKS!I've been trying to solve this problem for a week now and nobody's been able to help...thank you! Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.