- ベストアンサー
JavaScript setTimeout メソッドの使い方を教えてください。
三つの画像をそれぞれ違った場所にsetTimeoutを設定して数秒差をつけて表示するスクリプトを教えていただけませんか。（例えばテーブルのセルごとに表示する） 一度時間差で表示されればそのままでいいのです。 マウスイベントは使いたくないのです。 一つの画像がタイム差でチェンジするものはよく見かけるのですが・・・。
- T_kumi
- お礼率64% (9/14)
- JavaScript
- 回答数5
- ありがとう数5
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
画像を３枚設置する場合ですが、交換用の画像も含め６枚の画像になりますので 参照先はsrc1～src6まで以下のようにします。 src1="image/img1の元画像.jpg"; src2="image/img1の次画像.jpg"; src3="image/img2の元画像.jpg"; src4="image/img2の次画像.jpg"; src5="image/img3の元画像.jpg"; src6="image/img3の次画像.jpg"; 設置場所は３箇所なので、<img>タグは3ヶ所のままで結構です。nameもimg1～img3。 scr1～6が上記のようになっていればonMauseは以下のようになりますよね。 img1 on＝src2 out＝src1 img2 on＝src4 out＝src3 img3 on＝src6 out＝src5 <a href="#" onMouseOver="img1.src=src2" onMouseOut="img1.src=src1"> <img name="img1" border="0" src="image/img1の元画像.jpg" style="visibility:hidden" onload="xx(this,2000)" /></a> <a href="#" onMouseOver="img2.src=src4" onMouseOut="img2.src=src3"> <img name="img2" border="0" src="image/img2の元画像.jpg" style="visibility:hidden" onload="xx(this,4000)" /></a> <a href="#" onMouseOver="img3.src=src6" onMouseOut="img3.src=src5"> <img name="img3" border="0" src="image/img3の元画像.jpg" style="visibility:hidden" onload="xx(this,6000)" /></a>
その他の回答 (4)
- arenani_sorenani
- ベストアンサー率73% (58/79)
ちょっといじりました。 こんな感じですか・・・・ <html> <head> <title></title> <script language="JavaScript"> <!-- src1="http://oshiete1.goo.ne.jp/images/goo.gif"; src2="http://www.goo.ne.jp/img/season/hikari_taxi.gif"; function xx(obj,time){ setTimeout(function(){obj.style.visibility='visible'},time); } //--> </script> <body> <table> <tr> <td> <a href="http://www.goo.ne.jp/" onMouseOver="img1.src=src2" onMouseOut="img1.src=src1"> <img name="img1" border="0" src="http://oshiete1.goo.ne.jp/images/goo.gif" style="visibility:hidden" onload="xx(this,2000)" /></a> </td> <td> <a href="http://www.goo.ne.jp/" onMouseOver="img2.src=src2" onMouseOut="img2.src=src1"> <img name="img2" border="0" src="http://oshiete1.goo.ne.jp/images/goo.gif" style="visibility:hidden" onload="xx(this,4000)" /></a> </td> <td> <a href="http://www.goo.ne.jp/" onMouseOver="img3.src=src2" onMouseOut="img3.src=src1"> <img name="img3" border="0" src="http://oshiete1.goo.ne.jp/images/goo.gif" style="visibility:hidden" onload="xx(this,6000)" /></a> </td> </tr> </table> </body> </html>
お礼
だんだん難しくなってきましたが、何となくわかります。image にnameを付けて処理するのですね。 setTimeout(function(){obj.style.visibility='visible'},time); ↑この記述はむずかしいです。 でもいろいろありがとうございさした。
補足
回答No,4のscript を実行してみました セルの中に入れる画像をそれぞれ違ったものにすると、 マウスイベントが無効になってしまいます。 src1,src2 をそれぞれ6まで指定し、name もimg6まで指定やればいいのでしょうか？
- arenani_sorenani
- ベストアンサー率73% (58/79)
以下のようにもできます。 <html> <script> function xx(obj,time){ setTimeout(function(){obj.style.visibility='visible'},time); } </script> <body> <table><tr> <td><img src="http://oshiete1.goo.ne.jp/images/goo.gif" style="visibility:hidden" onload="xx(this,2000)" /></td> <td><img src="http://oshiete1.goo.ne.jp/images/goo.gif" style="visibility:hidden" onload="xx(this,4000)" /></td> <td><img src="http://oshiete1.goo.ne.jp/images/goo.gif" style="visibility:hidden" onload="xx(this,6000)" /></td> </tr></table> </body> </html>
お礼
なるほど！ 最初にfunction xx にメソッドを書いてやり、 後はbody 内でonloadするのですね。 これだとimageにマウスイベントがつけられるかも知れません。 JavaScript辞典と格闘してみます。 本当にありがとうございます。
補足
マウスイベントの追加はコレでいいでしょうか <html> <head> <title></title> <script language="JavaScript"> <!-- function xx(obj,time){ setTimeout(function(){obj.style.visibility='visible'},time); } //--> </script> <body> <table> <tr> <td><img src="http://oshiete1.goo.ne.jp/images/goo.gif" style="visibility:hidden" onload="xx(this,2000)" /></td> <td><img src="http://oshiete1.goo.ne.jp/images/goo.gif" style="visibility:hidden" onload="xx(this,4000)" /></td> <td><img src="http://oshiete1.goo.ne.jp/images/goo.gif" style="visibility:hidden" onload="xx(this,6000)" /></td> <td><a href="#" onMouseOver = "window.document.next.src='a_2.gif'" onMouseOut = "window.document.next.src='a_1.gif'"> <img src="a_1.gif" name="next" border="0" style="visibility:hidden" onload="xx(this,8000)" /></a></td> </tr> </table> </body> </html>
- arenani_sorenani
- ベストアンサー率73% (58/79)
お察しの通り、変数 src+数字 に複数の画像を指定しておけば、 何個でも別の画像を表示できますね。 ちなみにお分かりだと思いますが「setTimeout("xx()",2000);」の2000は画像を表示するまでに待つ時間です(ミリ秒)。 これにマウスイベントや画像を交互に入れ換えたりする効果などをくわえることもできます。 その場合はimgタグにidをつけたほうが簡単になります。
- arenani_sorenani
- ベストアンサー率73% (58/79)
サンプルを書きました。 こんな動きでよいのでしょうか・・ <html> <head> <script> src1="http://oshiete1.goo.ne.jp/images/goo.gif" function start(){ setTimeout("xx()",2000); } function xx(){ td1.innerHTML="<img src="+src1+">"; setTimeout("yy()",2000); } function yy(){ td2.innerHTML="<img src="+src1+">"; setTimeout("zz()",2000); } function zz(){ td3.innerHTML="<img src="+src1+">"; } </script> </head> <body onload="start()"> <table><tr> <td id="td1"> </td> <td id="td2"> </td> <td id="td3"> </td> </tr></table> </body> </html>
お礼
サンプルありがとうございました 早速実行しました。 それぞれ違った画像を使いたい場合は、最初にsrc1="" src2="" src3="" と読みこんで置けばいいのですね 試してみたら、ちゃんと出来ました。うれしいです。 私が見たサイトのものは、時間差で表示された画像に、尚かつロールオーバーのイベントが付いていました。 body 内に記述するonMouseOver onMouseOutのタグは解るのですが、スクリプト内の記述は難しいそうですね。
お礼
識別子をそれぞれ変えてやってみていました。 詳しい説明とタグで、とてもよく納得できました。 やりたかったことが全部できました。 本当にありがとうございました。 JavaScript はとても面白いです。