- ベストアンサー
画像をフィルターを使って入れ替えたいです
再度恐れ入ります。画像を入れ替えるときに、フィルターを使いたいのです。トップページの画像１枚をもう一枚と入れ替えて、最初の一枚に戻って終わりたいのですが・・・。今のままだと２枚の画像の入れ替えが延々と繰り返すことになるので、それを１回で止めたいのです。本当に初心者な質問で申し訳ございませんが、教えていただけると助かります。どうぞよろしくお願いいたします。 <HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript"> <!-- // 画像を一定間隔で入れ替える // img0.jpg,img1.jpgなどの数字が続いたファイルを複数用意します。 num = 2; // 入れ替える画像の枚数(最初の画像も含める) nme = "img/img" // 画像のディレクトリとファイル名の数字と拡張子より前の部分 exp = "jpg" // 拡張子 cnt = 0; function changeImage() { cnt++; cnt %= num; img.filters.revealTrans.Apply(); img.src = nme + cnt + "." + exp; img.filters.revealTrans.Play(); } //--> </SCRIPT> </HEAD> <!-- 画像を入れ替える間隔(ミリ秒単位) --> <BODY bgcolor="#ffffff" onLoad="setInterval('changeImage()',5000)"> <IMG src="img/img0.jpg" name="img" border="0" style="filter:revealTrans(duration=2,transition=8)"><BR> </BODY> </HTML>
- yashiron
- お礼率86% (147/170)
- JavaScript
- 回答数5
- ありがとう数2
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
以下の3点を確認しました。 ------------------------------------------------------------- ・ IEでのフィルタ動作。 ・ 画像が3枚。 ・ Foxfire等のフィルタに対応していないブラウザ場合でも 画像だけは切り替わる。 ------------------------------------------------------------- <html> <head> <title></title> <script language="JavaScript" type="text/javascript"> <!-- // 画像を一定間隔で入れ替える // img0.jpg,img1.jpgなどの数字が続いたファイルを複数用意します。 num = 3; // 入れ替える画像の枚数(最初の画像も含める) nme = "img/img" // 画像のディレクトリとファイル名の数字と拡張子より前の部分 exp = "jpg" // 拡張子 cnt=0; function changeImage() { cnt++; cnt %= num; if (img.filters) { img.filters.revealTrans.Apply(); img.filters.revealTrans.Play(); } img.src = nme + cnt + "." + exp; if (img.src==img0_src) { clearInterval(tid); } } //--> </script> </head> <body bgcolor="#ffffff" onload="img0_src=document.img.src;tid=setInterval('changeImage()',5000)"> <img src="img/img0.jpg" name="img" border="0" style="filter: revealTrans(duration=2,transition=8)" alt=""> <br> </body> </html> -------------------------------------------------------------
その他の回答 (4)
- leap_day
- ベストアンサー率60% (338/561)
こんにちは 一応こんな感じでも出来ると思います(画像のファイル名は何でもいいです） <script type="text/javascript"><!-- window.onload=function() { Times = setInterval("imagech()",5000); } IMG = new Array("","img/img1.jpg","img/img0.jpg"); cnt = 0; function imagech() { Img = document.getElementById("img"); cnt++; Img.filters.revealTrans.Apply(); Img.src = IMG[cnt]; Img.filters.revealTrans.Play(); if(cnt == 2) clearInterval(Times); } //--></script> <img src="img/img0.jpg" id="img" border="0" style="filter:revealTrans(duration=2,transition=8)"> IMG = new Array("","","","",……,""); で登場させる画像の順番に絶対パス(または相対パス)を並べて（1つ目の""は選択されませんので空白です） 全部同じフォルダ内にあるなら画像ファイル名だけにして Img.src = IMG[cnt]; を Img.src = "./img/" + IMG[cnt]; （ " " 内はフォルダのパス）としてもいいです if(cnt == ＊) で止める枚数を決めます(ループにするならこのときにcnt=0; として戻せばいいです → if(cnt == 2) cnt = 0; ） あとfilter関係はＩＥ専用だということをご了承くださいｍ（－－）ｍ
お礼
ありがとうございます！ばっちり出来ました！！ご丁寧に解説していただき、とても勉強になりました。世の中賢くて親切な人がいるなあと本当に感謝しております。
- auty
- ベストアンサー率58% (284/486)
元のソースを生かすと、 ----------------------------------------------------- <html> <head> <title></title> <script language="JavaScript" type="text/javascript"> <!-- // 画像を一定間隔で入れ替える // img0.jpg,img1.jpgなどの数字が続いたファイルを複数用意します。 num = 2; // 入れ替える画像の枚数(最初の画像も含める) nme = "img/img" // 画像のディレクトリとファイル名の数字と拡張子より前の部分 exp = "jpg" // 拡張子 cnt=0; function changeImage() { cnt++; cnt %= num; img.filters.revealTrans.Apply(); img.src = nme + cnt + "." + exp; img.filters.revealTrans.Play(); if (img.src==img0_src) { clearInterval(tid); } } //--> </script> </head> <body bgcolor="#ffffff" onload="img0_src=document.img.src;tid=setInterval('changeImage()',5000)"> <img src="img/img0.jpg" name="img" border="0" style="filter: revealTrans(duration=2, transition=8)" alt=""> <br> </body> </html> -----------------------------------------------------
補足
できました！ありがとうございました。本当に初心者で勉強不足で申し訳ございません。さらに教えていただけるとありがたいのですが、入れ替わった後に、最初の画像に戻ることも可能でしょうか？つまり、１枚目から２枚目に変わり、１枚目に戻って終わりたいのですが・・・。よろしくお願いいたします。
補足 img0.jpg をコピーしてimg2.jpg にしてね
<HTML> <SCRIPT language="JavaScript"> cnt = 0; function changeImage() { cnt++; img.filters.revealTrans.Apply(); img.src = 'img'+cnt + '.jpg'; img.filters.revealTrans.Play(); if(cnt<2) setTimeout('changeImage()',5000); } </SCRIPT> <BODY bgcolor="#ffffff" onLoad="setTimeout('changeImage()',1000)"> <IMG src="img0.jpg" name="img" border="0" style="filter:revealTrans(duration=2,transition=8)"><BR> </BODY> </HTML>
補足
ありがとうございました。本当に初心者で恥ずかしい限りなのですが、どうもうまくいきません・・・また明日チャレンジしてみます。取り急ぎ御礼まで。
お礼
ばっちり思うように動作いたしました。本当に初心者でよく分からないのに今日明日でやらないといけなくて、焦って泣きそうでしたので、大変助かりました。心から感謝いたします。これからは時間をつくって、ちょっと一から勉強したいと思います・・・。