- ベストアンサー
flash(.swf)を順番に切り替えしたいのですが・・・
3つの.swfファイルをjavascriptを使って.gifや.jpgのような（下記プログラムのような）スライドを作りたいのですが、どうよればいいのでしょうか？ 以下の.jpgを.swfに変えてみたのですが、うんともすんとも変わりません。Imageじゃなくて、そのほかにパラメータ指定とかするのでしょうか？ .flaファイルがなくなってしまって、後は、大切な.swfファイルをうまくつなぎ合わせたいのです。 お力をお貸しください。 ～略～ <script type="text/javascript"> var ww = 1; myimage = new Array(); for(i=1;i>=3;i++) { myimage[i] = new Image(); myimage[i].src = "aa"+i+".jpg"; } function FUN() { document.syasinn.src = myimage[ww].src; ww++; if(ww>3) { ww = 1; } setTimeout("FUN()",20000); } </script></head> <body> <img src="aa1.jpg" name="syasinn" width="300" height="200"> </body> ってな感じで、flashを入れ替えたときには <img>タグを<embed>に変えて、wmode=transparentを追加してみたのですが、だめでした。 助けてください！
- gonmo
- お礼率45% (5/11)
- Flash
- 回答数2
- ありがとう数8
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
インラインフレームにFlashムービー (swf)を貼付けたHTMLテキストを入れ替える10秒。 1.swfを1.htmlに 2.swf 2.html a.swf a.htmlとして <script Language="JavaScript" > <!-- count = 0; fName = new Array("1","2","a"); function changeIFrame() { count++; count %= 3; homeFrame.location.href= fName[count] + ".html" ; } // -- ></script > <body onLoad="setInterval('changeIFrame()',10000)" > <iframe src="1.html" width="500" height="350" name="homeFrame" > </iframe > ダイナミックにFlashムービー (swf)を入れ替える10秒。 Mac IE は落ちる。(バグみたいなんだけど。) <script Language="JavaScript"> <!-- count = 0; swfName = new Array("1.swf","2.swf","a.swf"); function changeSWF() { count++; count %= 3; swfTag = '<embed src="'+swfName[count]+'" width="500" height="340">'; document.getElementById("myMovie").innerHTML = swfTag; } // --></script> <body onLoad="setInterval('changeSWF()',10000)"> <div id="myMovie"> <embed src="1.swf" width="500" height="340"> </div> 直接フラッシュを入れ替えるとMacのIEは落ちるのでインラインフレームの方が良いけど。FF、IE、NN、Safari確認済み。
その他の回答 (1)
JavaScript不慣れな物でちゃんと回答できません。 ご了承下さい。 ～２行目～ var ww = 1; は， var ww = 2; にされた方がスムーズに流れると思います。 ～４行目～ for(i=1;i>=3;i++) は， for(i=1;i<=3;i++) だと思います。不等号が逆です。 あと function FUN() を最初に実行させるものが欠けているので， <body>内に <form> <input type="button" value="スタート" onclick="FUN()"> </form> などで初動を補うか，windowのオープン時にFUN()を実行させるスクリプトを補うと動きます。 って，これはJPEGが上手く動く話です… SWFの話ですよね。 myimage[i] = new Image(); この時点で，SWFではないのでSWFは除外されると思います。 そこで案ですが， インラインフレーム内にSWFの貼り付いたHTMLを表示させて，その表示されているHTMLごと違うSWFの貼り付いたHTMLにlocation.href？するのはどうでしょうか？ でもインラインフレームを，一定時間ごとに入れ替えるJavaScriptがすみませんがわかりません。 Flashの loadMovie で外部のSWFを入れ替える方法ならわかるのですが，JavaScriptは今ひとつわかっていないのです。 お急ぎであればインラインフレームを使うのが良いかもしれないと思いまして，書かせていただきました。
関連するQ&A
- いくつか用意したフラッシュ（.swfファイル）を切り替え表示したい
フラッシュで作成した.swfファイルをいくつか用意し、ホームページ上で切り替わるように表示したいのですが、どなたか詳しい方、教えていただけないでしょうか？ 画像の切り替えのソース（以下----部分）を利用してみたのですが、.jpgの部分を.swfに置き換えても、上手く表示されませんでした。 具体的に、ソースを記述していただけると、大変うれしいです。 都合のいい質問ですいません。 よろしくお願いします。 ------------------------------------------- <html> <head> <title></title> <script language="JavaScript"> <!-- var cnt = 0; var dat = new Array("img1.jpg","img2.jpg","img3.jpg","img4.jpg"); prLdImg= new Array(); for (i=0; i<dat.length; i++){ prLdImg[i] = new Image(); prLdImg[i].src = dat[i]; } function nextImg(){ var obj = window.document.all('myImg'); if(timerID){clearTimeout(timerID);} cnt++; cnt %= dat.length; obj.filters.revealTrans.Apply(); obj.src = dat[cnt]; obj.filters.revealTrans.Play(); var timerID = setTimeout("nextImg()",3000); } // --></script> </head> <body> <img id="myImg" src="img1.jpg" style="filter:revealTrans(duration=2,transition=12)" onClick="nextImg()"> </body> </html> -------------------------------------------
- ベストアンサー
- JavaScript
- javascriptで画像をテーブルに出力する方法
javascriptで定期的に入れ替えている画像をテーブルに出力（表示）する方法を教えてください。 <html> <head> <script language="JavaScript"><!-- myImageCnt = 4; myImage = new Array( "img0.jpg", "img1.jpg", "img2.jpg", "img3.jpg" ); myNowCnt = 0; function myChange(){ if (myNowCnt == myImageCnt-1){ myNowCnt=0; }else{ myNowCnt++; } document.myFormImg.src = myImage[myNowCnt]; setTimeout( "myChange()" ,5000 ); } // --></script> <img src="img0.jpg" width="200" height="200" name="myFormImg" /> <script language="JavaScript"><!-- myChange(); // --></script> </head> </html>
- ベストアンサー
- JavaScript
- 2箇所に設定したスライドショー、1箇所しか動かない
こんにちは、JavaScript超初心者です。 スライドショーを2箇所に設定したのですが、 1箇所しか動きません。ソースを見ていただき、 アドバイスを頂けると助かります。 よろしくお願い致します。 <BODY onLoad="slideshow()"> <TABLE WIDTH="" BORDER="" CELLSPACING="" CELLPADDING=""> <TBODY> <TR> <TD WIDTH="" HEIGHT=""> <IMG SRC="akaemi.jpg" ID="img1" WIDTH="" HEIGHT=""> </TD> <SCRIPT LANGUAGE="JavaScript"> <!-- var i=1; var j=1; picture=new Array(); for(i=1; i<=4; i++){ picture[i] = new Image(); }; picture[1].src = "akaemi.jpg"; picture[2].src = "noristop2.jpg"; picture[3].src = "ume.jpg"; picture[4].src = "mizuba.jpg"; function slideshow(){ img1.src= picture[j].src; j++; if(j>=5){ j=1 }; setTimeout("slideshow()",2500); } //--> </SCRIPT> <TD WIDTH="" HEIGHT=""> <IMG SRC="tyou1.jpg" ID="img2" WIDTH="" HEIGHT=""></TD> <SCRIPT LANGUAGE="JavaScript"> <!-- var i=5; var j=5; photo=new Array(); for(i=5; i<=8; i++){ photo[i] = new Image(); }; photo[5].src = "tyou1.jpg"; photo[6].src = "tyou2.jpg"; photo[7].src = "tyou3.jpg"; photo[8].src = "tyou4.jpg"; function slideshow(){ img2.src= photo[j].src; j++; if(j>=9){ j=5 }; setTimeout("slideshow()",2500); } //--> </SCRIPT> </TR> </TBODY> </TABLE> </BODY>
- ベストアンサー
- JavaScript
- html内かscript内で画像出力。どちらが軽い
ホームページの読み込みは、画像を使えば使うほど重くなってしまいます。 下記コードでは、(1)と(2)で1.jpg～5.jpgの画像をページに出力しています。 (1)はHTMLに、(2)はscript内に、 (1)と(2)では(2)の方がhtmlに<img src=".jpg" width="800" height="300"/> と書かなかった分、ページが重くならない、ということになりますか？ <html> <head> <title>HTML上に直接imgを出力した場合</title> </head> <body> <img src="1.jpg" width="800" height="300"/> <img src="2.jpg" width="800" height="300"/> <img src="3.jpg" width="800" height="300"/> <img src="4.jpg" width="800" height="300"/> <img src="5.jpg" width="800" height="300"/> </body> </html> <html> <head> <title>HTML上にはimgを出力せず、script内でimgを出力した場合</title> <script language="JavaScript"> var imgSanple = new Array( "1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg"); var randomSelect = Math.floor((Math.random() * 100)) % imgSanple.length; var i = "<img src='"+imgSanple[randomSelect]+"' width='800' height='300'>"; document.write(i); // --> </script> </head> <body> <noscript> <img src="1.jpg" width="800" height="300"> </noscript> </body> </html>
- ベストアンサー
- JavaScript
- javascriptで画像をランダム表示させたい
javascriptで画像をランダム表示させたいと思い、下記ソースを記述しました。 下記ソースでは、画像をランダムに1枚ずつ表示するようになっています。 今回、1枚ずつではなく、50枚ある画像を10枚ずつランダムに表示させたいと思っています。下記ソースから修整するにはどのような考え方になるのか教えていただけませんか？ 単純に、 "img/1.jpg", の部分を "img/1.jpg,img/2.jpg,img/3.jpg,img/4.jpg,img/5.jpg", としてみたのですが違うみたいですし、、。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>20110720test</title> </head> <body> <script language="JavaScript"><!-- myImageCnt = 5; myImage = new Array( "img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg", "img/5.jpg" ) myRnd = Math.floor(Math.random()*myImageCnt); document.write("<img src='",myImage[myRnd],"' border='0' >"); // --></script> </body> </html>
- ベストアンサー
- JavaScript
- onMouseOverで変える位置
お世話になります。 長文失礼します。 <html> <head> <title>ページのタイトル名</title> <SCRIPT LANGUAGE="JavaScript"> <!-- movimg=new Array() movimg[0] = new Image();movimg[0].src='img/img-01-206.jpg'; movimg[1] = new Image();movimg[1].src='img/img-01-208.jpg'; movimg[2] = new Image();movimg[2].src='img/img-01-213.jpg'; function changImg1(imgNoA,imgNoB) { document.images[imgNoA].src=movimg[imgNoB].src; }; <!----> </SCRIPT> </head> <body> <img src="img/img-01-01.jpg" width="300" height="225">--(1) <img src="img/img-01-208.jpg" width="300" height="225">--(2) <BR> <a href="javascript:function voi(){};voi()" onMouseOver="changImg1(0,0);"> <IMG src="img/img-01-206.jpg" border="0"></a> <a href="javascript:function voi(){};voi()" onMouseOver="changImg1(0,1);"> <img src="img/img-01-208.jpg" border="0"></a> <A href="javascript:function voi(){};voi()" onMouseOver="changImg1(0,2);"> <IMG src="img/img-01-213.jpg" border="0"></A> </body> </html> という風にonMouseOverで画像を変えているようにしているのですが、 この場合(1)の画像がかわりますよね。 これで(2)の画像を変えるようにするにはどうすればいいでしょうか？ 参考になるHPなどでも構いませんのでよろしくお願いします。
- ベストアンサー
- JavaScript
- ページ更新の度に変わる画像を上部と下部の中央に表示させるには？
アフィリエイトをやっておりまして、ページを表示するたびにバナーが変わるようにしたいと思っております。Googleで検索しましたところ下のようなJavaScriptを使うことが分かりました。ですがこれは＜head＞と＜/head＞の間に書かなければなりませんよね？これをページ上部中央と、また下部中央に表示させたいのですが、何を加えればよろしいのでしょうか。また、各画像にリンクをつけるにはどのようにすればよろしいのでしょうか。よろしくおねがいします。 <SCRIPT LANGUAGE = "JavaScript"> myImageCnt = 15; myImage = new Array( "01.jpg", (途中省略) "15.jpg"); myRnd = Math.floor(Math.random()*myImageCnt); document.write("<img src='",myImage[myRnd],"' border='0' >"); </SCRIPT>
- ベストアンサー
- JavaScript
- 画像クリックでウインドウを閉じたいのですが・・・
こんにちは。JavaScriptはwebサイトから頂いて コピーして使うだけの理解力です。どうぞよろしくお願いします。 フォトアルバムを作っていまして、画像をクリックするごとに 画像が入れ替わるところまではできたのですが、 それですと延々と続いてしまいますので、最後の画像で小窓ごと 閉じてしまいたいのですが、どのようなタグになりますでしょうか？ HEADに <SCRIPT LANGUAGE="JavaScript"> <!--// img = new Array("http://www5b.biglobe.ne.jp/○○.jpg","http://www5b.biglobe.ne.jp/○○2.jpg","http://www5b.biglobe.ne.jp/○○3.jpg"); i=0; function myChange(){ i++; i %=img.length; document.my_imgchange.src = img[i]; } // --> </SCRIPT> bodyに <a href="JavaScript:myChange()"><img src="http://www5b.biglobe.ne.jp/○○.jpg" border="0" name="my_imgchange"> と入れています。 例えば3枚目の画像をクリックした時に、また1枚目の画像に戻るのではなくて、 小窓ごと閉じてしまうにはどのようなタグをどこへ埋め込めばよろしいでしょうか？ 色々試してみましたがうまくいきませんでした。 どなたか力をお貸しください。どうぞよろしくお願い致します。
- ベストアンサー
- JavaScript
- スワップイメージのフェード方法を教えてください
はじめまして。 スワップイメージを、あるサイトを参考に作ってみました。 それにフェードイン/フェードアウトを追加したいのですが、いろいろと試してみましたができません。 JavaScriptは全く分からず、困っています。 お助けください。お願いします。 ちなみに以下がスワップイメージのソースです。 image画面に表示する際、フェードイン/アウトを追加してもらえると助かります。 <HEAD> <script language="JavaScript"> <!-- Img = new Array() Img[0]="img/image1.jpg" Img[1]="img/image2.jpg" Img[2]="img/image3.jpg" AImgs = new Array() for (i=0 ; i<Img.length ; i++){ AImgs[i] = new Image() AImgs[i].src = Img[i] } function Swap(a,b){ a=a.name document.images[a].src = Img[b] } //--> </script> </HEAD> <BODY> <TABLE> <TR> <TD><IMG src="img/image1.jpg" name="image"></TD> </TR> <TR> <TD><A href="#" onmouseover="Swap(image,1)" onmouseout="Swap(image,0)"><img src="img/image2.jpg"></A></TD> <TD><A href="#" onmouseover="Swap(image,2)" onmouseout="Swap(image,0)"><img src="img/image3.jpg" ></A></TD> </TR> </TABLE> </BODY>
- ベストアンサー
- JavaScript
- javascriptを使って画像を切り替える
javascriptを使って画像（id="chengeImg"）を切り替えたいと思っています。 画像はsamp0.jpg～samp4.jpgの計5枚 ただ、問題があって、 画像によって移り替わる時間を変えたいんです。（一定ではない） setTimeoutの引数(time)と画像を、どう結びつければよいのかが 分からず困っています。 それぞれ、 画像0の時は5000ミリ秒 画像1の時は4000ミリ秒 画像2の時は3000ミリ秒 … と移り変わる速度を変えたいのです。 一応、timeは配列がいいのかと配列にしてみました それが良いのかどうかも定かではないのですが… どのようにすれば、時間が一定でない画像切り替えが可能になるでしょうか？ スクリプトを詳しく教えていただけると、ありがたいです。 以下、javascriptの一部を記します。 【js】ファイル(imagechange.js)------ window.onload=anime; var img=new Array(5); img[0]=new Image(); img[1]=new Image(); img[2]=new Image(); img[3]=new Image(); img[4]=new Image(); img[0].src="samp0.jpg"; img[1].src="samp1.jpg"; img[2].src="samp2.jpg"; img[3].src="samp3.jpg"; img[4].src="samp4.jpg"; //画像枚数 var num=0; //時間制御 time = new Array(5000, 4000, 3000, 3000, 3000); function anime(){ var ch = document.getElementById("changeImg"); ch.src=img[num].src; if(num<4){ num++; }else{ num=0; } setTimeout("anime()",time); } 【html】ファイル-------- <head> <title>画像切り替え</title> <script type="text/javascript" src="imagechange.js"</script> </head> <body> <p><img src="samp0.jpg" width="700" height="200" id="chengeImg"></p> </body> </html> 以上となります。 詳しい方、ぜひ教えてくださいませ。 どうぞ宜しくお願いいたします。
- ベストアンサー
- JavaScript
