画像のフェードインについて

このQ&Aのポイント
  • javascriptで画像のフェードインについて調べていると、再起処理の中に+img+という表記があります。この意味は何でしょうか?
  • 初心者のため、javascriptで画像のフェードインについて知りたいです。再起処理の中の+img+という表記の意味は何でしょうか?
  • javascriptの初心者です。画像のフェードインについて調べていると、再起処理の中に+img+という表記があります。この意味を教えてください。
回答を見る
  • ベストアンサー

画像のフェードインについて

最近javascriptでいろいろなことができることを知りました。 WEBを調べていたら、画像のフェードインのソースを見つけて、 そのソースの意味を調べていましたら、今まで見たことのない 表記が出てきました。再起処理の中に"+img+"とうのがありますが これはどういう意味なのかなと、理解できません。+imgとかimg+ と表記されていた場合は、前の画像に新しい画像を足していくの かなと想像してしまいますが、果たしてその解釈も正しいものやら 想像の範囲でしかありませんが・・・。javascriptに詳しい方、 +img+の意味を是非ご教授お願いいたします。javascriptは、 数日前に本を読み始めたばかりの初心者です。バカな質問と思わ れるかもしれませんが宜しくお願いいたします。 <!-- // 画像のフェードイン・フェードアウト spd = 50; // 変化させる間隔(ミリ秒単位) ntc = 2; // 何%ずつ変化させるか cnt = 0; // フェードイン function fdInImg(img) { document.images[img].filters['alpha'].opacity = cnt; cnt += ntc; if(cnt >= 100) return; setTimeout("fdInImg('"+img+"')",spd); } // フェードアウト function fdOutImg(img) { document.images[img].filters['alpha'].opacity = cnt; cnt -= ntc; if(cnt <= 0) return; setTimeout("fdOutImg('"+img+"')",spd); } //-->

質問者が選んだベストアンサー

  • ベストアンサー
noname#84373
noname#84373
回答No.1

たとえば setTimeout("hoge()",3000); このhoge()に引数をつけて渡すには setTimeout("hoge('abc')",3000); もし変数 a に 'abc' が代入されている場合 var a='abc';//(グローバル変数ならOKだけど!ローカル変数の場合) setTimeout("hoge(a)",3000); だとだめ! なので、文字列として展開して渡す "hoge('"+a+"')"; は hoge('abc') となるので setTimeout("hoge('"+a+"')",3000);

ityounomi
質問者

お礼

そうなんですか!ありがとうございました。もっと色々と調べて勉強します。ご教授心から感謝申し上げます。お世話になりました。

