- ベストアンサー
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さまの環境では如何でしょうか。 お忙しいところ恐れ入りますが、ご確認いただけましたら幸いです。 何卒、宜しくお願い申し上げます。 ※バージョンは微妙に違いますが今回のエラー表示に差は無いかと思っております。
関連するQ&A
- 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> //////////////////////// どなかたご教授いただけますでしょうか。 何卒、宜しくお願い申し上げます。
- ベストアンサー
- JavaScript
- 続き] divの背景画像を、徐々に表示させるには？
トップページの２つのdivボックスの背景画像を、徐々に表示されるようにするjavascriptを作って頂いたのですが、リピートをやめる方法を御教えいただくのを忘れてしまいました！ （http://oshiete1.goo.ne.jp/qa3921804.html） リピートをとめるには、下記ソースをどのようにすればよろしいでしょうか？ ------------------------------------------------------------ fade.js ------------------------------------------------------------ var after = 10; // 秒数を指定 var tid1; var tid2; window.onload = function () { fdi2(); tid2=window.setInterval("fdi2()", after*1000); }; function fdi2() { var img1 = document.getElementById("limg"); img1.style.visibility = "visible"; fadeIn("limg", 0); var img2 = document.getElementById("rimg"); img2.style.visibility = "visible"; fadeIn("rimg", 0); } function fadeIn(imgId, opacity) { if (opacity <= 100) { setOpacity(document.getElementById(imgId), opacity); opacity += 10; tid1=window.setTimeout("fadeIn('" + imgId + "'," + opacity + ")", 80); } else { window.clearTimeout(tid1); } } function setOpacity(img, opacity) { img.style.filter = "alpha(opacity:" + opacity + ")"; img.style.KHTMLOpacity = opacity / 100; img.style.MozOpacity = opacity / 100; img.style.opacity = opacity / 100; }
- ベストアンサー
- JavaScript
- 5秒後にフェードイン
以下の画像がフェードインするプログラムで、5秒後にフェードインを実行するように設定するにはどうしたらよいでしょうか？ どなたかご教授ください。 <script language="JavaScript"> <!-- function fadein(id) { app = navigator.appName.charAt(0); ver = navigator.appVersion.charAt(0); if ((app == "M") && (ver >= 4)) { document.all.item(id).style.visibility = "hidden"; document.all.item(id).filters[0].apply(); document.all.item(id).style.visibility = "visible"; document.all.item(id).filters[0].play(); } } // --> </script> </head> <body bgcolor="white" text="red" link="blue" vlink="purple" alink="red" class="style" onload="fadein('img1');"> <p align="right"> <img src="non.jpg" id="img1" style="filter:revealTrans(duration=3.0,Transition=12); visibility=hidden;"> </p> </body>
- ベストアンサー
- JavaScript
- javascriptをＣＳＳに書き込むと動作しません。何故ですか？
下記のjavascriptをＣＳＳに書き込みました。拡張子は.jsとしました。 jsのフォルダにtopmuv.jsというファイル名にしました。 <script type="text/javascript"> <!-- function blink() { if (!document.all) { return; } for (i = 0; i < document.all.length; i++) { obj = document.all(i); if (obj.className == "blink") { if (obj.style.visibility == "visible") { obj.style.visibility = "hidden"; } else { obj.style.visibility = "visible"; } } } setTimeout("blink()", 500); } // --> </script> </head> <body onload="blink()"> htmlの読み込みは <LINK rel="stylesheet" href="js/topmuv.js" type="text/javascript"> と書いています。 この場合、上記javascriptのソースをシート上にダイレクトに書き込むと正常に動作しますがｃｓｓにすると動作しません。 何が悪いのでしょうか？ 詳しい方宜しくお願いします。
- 締切済み
- その他([技術者向] コンピューター)
- JavaScripｔについての質問です。
javascript初心者です。方法が分かりませんので、教えていただける方、お願いいたします。ホームページを作っております。とあるページの下の部分をクリックすると、新しいウィンドウが開きます。 <a href="#" onClick="window.open('f/f.html?1','newWin','width=850,height=650')">テキスト</a> 新しいページは次のようになっています。 ↓ここからJavaScript↓ flag = false; function pd1() { if(flag) document.getElementById('ID1').style.visibility = "hidden"; else document.getElementById('ID1').style.visibility = "visible"; flag = !flag; } function fx(){ var num = location.search.substr(1,1); var the_id = "ID" + num.toString(); document.getElementById(the_id).style.visibility = "visible"; } ここからhtml↓ <div id= "w1" onMouseover="document.s1img.src='img/s1rr.gif'" onMouseout="document.s1img.src='img/s1w.gif'"> <a href="javascript:pd1()">テキスト</a></div> <div id="ID1" style="visibility: hidden;" onMouseover="document.s1img.src='img/s1rr.gif'" onMouseout="document.s1img.src='img/s1w.gif'"> <p>テキスト<br /> </div> <div id="s1"><img src="img/s1w.gif" width="29" height="39" name="s1img"/></div> 以上です。上記に関して説明を付け加えますと、新しいウィンドウ（新しいページ）上では、function fx とpd1が作動し、div ID1がプルダウンメニューのように開くようになっています。 それに付け加えたいのですが、冒頭であげた部分をクリックするとID1がプルダウンのように開くだけでなく、div s1の name="s1img"であげた部分を別の画像が表示されるようにするにはどのようなjavascriptを追加すればいいでしょうか？ どなたか教えていただければ有り難いです・・・・・。
- ベストアンサー
- JavaScript
- javascript について追加の質問
質問NO6591909＝3/14 10：59の追加の質問です。 素晴らしい回答で非常に感謝いたしますが、追加でもう一つお願いします。あと一息といったところです。最後の部分なのですが、 function pd1() { if(flag) document.getElementById('ID1').style.visibility = "hidden"; else document.getElementById('ID1').style.visibility = "visible"; var img = document.getElementById('s1').getElementsByTagName("img"); img[0].src = "別の画像のURL" flag = !flag; } function fx(){ var num = location.search.substr(1,1); var the_id = "ID" + num.toString(); var the_id2 = "s" + num.toString(); document.getElementById(the_id).style.visibility = "visible"; var img = document.getElementById(the_id2).getElementsByTagName("img"); img[0].src = "別の画像のURL" } この3行上の"別の画像のURL"とありますが、上記ですと決まった一枚の画像しか表示できないということになりますよね？ IDは9つありまして、9つ別々の画像をそれぞれ選択できるようにしたいのですが、その点を考慮するとどのような文になりますでしょうか？（function fx()を9つ別々に書くんでしょうか？・・・・・・）よろしくお願いいたします。 因みにここからhtml↓（さっきも書きましたが、また書いておきます。） <div id= "w1" onMouseover="document.s1img.src='img/s1rr.gif'" onMouseout="document.s1img.src='img/s1w.gif'"> <a href="javascript:pd1()">テキスト</a></div> <div id="ID1" style="visibility: hidden;" onMouseover="document.s1img.src='img/s1rr.gif'" onMouseout="document.s1img.src='img/s1w.gif'"> <p>テキスト<br /> </div> <div id="s1"><img src="img/s1w.gif" width="29" height="39" name="s1img"/></div>
- ベストアンサー
- JavaScript
- ランダムなフェードインを作りたいです。
jQueryのfadein()/feadeOut()メソッドでイメージのスライドショーを実装したサンプル http://jsajax.com/articles/jQuerySimplestSlidesh … の画像を順番通りでなくランダム表示に修正したいです。 自分なりに考えて作ってみたのですが、正しく機能しませんでした。 どこをどのように修正すればランダムになるのでしょうか？ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio … <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Simplest jQuery Slideshow</title> <style type="text/css"> body {font-family:Arial, Helvetica, sans-serif; font-size:12px;} .fadein { position:relative; height:332px; width:500px; } .fadein img { position:absolute; left:0; top:0; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4. … <script type="text/javascript"> var imglist = new Array( "http://farm3.static.flickr.com/2610/4148988872_9 … "http://farm3.static.flickr.com/2597/4121218611_0 … "http://farm3.static.flickr.com/2531/4121218751_a … var select = Math.floor((Math.random() * 100)) % imglist.length; var t0 = "<img src='"+imglist[select]+"' border='0' >"; $(function(){ $('.fadein img:gt(0)').hide(); setInterval(function() { $('.fadein :first-child').fadeOut() .next('t0').fadeIn() .end().appendTo('.fadein'); }, 3000); }); </script> </head> <body> <div class="fadein"> <img src="http://farm3.static.flickr.com/2610/4148988872_9 … alt="" /> <img src="http://farm3.static.flickr.com/2597/4121218611_0 … alt="" /> <img src="http://farm3.static.flickr.com/2531/4121218751_a … alt="" /> </div> </body> </html>
- ベストアンサー
- AJAX
- ソースの初歩的な質問です
スタートを押下したら、alertの"消します""出します"の通りに、 obj.gifが反応するようにするソースを作成したいです。 以下のソースでは対象オブジェクトが見つからないという エラーが返ってきてしまいます。 どの様に修正すればよいのか教えてください。 宜しくお願い致します。 <html> <head> <script type="text/JavaScript"> function Start(lyrball) { alert("消します"); document.getElementById(lyrball).style.visibility = "hidden"; alert("出します"); document.getElementById(lyrball).style.visibility = "visible"; } </script> </head> <body> <a href="JavaScript:Start()">スタート</a> <div id="lyrball"> <img src="obj.gif"> </div> </body> </html>
- ベストアンサー
- JavaScript
- 画像がフェードインしてからフェードアウトする
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>Document</title> <script src="jquery.min.js"></script> <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script> <script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script> <script> $(function(){ var $grid = $('.grid').masonry({ // options itemSelector: 'none', columnWidth: '.grid__item', gutter: 20, stagger: 30, percentPosition: true, visibleStyle: { transform: 'translateY(0)', opacity: 1 }, hiddenStyle: { transform: 'translateY(100px)', opacity: 0 }, }); var msnry = $grid.data('masonry'); $grid.imagesLoaded(function() { $grid.masonry( 'option', { itemSelector: '.grid__item' }); var $items = $grid.find('.grid__item'); $grid.masonry( 'appended', $items ); }); var nextSlugs = [ 'page2.html', 'page3.html' ]; function getPath() { var slug = nextSlugs[ this.loadCount ]; if( slug ) { return 'https://www.miso.blog/demo/masonry_infinitescroll/'; } } }); </script> </head> <body> <h1>Infinite Scroll - Masonry image grid</h1> <ul class="grid"> <li class="grid__item fadein"> <img src="sdfsafasfas.png"></li> <li class="grid__item fadein"> <img src="sdfsafasfas.png"></li> <li class="grid__item fadein"> <img src="sdfsafasfas.png"></li> <li class="grid__item fadein"> <img src="sdfsafasfas.png"></li> <li class="grid__item fadein"> <img src="sdfsafasfas.png"></li> <li class="grid__item fadein"> <img src="sdfsafasfas.png"></li> <li class="grid__item fadein"> <img src="sdfsafasfas.png"></li> <li class="grid__item fadein"> <img src="sdfsafasfas.png"></li> <li class="grid__item fadein"> <img src="sdfsafasfas.png"></li> </ul> </div> <script> $(function(){ $(window).scroll(function (){ $('.fadein').each(function(){ var position = $(this).offset().top; var scroll = $(window).scrollTop(); var windowHeight = $(window).height(); if (scroll > position - windowHeight + 200){ $(this).addClass('active'); } }); }); }); </script> </body> </html> ------------------------------------------------------------------------------- @charset "utf-8"; body { font-family: sans-serif; line-height: 1.4; font-size: 18px; padding: 20px; max-width: 640px; margin: 0 auto; } .grid { max-width: 1200px; } /* reveal grid after images loaded */ .grid.are-images-unloaded { opacity: 0; } .grid__item, .grid__col-sizer { width: 27%; } .grid__gutter-sizer { width: 2%; } /* hide by default */ .grid__item { margin-bottom: 20px; float: center; } .grid__item--height1 { height: 140px; background: #EA0; } .grid__item--height2 { height: 220px; background: #C25; } .grid__item--height3 { height: 300px; background: #19F; } .grid-item--width2 { width: 400px; } .grid__item img { display: block; max-width: 100%; } .fadein { opacity : 0; transform : translate(0, 100px); transition : all 1s; } .fadein.active{ opacity : 1; transform : translate(0, 0); } 何故か画像がフェードアウトして表示されません。 やりたい事は、ある一定の位置にスクロールして調整して 画像を読み込んでフェードインさせて表示させたいのですが ご教示お願いします。
- ベストアンサー
- HTML
- IE11 javascriptについて
すみません、IE11なってから、以下のjavascriptが動かなくなりました。 画像は、フェードイン、フェードアウトを繰り返し、画像はランダムに移動します。 全部のロジックを書いてしまいましたが、 何処がIE11から変更されたかが解らなくて、困っている所です。 何処を直すのか、全部聞くのもあつかましいと思いました、 どのあたりを見直しすれば宜しいですか。 教えて頂ければ幸いです。 <SCRIPT language="JavaScript"> <!-- var img = new Array(); img[0] = new Image(); img[0].src = "img/4031.jpg"; img[1] = new Image(); img[1].src = "img/4032.jpg"; img[2] = new Image(); img[2].src = "img/4031.jpg"; img[3] = new Image(); img[3].src = "img/4032.jpg"; img[4] = new Image(); img[4].src = "img/4031.jpg"; imgMaxSizeW = 171; imgMaxSizeH = 141; alphaTimer = 10; stopTimer = 2000; nextImgTimer = 1000; _dom=(document.all?3:(document.getElementById?1:(document.layers?2:0))); function getWindowSize() { if(_dom == 1 || _dom == 2) { win_width = self.innerWidth; win_height = self.innerHeight; } if (_dom == 3) { win_width = document.body.clientWidth; win_height = document.body.clientHeight; } } function showLayer(layerName){ if (_dom == 1) document.getElementById(layerName).style.visibility = "visible"; if (_dom == 2) document.layers[layerName].visibility = "show"; if (_dom == 3) document.all(layerName).style.visibility = "visible"; } function hideLayer(layerName){ if (_dom == 1) document.getElementById(layerName).style.visibility = "hidden"; if (_dom == 2) document.layers[layerName].visibility = "hide"; if (_dom == 3) document.all(layerName).style.visibility = "hidden"; } function writeHTML(layerName,html) { if (_dom == 1) { var div = document.getElementById(layerName); while(div.hasChildNodes()) div.removeChild(div.lastChild); var range=document.createRange(); range.selectNodeContents(div); range.collapse(true); var cf=range.createContextualFragment(html); div.appendChild(cf); } if (_dom == 2) { var div = document.layers[layerName]; div.document.open(); div.document.write(html); div.document.close(); } if (_dom == 3) document.all(layerName).innerHTML = html; } function moveLayerTo(layerName, x, y){ if (_dom == 1) { document.getElementById(layerName).style.left = x + scrollX; document.getElementById(layerName).style.top = y + scrollY; } if (_dom == 2) { document.layers[layerName].left = x + pageXOffset; document.layers[layerName].top = y + pageYOffset; } if (_dom == 3) { document.all(layerName).style.pixelLeft = x + document.body.scrollLeft document.all(layerName).style.pixelTop = y + document.body.scrollTop; } } function changeAlpha(layerName) { if (_dom == 3) { if (alphaCount < 200) { alphaCount += 2; op = alphaCount > 100 ? 100 - (alphaCount-100) : alphaCount; document.all(layerName).filters["alpha"].opacity = op; if (op == 100) { tim = setTimeout("changeAlpha('"+layerName+"')", stopTimer); } else { tim = setTimeout("changeAlpha('"+layerName+"')", alphaTimer); } } else { hideLayer(layerName); clearTimeout(tim); tim = setTimeout("setAlphaImgPos()",nextImgTimer); } } else { setTimeout("setAlphaImgPos()",nextImgTimer*2); } } var imgCount = 0; function setAlphaImgPos() { writeHTML("imgLay",'<IMG src="' + img[imgCount].src + '" border="0">'); imgCount++; if (imgCount >= img.length) imgCount = 0; getWindowSize(); sX = Math.floor(Math.random()*(win_width-imgMaxSizeW-10)); sY = Math.floor(Math.random()*(win_height-imgMaxSizeH-10)); moveLayerTo("imgLay",sX,sY); showLayer("imgLay"); alphaCount = 0; changeAlpha("imgLay"); } window.onload = setAlphaImgPos; // --> </SCRIPT>
- ベストアンサー
- JavaScript
お礼
leap_dayさま お返事有り難うございました！ 以前教えていただいた内容は一度試したのですが、 その時はうまく動作せず諦めておりました。 今回改めて試してみたところ、無事動作しました！ 本当に有り難うございました。 丁寧に教えてくださいましたこと、厚くお礼申し上げます。