| ||
| <div id="mycontent" style="width:200px; background-color:lightyellow; border:2px solid black; padding: 5px; filter:progid:DXImageTransform.Microsoft.Pixelate(maxSquare=10, duration=2, enabled=false)" /> <img src="brotherday.gif" /><br /> My brother plays in the morning. </div> <script type="text/javascript"> var divbox=document.getElementById("mycontent") function addtransition(){ divbox.innerHTML="<img src='../scripts/brother.gif' /><br />My brother plays in the morning.." //reset DIV content to original (in case demo is run more than once) divbox.filters[0].apply() //capture initial state of DIV (screenshot) divbox.innerHTML="<img src='brothernight.gif' /><br />And works at night..." //change DIV's content (though changes not visible yet due to above capture divbox.filters[0].play() //play transition to reveal updated content } </script> <form> <input type="button" value="Run Transition" onClick="addtransition()"/> </form> |