関連するQ&A

  • 画像をフェードインさせるタグについて

    HP作成の際、 画像をフェードインさせたいのですが、 以下のタグをコピーして貼り付けても エラーになります。 どこを修正したらよいのでしょうか? よろしくお願いします<m(__)m> <HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript"> <!-- spd = 50; ntc = 2; fii = new Array("ia","ib","ic"); cnt = 0; i = 0; function fdInImg() { document.images[fii[i]].filters['alpha'].opacity = cnt; cnt += ntc; if(cnt >= 100) { cnt = 0; i++; } if(fii.length <= i) return; setTimeout("fdInImg()",spd); } //--> </SCRIPT> </HEAD> <BODY bgcolor="#ffffff" onLoad="fdInImg()"> 画像が順番にフェードインします。<BR><BR> <IMG src="画像のアドレス"> <IMG src="画像のアドレス"> <BR><BR> </BODY> </HTML>

  • 画像の下のテキストにフェードアウト後入力したい

    フェードインした画像の下にテキストボックスがあり画像フェードアウト後にそのテキストに 入力したいのですができません。 フェードアウト後に優先順位などを変更するなどの回避策はありますか? 今の状態を簡素にしたもののソースを記載します。 ----- <HTML> <HEAD> <META HTTP-EQUIV="Content-Language"CONETNT="ja"> <META HTTP-EQUIV="Content-Type"CONTENT="text/html;CHARSET=shift_jis"> <TITLE><test>画像優先順位変更</TITLE> <!-- saved from url=(0014)about:internet --> <Script Language="JavaScript"> moveTo(30,30); resizeTo(1050,750); // 画像のフェードイン・フェードアウト spd = 50; // 変化させる間隔(ミリ秒単位) ntc = 5; // 何%ずつ変化させるか cnt = 0; // フェードイン function fdInImg(img) { document.images[img].filters['alpha'].opacity = cnt; cnt += ntc; if(cnt >= 100) return; setTimeout("fdInImg('"+img+"')",spd);} // フェードアウト function fdOutImg(img) { document.images[img].filters['alpha'].opacity = cnt; cnt -= ntc; if(cnt <= 0) return; setTimeout("fdOutImg('"+img+"')",spd); } </SCRIPT> </HEAD> <BODY onload="fdInImg('1gif')"> <IMG SRC="1.gif" name="1gif" border="0" style="top:30;left:100;filter:alpha(opacity=0);position:absolute"> <Input type="button" onclick="fdOutImg('1gif')" value="FdOut"> <table> <tr> <th class="solid" width="120">test</Font></th> <td><input type ="text"></td> </tr> <tr> <th class="solid" width="120">test</Font></th> <td><input type ="text"></td> </tr> </table> </BODY> </HTML> ------------------

  • Firefoxとクロームでフェードインにならない

    横並びの画像を3枚時間差でフェードイン(左から順に表示)させたいのですが、 IEでは問題無く動くのですがFirefoxとGoogle Chromeではフェードインにも透過にもならず画像がそのままパっとでてしまいます・・。 FirefoxとGoogle Chrome対策ソース、他に良い方法などございましたら ご教授いただけますでしょうか。宜しくお願いいたします! <script type="text/JavaScript"> // 画像のフェードイン・フェードアウト var myspd = 5; // 変化する速さ(ミリ秒単位) var myx = 10; // 何%ずつ変化させるか var mypic = new Array("px1","px2","px3"); // 画像のname(順番に並べる) var mycnt = 0; var myp = 0; function mygo() { document.images[mypic[myp]].filters['alpha'].opacity = mycnt; mycnt += myx; if(mycnt >= 100) { mycnt = 0; myp++; } if(mypic.length <= myp) return; setTimeout("mygo()",myspd); } </script> 【HTML】 <ul> <li><img src="image/mainpx_01.jpg" name="px1" width="365" height="484" style="display: inline; filter:alpha(opacity=2);" /></li> <li><img src="image/mainpx_02.jpg" name="px2" width="365" height="484" style="display: inline; filter:alpha(opacity=0);" /></li> <li><img src="image/mainpx_03.gif" name="px3" width="270" height="484" style="display: inline; filter:alpha(opacity=0);" /></li> </ul>

  • 画像のスムーズなフェードイン方法

    このスクリプトではなんか動きがぎこちないのですが、スムーズに変化させるには、どう変更すればいいのでしょうか? <SCRIPT language="JavaScript"> var roopcount = 0; function myfadein(i){ if ( roopcount >= 0){ fade.filters(0).Opacity = 10*roopcount; fade.filters(0).FinishOpacity = 10*roopcount; roopcount++; setTimeout("myfadein(roopcount)",200);} } </SCRIPT> </head> <body bgcolor="#000000" onload="myfadein()"> <CENTER> <IMG id=fade style="filter:Alpha(Opacity=0,FinishOpacity=0, style=2,StartX=0,StartY=0,FinishX=420,FinishY=350)" src="014-2.gif" border=0"> </CENTER> </body> 宜しくお願いしますm(_ _)m

    • ベストアンサー
    • CSS
  • javascriptでループをやめたい

    javascript初心者です。 下記の様にソースが書いてあります。 画像が表示され、順番に表示されるのはいいのですが、 最後の画像になった時に、最初の画像に戻り、永遠と画像がループし、 表示されてしまいます。最後の画像になった時に、表示を止め、 最後の画像のまま表示を止めたいのですが、わかりません。 ご教示お願いいたします。 <SCRIPT language="JavaScript"> <!-- FITime=1; FOTime=8; n=10; flg=1; num=0; cnt=7; Fna="./img"; Fexp="jpg"; // 以下スクリプト本体 function fade(img){ if(flg==1){ document.images[img].src=Fna+num%cnt+"."+Fexp; if(n<=0) flg=0; document.images[img].filters['alpha'].opacity=n; if(n>=99)speed=0.05;else speed=5; n-=speed; setTimeout("fade('"+img+"')",FOTime); } else{ document.images[img].src=Fna+(num+1)%cnt+"."+Fexp; document.images[img].filters['alpha'].opacity=n; if(n>=98)speed=0.05;else speed=2; n+=speed; if(n>=100) {flg=1;++num;if(num%cnt==0){num=0;}} setTimeout("fade('"+img+"')",FITime); } } //--> </SCRIPT> </head> <img src="img0.jpg" name="img" style="filter:alpha(opacity=100)">

  • 二つのフィルタを同時に使用したい

    よろしくお願いいたします。 フェードインと光源のフィルタを同時に使用したいと希望しております。 現在、ページを開くと、画像がフェードインするようになっています。 n = 0; function fadein() { if (n > 100) return; n += 10; IMG1.filters['alpha'].opacity = n; setTimeout("fadein()",200); } ~ <BODY onload="fadein();"> (ちなみに実際には、この画像はページを開くたびに変わります。) document.write("~ id='IMG1' name='name1' style='filter:alpha(opacity=0);'>"); さらにこれに、例えば以下のような光源フィルタを追加したいと希望し試行錯誤しておりましたがどうしてもうまくいきません。 name1.filters.light.addAmbient(255, 255, 255, 50) name1.filters.light.addcone(1, 1, 1, 150,150,255,255,255,100,50) 恐れ入りますが何卒ご教授いただきたくお願いいたします。 申し訳ございませんが、具体的にどのように書けばよいかソースを添付いただけると大変ありがたいです。よろしくお願いします。

  • 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> //////////////////////// どなかたご教授いただけますでしょうか。 何卒、宜しくお願い申し上げます。

  • 3枚の画像をフェードイン

    3枚の画像を順番にフェードインさせたいのですが、IEで確認すると先にパっと画像が表示された後にすぐにその画像が消えてフェードインが次々始まります・・・。何かソース等ミスがあるのかIE対策をしないといけないのかわかりません・・。ページを表示させたあと更新を押すと正常に動くのですがブラウザを閉じて再度表示させるとまたパっと画像が現れた後にフェードインが始まる感じです。 ソースは下記になります。 最初のパッと画像が現れる原因と対策を教えてください・・・! <script type="text/javascript"> $(function(){  $('#fade li').hide(); }); $(window).bind("load", function(){  var interval = 400; //表示間隔  for(var i=0; i<$('#fade li').length; i++)   setTimeout(doFade(i), interval * i);  function doFade(i){   return function(){ $('#fade li').eq(i).fadeIn(2000); };  } }); </script> 【HTML】 <ul id="fade"> <li><img src="image/mainpx_01.jpg" alt="" width="365" height="484" style="display: inline; " /></li><li><img src="image/mainpx_02.jpg" alt="" width="365" height="484" style="display: inline; " /></li><li><img src="image/mainpx_03.gif" alt="" width="270" height="484" style="display: inline; " /></li></ul>

  • 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> ////////////////////////

  • 画像をフェードアウト&フェードインで切り替えたい

    jQueryを使っています。 「<ul id="cat-list">」の「href」を取得して画像を切り替えています。 その際にフェードアウトして画像が消え、次の画像をフェードインさせながら表示したいと考えています。 (クロスフェードならなお良いです。) 色々試したのですが、フェードのタイミングがうまく合ってくれません。 どのように記述したらいいでしょうか。 <script type="text/javascript"> $(function(){  $("#cat-list a").click(function(){   $("p#cat img").attr("src",$(this).attr("href")).attr("alt",$(this).text());   $("p#cat-name").text($(this).text());   return false;  }); }); </script> <p id="cat"><img src="images/cat01.jpg" alt="ネコ1" /></p> <p id="cat-name">ネコ1</p> <ul id="cat-list">  <li><a href="images/cat01.jpg">ネコ1</a></li>  <li><a href="images/cat02.jpg">ネコ2</a></li>  <li><a href="images/cat03.jpg">ネコ3</a></li>  <li><a href="images/cat04.jpg">ネコ4</a></li>  <li><a href="images/cat05.jpg">ネコ5</a></li> </ul> よろしくお願いします。

専門家に質問してみよう