Javaの画像切り替え、同一ページに複数設置する
- Java初心者のため、外部のファイルで数秒ごとに画像が切り替わる動作を指定したスクリプトを読み込みたい
- 実装したい内容は、同一ページ内の複数の場所に画像を設置し、数秒ごとに画像を切り替える
- 画像切り替えのためには、外部のJavaソースを使用し、指定した間隔で画像が変わるように設定する
- ベストアンサー
Javaの画像切り替え、同一ページに複数設置する
同一ページ内の複数の場所に、外部のファイルで数秒毎に画像が切り替わる動作を指定したスクリプトを読み込ませたいのですが上手くいきません。 Java初心者で、いろいろ検索して回ったのですが、見当たらなく、ご検討よろしくお願いします。 以下、実装したい内容 <body> <img src="img/1.jpg" name="img1"> // 画像(1)（2秒毎に、(2)、(3)に画像が切り替わる） <img src="img/4.jpg" name="img4"> // 画像(4)（2秒毎に、(5)、(6)に画像が切り替わる） 以下、上記の動作をする画像を複数設置。 </body> 外部Javaソース chgCount = 0; mypic = new Array ( "img/1.jpg", "img/2.jpg", "img/3.jpg"); function imgChanger() { chgCount++; chgCount %= 3; document.img1.src = mypic[chgCount]; } setInterval("imgChanger()",2000);
- hainaina
- お礼率65% (13/20)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
なんでJavascriptカテゴリに来れるのにJavaって言ってるんだよ… 「Javaスクリプト」じゃないからね？「Javascript」っていう言語だからね？ それと、「上手くいきません」じゃなくて「どういう結果になったのか」を必ず書くこと。回答者はエスパーでも透視能力者でもないんだから、あなたの状況が正確に分からないと的確なアドバイスはできない。 今回のスクリプト、動作自体は間違いなくしている。問題はおそらく画像のパス。
関連するQ&A
- セレクトボックスでの結果で画像を変化させるモノを同ページに複数個表示する
セレクトボックスの結果によって画像を変化させるものを作ったのですが、これが一つのみだと動作したのですが、"同じ条件"で複数個おく方法が分かりません。 ちなみに試したものです。（一つ目すら動作しませんでした。） <HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript"> <!-- function changeImage(){ var imgnum = document.forms['myform'].elements['imgselect'].selectedIndex; document.images['myimg'].src = 'test01.jpg'; if(imgnum==0){ document.myimg.src="test01.jpg"; }else if(imgnum==1){ document.myimg.src="test02.jpg"; } } //--> </SCRIPT> </HEAD> <BODY> <CENTER> <!--1つめ--> <IMG src="test.jpg" name="myimg" border=0> <FORM name="myform"> <SELECT name="imgselect" onChange="changeImage(this.options[this.selectedIndex].value)"> <OPTION>イメージ1 <OPTION>イメージ2 </SELECT> </FORM> <!--２つめここから下を追加したことで動作しなくなりました--> <IMG src="test.jpg" name="myimg" border=0> <FORM name="myform"> <SELECT name="imgselect" onChange="changeImage(this.options[this.selectedIndex].value)"> <OPTION>イメージ1 <OPTION>イメージ2 </SELECT> </FORM> <!--ここまで--> </CENTER> </BODY> </HTML> ＊全く同じ条件のものを複数個並べたいのですが、ただ、「form」 と「画像」の項目を増やすだけではだめなのでしょうか？ 自分でもこれじゃまずいんじゃない？とは何となく思うのですが、細かな原因が分かりません。かなりの初心者です。どうすればうまくいくのでしょうか？
- ベストアンサー
- JavaScript
- キャプション付きの複数画像を複数ランダムに表示
タイトルの通りなのですが、キャプションなしは検索して分かったのですが、キャプション付きだと分かりません。どなたかお教えください。 参考にしたプログラムは、以下の通りです。 <HTML> <HEAD> <TITLE></TITLE> <script language="javascript"> <!--// var arrImage = new Array( "img/img0.jpg", "img/img1.jpg", "img/img2.jpg", "img/img3.jpg", "img/img4.jpg"); var arrLink = new Array( "01.html", "02.html", "03.html", "04.html", "05.html"); var arrFlag = new Array(999,999,999); function Show(){ document.imgNumber1.src = arrImage[StartRandom(0)]; document.links[0].href = arrLink[nTemp]; document.imgNumber2.src = arrImage[StartRandom(1)]; document.links[1].href = arrLink[nTemp]; document.imgNumber3.src = arrImage[StartRandom(2)]; document.links[2].href = arrLink[nTemp]; } var nTemp, nLoop; function StartRandom(nIndex){ nLoop = 0; nTemp = Math.round(Math.random()*(arrImage.length-1)); if (nIndex != 0){ for (nLoop = 0; nLoop < nIndex ; nLoop++){ if (nTemp == arrFlag[nLoop]){ StartRandom(nIndex); } } } arrFlag[nIndex] = nTemp; return nTemp; } //--> </script> </HEAD> <BODY onLoad="Show()"> <a href="01.html"><IMG name="imgNumber1" src="img/img1.jpg" width="170" height="170" border="0"></a> <a href="02.html"><IMG name="imgNumber2" src="img/img2.jpg" width="170" height="170" border="0"></a> <a href="03.html"><IMG name="imgNumber3" src="img/img3.jpg" width="170" height="170" border="0"></a> </BODY> </HTML> <BODY>から</BODY>のプログラムでなぜ表示できるかもよくわかっていません。（これについてはおいおい学ぶとして、できればとっかかりのヒントをお願いします） あと、スクリプトが利かない場合の表示は、<NOSCRIPT>～</NOSCRIPT>で間に変わりのものを書けばいいのでしょうか。 すいませんが、よろしくお願いします。
- ベストアンサー
- HTML
- 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
- 画像をフィルターを使って入れ替えたいです
再度恐れ入ります。画像を入れ替えるときに、フィルターを使いたいのです。トップページの画像１枚をもう一枚と入れ替えて、最初の一枚に戻って終わりたいのですが・・・。今のままだと２枚の画像の入れ替えが延々と繰り返すことになるので、それを１回で止めたいのです。本当に初心者な質問で申し訳ございませんが、教えていただけると助かります。どうぞよろしくお願いいたします。 <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
- 複数画像にクリッカブルマップ
当方、HTML・CSSは少しだけ分かりますが、javascriptの知識がありません。 添付の画像のように、 ひとつのHTML内に複数の画像を置き、それぞれの中に複数のクリッカブルマップ（ロールオーバーも可能） を設置したいのですがうまく動きません。。 ■javascript （動かず） if(navigator.appVersion.charAt(0) >=3){ var rolimg = new Array(); for( i = 0 ; i < 10 ; i++ ){ rolimg[i] = new Image(); } rolimg[0].src= "img/0.jpg" rolimg[1].src= "img/1.jpg" rolimg[2].src= "img/2.jpg" rolimg[3].src= "img/3.jpg" rolimg[4].src= "img/4.jpg" rolimg[5].src= "img/5.jpg" } function paintRol(dim,cnt){ if(navigator.appVersion.charAt(0) >= 3 ){ document.images[dim].src=rolimg[cnt].src; } } ■HTML <!--ひとつめの画像--> <img src="img/0.jpg" usemap="#map" name="rollover" /> map name="map" id="map"> <area shape="poly" coords="***,***,***,***,***,***,***,***,***,***,***,***" href="#" onMouseOver="paintRol('rollover',1)" onMouseOut="paintRol('rollover',0)" /> <area shape="poly" coords="***,***,***,***,***,***,***,***,***,***,***,***" href="#" onMouseOver="paintRol('rollover',2)" onMouseOut="paintRol('rollover',0)" /> <area shape="poly" coords="***,***,***,***,***,***,***,***,***,***,***,***" href="#" onMouseOver="paintRol('rollover',3)" onMouseOut="paintRol('rollover',0)" /> </map> <!--ふたつめの画像--> <img src="img/4.jpg" usemap="#map" name="rollover" /> map name="map" id="map"> <area shape="poly" coords="***,***,***,***,***,***,***,***,***,***,***,***" href="#" onMouseOver="paintRol('rollover',5)" onMouseOut="paintRol('rollover',0)" /> </map> ------ よろしくお願いします。
- 締切済み
- JavaScript
- jsでサムネイルを拡大表示 複数設置するには
自分なりにやってみているのですがどうにも解決できない状態に なってしまいましたので教えて頂けたらと思います。 サムネイル画像をクリックすると拡大画像が表示されるjsを作成し この仕組みを一つ設置するのは成功したのですが同じ仕組みを 同じページ内に複数設置するやり方が分かりません。 htmlは下記の様になっています。多少、省いております。 よろしくお願い致します。 <!-- myImg = new Array(0) myImg[0] = ["img/img-1.jpg",""] myImg[1] = ["img/img-2.jpg",""] myImg[2] = ["img/img-3.jpg",""] function chengeImg(i){ document.myPhoto.src = myImg[i][0]; } //--> <td> <img src="img/img-1.jpg"name="myPhoto" width="500" height="400" id="myPhoto" /></td> <td><img src="img/img-1.jpg" width="80" height="80"onmouseover="chengeImg(0)"/></td> <td><img src="img/img-2.jpg" width="80" height="80"onmouseover="chengeImg(1)"/></td> <td><img src="img/img-3.jpg" width="80" height="80"onmouseover="chengeImg(2)"/></td>
- 締切済み
- JavaScript
- マウスオーバーで複数の画像を非表示
マウスオーバーで画像を非表示にしています。 以下の例で、複数の画像を非表示にするにはどうすればよいでしょうか？ 例では画像はjpeg1.jpg～jpeg3.jpgの３つですが、実際には個数は毎日変化します。 <a>タグに画像の個数分のonMouseOverを書けばよいのでしょうが、もっと簡単に書く方法はないでしょうか。 PerlからHTMLを吐き出します。 <html> <a href="Javascript:" onMouseOver="jpeg1.style.display='none';" onMouseOut="jpeg1.style.display='';">非表示</a><br> <img src="./jpeg1.jpg" name="jpeg1"><br> <img src="./jpeg2.jpg" name="jpeg2"><br> <img src="./jpeg3.jpg" name="jpeg3"><br> </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
- 1箇所に複数画像を別々に配置は可能でしょうか？
出来ないのかも知れませんが、もし可能かつご存知の方いらっしゃいましたらアドバイスをお願いいたします。 行いたいことは、1つの場所に複数の画像を配置し、それぞれの配置を異なる場所へ置きたいということです。具体的には…、 <div id="hoge"> ←このコンテナ内に画像を複数配置 <img src="img001.jpg" /> ←この画像はセンタリング <img src="img002.jpg" /> ←この画像は右寄せ </div> 1つのDIV内にセンタリングと右寄せで画像を配置という事です。 positionにて相対的に試してみたのですが、中央の<img src="img001.jpg" />のサイズによって<img src="img002.jpg" />の配置が変わってしまうので断念しました。その時は <div id="hoge"> <img src="img001.jpg" /><span id="hage"><img src="img002.jpg" /></span> </div> という感じで、<span id="hage">に相対positionでした…。駄目でしたが。。 条件としてはそれぞれにリンクを定義したいので背景ではなく画像として配置したいと思います。 どなたかアドバイスのほどよろしくお願いします。
- ベストアンサー
- CSS
- フィルターを使って画像を入れ替えたいのですが、うまくいきません
今スクリプトやタグについて勉強中です。 フィルターを使って画像を入れ替えたいと思い、下のものを使ってやってみたのですが、ビルダー上ではうまく表示されているのですが、アップすると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
お礼
再度ソースを確認してみたところ、tk-is-pg_1206さんのご指摘通りパスミスでした。 つまらない質問に回答くださり、ありがとうございました。
補足
Javascriptに対して理解が出来ておらず、配慮しきれていない質問で申し訳ありませんでした。 同ページ内にJavascriptのソースを記載し、反映させて動作を確認すると、正常に反映するんですが、外部でファイルを読み込むと一枚目の画像しか読み込めず、二枚目からは画像が反映されません。 その際の画像のURLなどにもミスはありません。 動作環境はOpera11.51です。