１シートで複数のJavaScriptを使用することはできるのか？
- JavaScriptを１つのシートで複数使うことはできるのか疑問に思っています。
- 画像が点滅するJavaScriptと画像が入れ替わるJavaScriptを１シートで使用することはできるのか気になります。
- さらに、両方のJavaScriptを並列して書くとエラーになるのでしょうか？
- ベストアンサー
JavaScriptのことで教えて！
１シートにJavaScriptを２つ使うことは出来ないのでしょうか？ 画像が点滅するJavaScript と画像が入れ替わるJavaScript 両方を１シートで使用できませんか？ この部分は入力できるのですが <SCRIPT language="JavaScript"> <!-- num = 2; // 入れ替える画像の枚数(最初の画像も含める) nme = "../img/img" // 画像のディレクトリとファイル名の数字と拡張子より前の部分 exp = "jpg" // 拡張子 cnt = 0; function changeImage() { cnt++; cnt %= num; document.img.src = nme + cnt + "." + exp; } //--> 勿論、点滅のJavaScriptも記載済みです。 ところが、 <BODY onload="blink()"> <BODY bgcolor="#ffffff" onLoad="setInterval('changeImage()',1000)"> このように並列して書くとエラーになります。 ２つのavaScriptは使用できないのでしょうか？ 精通されている方、居られましたら宜しくご指導願います。
- kfjbgut
- お礼率49% (2518/5078)
- その他([技術者向] コンピューター)
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
JavaScriptコードじゃないただのHTML提示されてもわからんよ・・・。 とりあえず、そもそもJavaScriptの知識が足りてない。 ＞<body onload="blink()";setInterval('changeImage()',1030);"> ＞と書くとエラーにはなりませんが、画像が表示されません。 onload="blink()"←ここのダブルクォーテーションいらへん ＞<body onload="setInterval('changeImage(blink)',1030);"> ＞ってことですかね？ 違う。 繰り返し処理をchangeImage()に組み込んで書き直せってことだね。 setTimeout使うほうがいい気がするけど。 function changeImage() { tempId = setInterval( function(){ cnt++; cnt %= num; document.img.src = nme + cnt + "." + exp; },1000 ); } 動作確認はしてない。
その他の回答 (2)
- pasocom
- ベストアンサー率41% (3584/8637)
「点滅のJavaScriptも記載済みです。」とのこと。それがおそらく「blink()」のことですね。 でしたら、その「blink()」の中身をそのまま、「changeImage()」の中に移動して下さい。 二つ又はそれ以上の動作をしたければ、そしてそれが同じタイミングで（たとえばonloadで）動作させたければ、一つのfunctionの中にいくつでも書けば良いだけのことです。 ただ、ご質問の動作の場合、setintervalで1秒ごとに画像を切り替えるなら、この命令はfunction changeImage()の中に書いてしまわないと変なことになりそうですが。
お礼
<body onload="setInterval('changeImage(blink)',1030);"> ってことですかね？
補足
<LINK rel="stylesheet" href="css/top.css" type="text/css"> <script type="text/javascript" src="js/topmuv.js"></script> <SCRIPT language="JavaScript"> <!-- num = 2; // nme = "img/img" // exp = "jpg" // cnt = 0; function changeImage() { cnt++; cnt %= num; document.img.src = nme + cnt + "." + exp; } //--> </script></HEAD> <body onload="blink()";setInterval('changeImage()',1030);"> ・ ・ ・ <a><IMG src="src="img/img0.jpg" name="img" border="0" alt="どうして・・・"></a>
- neko-ten
- ベストアンサー率55% (1287/2335)
そもそもbody複数書いている時点でおかしい。 <body onload="blink();setInterval('changeImage()',1000);"> てかけば両方読み込むス。 （できればsetIntervalもchangeImageに含めたほうがいい気もするし、不測の場合にループ抜ける処理も入れたほうがいいけど、質問事項とは違うので・・・） 関数それぞれのコンフリクトはblinkが書いてないので不明。 オブジェクトを消したりする内容で書いてあれば、書き換え対象がタイミングでは消えたりするからエラーすることもある。 あとは変数がぶつかったりしてないかね。
お礼
<body onload="blink()";setInterval('changeImage()',1030);"> と書くとエラーにはなりませんが、画像が表示されません。
補足
<LINK rel="stylesheet" href="css/top.css" type="text/css"> <script type="text/javascript" src="js/topmuv.js"></script> <SCRIPT language="JavaScript"> <!-- num = 2; // nme = "img/img" // exp = "jpg" // cnt = 0; function changeImage() { cnt++; cnt %= num; document.img.src = nme + cnt + "." + exp; } //--> </script></HEAD> <body onload="blink()";setInterval('changeImage()',1030);"> ・ ・ ・ <a><IMG src="src="img/img0.jpg" name="img" border="0" alt="どうして・・・"></a>
関連するQ&A
- 一つのページで二つ動かすのはできないですか
画像を次々に変えていくJavaScriptを一つのページで2個使いたいのですが、二つ使うと、表示されません。これでは無理なのでしょうか？ 無理だったら、他に何かいい方法があれば教えてください。 これを使いました。よろしくお願いします。 <HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript"> <!-- num = 18; nme = "img" exp = "gif" cnt = 0; function changeImage() { cnt++; cnt %= num; document.img.src = nme + cnt + "." + exp; } //--> </SCRIPT> </HEAD> <BODY bgcolor="#ffffff" onLoad="setInterval('changeImage()',500)"> <BR><BR> <IMG src="img1.gif" name="img" border="0"> </BODY> </HTML>
- ベストアンサー
- JavaScript
- 画像を入れ替えたい
こんにちは。初心者であまりよく分からないので教えていただきたいのですが・・・下記のプログラムで画像を入れ替えるというのをやりたいのですが、ずっと入れ替え続けるのではなくて、１枚目から２枚目に入れ替えるだけで終わらせたいのです。for文を使えばいいとのかなと思うのですが、どこにforを入れたら良いのか分かりません。あるいはもっと簡単なやり方があるのでしょうか・・・。急いでやらないといけないので教えていただけたらと思います。どうぞよろしくお願いします。 <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; document.img.src = nme + cnt + "." + exp; } //--> </SCRIPT> </HEAD> <BODY bgcolor="#ffffff" onLoad="setInterval('changeImage()',1000)"> </BODY> </HTML>
- ベストアンサー
- JavaScript
- 再度、JavaScriptのことで教えて！
先程、JavaScriptのことで質問した者です。 下記にように記述したのですが、プレビューでは正常に表示されるのですが、アップ すると、画像が×印で表示されません。関数、若しくは、ソースの記述に問題があるのでしょうか？ どなたか、検査願えませんか？ --外部ファイル--（ファイル名：men.js） <!-- num = 2; nme = "img/img" exp = "jpg" cnt = 0; function changeImage() { cnt++; cnt %= num; document.img.src = nme + cnt + "." + exp; } //--> --ソース--- <script type="text/javascript" src="js/men.js"></script>
- ベストアンサー
- その他([技術者向] コンピューター)
- １つのファイルで画像をクリックしたら差し代わる方法
表題のようにJavascriptで１つのhtmlファイルで複数の箇所に違う画像があり、それをクリックしたら別の画像に差し代わるということをしたいのですが、中々うまくいかずに困ってしまっています。 下記のようなソースになった場合にそれぞれ別の画像でクリックしたら違う画像に差し替えるには関数等の書き方はどのようにすれば宜しいのでしょうか。 どなたか教えてもらえますでしょうか？ Javascript初心者にて失礼しますm(_ _)m 下記に途中までやったソースがあるのですが、行き詰ってしまってます。。。。。 宜しくお願い致します。m(_ _)m m(_ _)m ・・・・・・・・・・・・・ JavaScriptは下記の通りです。 //１つ目の画像に関係するJavaScriptです <script language="JavaScript"> num = 2; nme = "image/index"; exp = "jpg"; cnt = 0; function changeImage() { cnt++; cnt %= num; document.index.src = nme + cnt + "." + exp; } </script> //２つ目の画像に関係するJavaScriptです <script language="JavaScript"> num = 2; nme = "image/img"; exp = "jpg"; cnt = 0; function changeImg() { cnt++; cnt %= num; document.img.src = nme + cnt + "." + exp; } </script> htmlは下記の通りです。 <!--１つ目の画像です--> <a href="JavaScript:changeImage()"> <img src="image/index0.jpg" name="index" border="0"></a> <!--２つ目の画像です--> <a href="JavaScript:changeImg()"> <img src="image/img0.jpg" name="img" border="0"></a>
- ベストアンサー
- JavaScript
- 画像をフィルターを使って入れ替えたいです
再度恐れ入ります。画像を入れ替えるときに、フィルターを使いたいのです。トップページの画像１枚をもう一枚と入れ替えて、最初の一枚に戻って終わりたいのですが・・・。今のままだと２枚の画像の入れ替えが延々と繰り返すことになるので、それを１回で止めたいのです。本当に初心者な質問で申し訳ございませんが、教えていただけると助かります。どうぞよろしくお願いいたします。 <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>
- ベストアンサー
- JavaScript
- フィルターを使って画像を入れ替えたいのですが、うまくいきません
今スクリプトやタグについて勉強中です。 フィルターを使って画像を入れ替えたいと思い、下のものを使ってやってみたのですが、ビルダー上ではうまく表示されているのですが、アップすると1枚目のみ表示されず、2枚目からの表示になってしまいます。 初心者なりに色々試してはみたのですが、どうしたらいいのか、分かりません。 全くと言っていいほどの初心者なのでお助けいただければと思います。 <HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript"> <!-- // 画像を一定間隔で入れ替える // img0.jpg,img1.jpgなどの数字が続いたファイルを複数用意します。 num = 20; // 入れ替える画像の枚数(最初の画像も含める) nme = "img/img" // 画像のディレクトリとファイル名の数字と拡張子より前の部分("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)"> 画像が一定間隔で入れ替わります。<BR> 入れ替えるときの効果の種類は<A href="sample/s0801_2.html">こちら</A>を参考にして下さい。<BR><BR> <IMG src="img/img0.jpg" name="img" border="0" style="filter:revealTrans(duration=2,transition=8)"><BR>（"img/img0.jpgの部分に１枚目の画像のファイル名を入れたところ ビルダー上では表示され、うまく入れ替えが出来ているのですが、アップすると入れ替えが出来ず、1枚目のみ表示されてしまいます） </BODY> </HTML> よろしく御願いします。
- 締切済み
- JavaScript
- スクリプトの画像入替えでエラーになった！
web画面で画像を数秒間単位で入れ替えるスクリプトを作動していたのですが、画像を２枚から３枚にしたら上手く表示されなくなりました。 全く理由が解りません。 （当初２枚の画像の時） <!-- num = 2; nme = "img/img" exp = "jpg" cnt = 0; function changeImage() { cnt++; cnt %= num; document.img.src = nme + cnt + "." + exp; } //--> <body> <A href="b****.shtml"><IMG src="img/img0.jpg","img1.jpg" name="img" border="1"></A> これで上手く作動していました。 ------------------------------------ （画像を３枚にした時） <!-- num = 3; nme = "img/img" exp = "jpg" cnt = 0; function changeImage() { cnt++; cnt %= num; document.img.src = nme + cnt + "." + exp; } //--> <body> <A href="*****.shtml"><IMG src="img/img0.jpg","img1.jpg","img2.jpg" name="img" border="1"></A> この場合、プレビューとかIEでは正常に3枚の画像が入れ替わるのですが、実際のWEB画面では、３枚目が×で表示されます。 FTPツールからサーバーへの転送も何度か行いましたが状態は変わりません。 私が理解できないのは、プレビューとかIEで表示されてWEB画面で表示されないのは、サーバーが「img2.jpg」を認識していないということではないでしょうか？ その場合でも、FTPツールからサーバーへの転送をすれば良いのではないでしょうか？ それでも駄目なので、精通されている方にお聞きしたくて相談しました。 宜しくお願いします。
- 締切済み
- その他([技術者向] コンピューター)
- 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)">
- ベストアンサー
- JavaScript
- Ｙ軸回転
JavaScriptのＹ軸回転について、 http://oshiete1.goo.ne.jp/qa3189044.htmlを参考に、色々手を加えながら勉強していますが、 ここの質問と回答でもわからない事があったので質問します。 質問（1） cnt=0;の意味がわかりません 説明では、「cnt++は0.1秒ごとに１°ずつ追加していくということ」とありますが、 このcnt=0;を変更（1や100に）してもなにも変化ありませんでした。 質問（2） 質問の回答者が説明している、 (2)(3)にある、 img0ならば・・・・・・ img1ならば・・・・・・ ここでいう”imgならば・・”何の意味ですか？ imgなので、画像の事かな？とは思ってますが・・ 質問（3） <BODY onload="setInterval('rotZIMG()',100)"> この意味がわかりません。 で、この回転の動作を止めて、（「右」、「左」）のボタンを押す事で、回転させるように したいんですが・・・ 何かアドバイスがあったら宜しくお願いします。
- ベストアンサー
- 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
お礼
なるほど、一度試してみます