- ベストアンサー
javascriptでのフェードイン
javascriptで画像表示をフェードインにしたいと思っております。 ネット上の情報から以下のソースを使用しております。 1html上に一つの画像を配置すると問題無く機能するのですが、 複数の画像を表示しようとすると一つ目の画像しか表示されません。 どこを変更すれば良いのか分からず困っております・・・ 修正方法、もしくはもっと簡単な方法がございましたら教えていただけないでしょうか。 ※以下のサンプルでは画像は二つですが、実際の使用時には制約上は無制限で画像を配置する予定です。 （Photologのサムネイル表示での使用を想定しております。） ///javascript file/// document.write("<style type='text/css'>#thephoto {visibility:hidden;}</style>"); window.onload = function() {initImage()} function initImage() { imageId = 'thephoto'; 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> <title></title> <script type="text/javascript" src="fade.js"></script> </head> <body> <img src="img_01.jpg" id="thephoto" /></div> <img src="img_02.jpg" id="thephoto" /></div> </body> </html> //////////////////////// どなかたご教授いただけますでしょうか。 何卒、宜しくお願い申し上げます。
- haden_107
- お礼率46% (6/13)
- JavaScript
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
ANo.1です。 力技ですが、tableの中にフェードインしたい画像を全て入れちゃうという方法もあります。 <table id="img"> <img src="img_01.jpg"><br/> <img src="img_02.jpg"> </table> ただし、この方法ですと、いろんなところに散りばめた画像を 一括でフェードインすることは不可能になります。。
その他の回答 (2)
- leap_day
- ベストアンサー率60% (338/561)
こんにちは <script type="text/javascript"><!-- document.write("<style type='text/css'>#gallary img { visibility:hidden; }<\/style>"); window.onload = function() { flag = false; if( navigator.appName == "Microsoft Internet Explorer" ) flag = true; IMG = new Array(); IMG = document.getElementById("gallary").getElementsByTagName("img"); setImage(0); for(i=0;i<IMG.length;i++) { IMG[i].style.visibility = "visible"; } } function setImage(n) { if(n == 100) return false; for(i=0;i<IMG.length;i++) { if(flag) { IMG[i].style.filter = "alpha(opacity=" + n + ")"; } else { IMG[i].style.opacity = n/100; IMG[i].style.MozOpacity=n/100; } } n += 5; setTimeout("setImage("+n+")",100); } //--></script> <div id="gallary"> <img src="img_01.jpg" alt="img01"> <img src="img_02.jpg" alt="img02"> </div> とか？
- chanfi
- ベストアンサー率37% (10/27)
idが同じ名前のため、上手く動作がしないようですので、 idを"thephoto1" "thephoto2" "thephoto3"などと連番をつけ、 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); } } とすれば一応上手く動きそうです。
補足
chanfiさま 早速のお返事有り難うございました！ 試したところ問題なく動作致しました。 有り難うございます。 一点追加でお聞きさせていただきたいのですが、 お返事いただいた「idをそれぞれ別のモノに設定する」方法以外に 複数画像を一括してフェードインに指定する方法は無いでしょうか。 今回のフェードインはMTで制作したphotologでのサムネイルに使用したと考えており、 MTから吐き出されるサムネイルのタグにそれぞれ連番でidを付記するのが困難な為、一括して指定できればと考えております。 解決方法をご存じでしたら教えていただけないでしょうか。 お忙しいところ恐れ入ります・・・ 何卒、宜しくお願い申し上げます。
お礼
何度もお答えいただき、本当にありがとうございました。 追加で質問させていただいな内容は新規で質問させていただきました。 お手数ですが、ご確認いただければ幸いです。 宜しくお願い致します。
補足
chanfiさま 有り難うございました！ またこちらからのお返事が遅れました事お詫びいたします。 申し訳ございませんでした。 MTでの連番を追記して書き出す方法が分かりましたので、 初めにご連絡いただきました以下のスクリプトを実装したところ、問題なく動作しました。 本当に有り難うございました。 心よりお礼申し上げます。 追加の質問で大変申し訳ないのですが、下記スクリプトで動作確認を行うと WindowsのIE（6&7）で「エラー：オブジェクトがありません」と表示されてしまいます。 こちらで確認したところ最後の行の「window.onload～」がエラーの原因となっているようなのですが、 修正する記述方法が分からず困っております。 何回にも渡り質問させていただき本当に申し訳ないのですが、 ご確認いただけましたら幸いです。 何卒、宜しくお願い申し上げます。 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>"); document.write("<style type='text/css'>#thephoto4 {visibility:hidden;}</style>"); document.write("<style type='text/css'>#thephoto5 {visibility:hidden;}</style>"); function initImage() { for(i=1;i<6;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() }