- ベストアンサー
javascriptでのフェードイン
javascriptを使用してhtml上の画像をフェードインにて表示したいと思っております。 ネット上の情報とこちらのサイトでのアドバイスを元に以下のソースを使用しておりますが WindowsのIE（6&7）で確認すると「エラー：オブジェクトがありません」と表示されてしまいます。 こちらで確認したところjavascript最後の行の「window.onload～」がエラーの原因となっているようなのですが、 修正する記述方法が分からず困っております。 解決策をご存じの方がおられましたらお手数ですが、 ご教授いただけないでしょうか。 何卒、宜しくお願い申し上げます。 ///javascript file（fade.js）/// document.write("<style type='text/css'>#thephoto1 {visibility:hidden;}</style>"); document.write("<style type='text/css'>#thephoto2 {visibility:hidden;}</style>"); document.write("<style type='text/css'>#thephoto3 {visibility:hidden;}</style>"); function initImage() { for(i=1;i<4;i++){ imageId = 'thephoto' + i; image = document.getElementById(imageId); setOpacity(image, 0); image.style.visibility = "visible"; fadeIn(imageId,0); } } function fadeIn(objId,opacity) { if (document.getElementById) { obj = document.getElementById(objId); if (opacity <= 100) { setOpacity(obj, opacity); opacity += 25; window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 100); } } } function setOpacity(obj, opacity) { opacity = (opacity == 100)?99.999:opacity; // IE/Win obj.style.filter = "alpha(opacity:"+opacity+")"; // Safari<1.2, Konqueror obj.style.KHTMLOpacity = opacity/100; // Older Mozilla and Firefox obj.style.MozOpacity = opacity/100; // Safari 1.2, newer Firefox and Mozilla, CSS3 obj.style.opacity = opacity/100; } window.onload = function() { initImage() } //////////////////////// ///html file/// <html> <head> <script type="text/javascript" src="fade.js"></script> </head> <body> <img src="img_01.jpg" id="thephoto1" /> <img src="img_02.jpg" id="thephoto2" /> <img src="img_03.jpg" id="thephoto3" /> </body> </html> ////////////////////////
- haden_107
- お礼率46% (6/13)
- JavaScript
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは 自分のは気に入りませんでした？ <body>全体を<div id="gallary">～</div>で囲めば全ての<img>をフェードインさせるようにしていたのですが(opacity upは5に変更してますが）・・・ フェードインさせない画像もあったのかな？ まっ、とりあえずそれは置いといて・・・ 質問のものはきちんと機能しています 『エラー：オブジェクトがありません』とは対象が存在していないので出るエラーですので <img id="thephoto1"> <img id="thephoto2"> <img id="thephoto3"> が確実にあるか確かめてください ※alt属性は必須です
その他の回答 (2)
- auty
- ベストアンサー率58% (284/486)
＞＞＞ 「スクリプトエラーごとに通知を表示する」にチェック 今回初めてチェックを入れてみましたが、どちらもステータスバーにエラーは現れませんでした。 これまでもエラーのあるときは、ステータスバーの左下にエラーマークが表示され、クリックして詳細を見ておりますが、現れていません。
- auty
- ベストアンサー率58% (284/486)
IE6 、IE7ともうまく行くのを確認しました。バージョンは、 IE6： 6.0.2900.2180 SP2 IE7： 7.0.6000.16609 です。バージョンによる違いがあるのでしょうか。 ------------------------------------------------------------ window.onload = function () { initImage(); }; にもエラーはありません。 window.onload = initImage; としても良いですが。
補足
autyさま 早速のご連絡、誠に有り難うございます。 すみません。こちらの説明不足でした。 IEではステータスバーにエラーが表示されます。 IEの「ツール」→「インターネットオプション」→「詳細設定」で「スクリプトエラーごとに通知を表示する」にチェックを入れますと エラーがアラートとして確認出来ますがautyさまの環境では如何でしょうか。 お忙しいところ恐れ入りますが、ご確認いただけましたら幸いです。 何卒、宜しくお願い申し上げます。 ※バージョンは微妙に違いますが今回のエラー表示に差は無いかと思っております。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/images/related_qa/c205_1_thumbnail_img_sm.png)
お礼
leap_dayさま お返事有り難うございました！ 以前教えていただいた内容は一度試したのですが、 その時はうまく動作せず諦めておりました。 今回改めて試してみたところ、無事動作しました！ 本当に有り難うございました。 丁寧に教えてくださいましたこと、厚くお礼申し上げます。