- ベストアンサー
テーブル中に設けた背景画像をフェードインで
下記の記述で、テーブルに背景を設けています。 この画像を、じんわりと、フェードイン表示させたいと思っていますが、JavaScriptで可能でしょうか? <td width="800" height="600" align="centert" valign="center" style="background-image:url(img/hoge1.jpg);background-repeat:no-repeat;background-position:center center;">
- みんなの回答 (1)
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>サンプル</title> <body> <table> <tr> <td width="800" height="600" align="centert" valign="center" style="filter:alpha(opacity='0');opacity=0;background-image:url(img/0.gif);background-repeat:no-repeat;background-position:center center;" id="p">123</td> </tr> </table> <script type="text/javascript"> //@cc_on /*@if(@_jscript) attachEvent('on'+ @else@*/addEventListener(/*@end@*/'load', function () { setOpacity(document.getElementById('p'),0,1,40); }, false); function setOpacity(e,o,s,w){ function g(){ if(o<0)o=0,f=2;if(o>100)o=100,f=1; t./*@if(1)filter='alpha(opacity='+o+')'@else@*/opacity=o/100/*@end@*/; if(!f) o+=s,setTimeout((function(){return function(){g()}})(this),w);} if(f==2)t.display='none'; var f,t=e.style;g(); } </script>
お礼
早速のご教示、ありがとうございます。見事に実現できました。 大成功でございます。 気づいた事項が1点ございましたて、元ソースでは、問題なかったのですが、変更後、画像(800×600)に、塵(チリ)のようなものが、 ところどころに散見されるようになってしまいました。 元ソースでは出ないのですが、スクリプトによって、 元々問題のある画像が馬脚を現してしまったのでしょうかねえ。 この様なことって、何か、聞いたことなどはございますでしょうか? お礼ついでの質問で、恐縮でございますが、宜しくお願いします。 どうも、ありがとうございます。
補足
やはり画像のノイズが顕在化したようです(笑) 画像処理ソフトでノイズ除去し加工しました。 どうも、ありがとうございますした。