1つのファイルで画像をクリックしたら差し代わる方法

このQ&Aのポイント
  • JavaScriptを使用して1つのhtmlファイルで複数の箇所に異なる画像があり、クリックすると別の画像に切り替わる方法について教えてください。
  • 上記のようなソースコードを作成しましたが、うまく機能しません。どのように関数を書けば良いでしょうか?
  • JavaScript初心者です。助けていただけると幸いです。
回答を見る
  • ベストアンサー

1つのファイルで画像をクリックしたら差し代わる方法

表題のようにJavascriptで1つのhtmlファイルで複数の箇所に違う画像があり、それをクリックしたら別の画像に差し代わるということをしたいのですが、中々うまくいかずに困ってしまっています。 下記のようなソースになった場合にそれぞれ別の画像でクリックしたら違う画像に差し替えるには関数等の書き方はどのようにすれば宜しいのでしょうか。 どなたか教えてもらえますでしょうか? Javascript初心者にて失礼しますm(_ _)m 下記に途中までやったソースがあるのですが、行き詰ってしまってます。。。。。 宜しくお願い致します。m(_ _)m m(_ _)m ・・・・・・・・・・・・・ JavaScriptは下記の通りです。 //1つ目の画像に関係する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> //2つ目の画像に関係する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は下記の通りです。 <!--1つ目の画像です--> <a href="JavaScript:changeImage()"> <img src="image/index0.jpg" name="index" border="0"></a> <!--2つ目の画像です--> <a href="JavaScript:changeImg()"> <img src="image/img0.jpg" name="img" border="0"></a>

  • t3kdt
  • お礼率83% (25/30)

質問者が選んだベストアンサー

  • ベストアンサー
  • y_shimizu
  • ベストアンサー率41% (27/65)
回答No.1

現状で何がうまくいかない、とか、どんなエラーがでる、とか 情報はありますか? とりあえずは、 各scriptタグ内に定義された以下、 num, nme, exp, cnt は両方のタグ内で共通となります。 片側の関数でcntを1にした場合、もう片側の関数で利用した際には2になります。 これは想定動作ですか?

関連するQ&A

  • 画像を入れ替えたい

    こんにちは。初心者であまりよく分からないので教えていただきたいのですが・・・下記のプログラムで画像を入れ替えるというのをやりたいのですが、ずっと入れ替え続けるのではなくて、1枚目から2枚目に入れ替えるだけで終わらせたいのです。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のことで質問した者です。 下記にように記述したのですが、プレビューでは正常に表示されるのですが、アップ すると、画像が×印で表示されません。関数、若しくは、ソースの記述に問題があるのでしょうか? どなたか、検査願えませんか? --外部ファイル--(ファイル名: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を一つのページで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>

  • スクリプトの画像入替えでエラーになった!

    web画面で画像を数秒間単位で入れ替えるスクリプトを作動していたのですが、画像を2枚から3枚にしたら上手く表示されなくなりました。 全く理由が解りません。 (当初2枚の画像の時) <!-- 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> これで上手く作動していました。 ------------------------------------ (画像を3枚にした時) <!-- 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画面では、3枚目が×で表示されます。 FTPツールからサーバーへの転送も何度か行いましたが状態は変わりません。 私が理解できないのは、プレビューとかIEで表示されてWEB画面で表示されないのは、サーバーが「img2.jpg」を認識していないということではないでしょうか? その場合でも、FTPツールからサーバーへの転送をすれば良いのではないでしょうか? それでも駄目なので、精通されている方にお聞きしたくて相談しました。 宜しくお願いします。

  • 画像をフィルターを使って入れ替えたいです

    再度恐れ入ります。画像を入れ替えるときに、フィルターを使いたいのです。トップページの画像1枚をもう一枚と入れ替えて、最初の一枚に戻って終わりたいのですが・・・。今のままだと2枚の画像の入れ替えが延々と繰り返すことになるので、それを1回で止めたいのです。本当に初心者な質問で申し訳ございませんが、教えていただけると助かります。どうぞよろしくお願いいたします。 <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シートにJavaScriptを2つ使うことは出来ないのでしょうか? 画像が点滅するJavaScript と画像が入れ替わるJavaScript 両方を1シートで使用できませんか? この部分は入力できるのですが <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)"> このように並列して書くとエラーになります。 2つのavaScriptは使用できないのでしょうか? 精通されている方、居られましたら宜しくご指導願います。

  • クリックするたびに画像を変える

    初心者なんですが、下記のようなスクリプトを使っています。(これ自体はうまく動作しています。) これはページ内に一つ画像をクリックするたびに別の画像を表示させていくのですが、 二つ並べてみようと試みたのですが、どうもうまくいきません。同じスクリプトの名前なり番号を付けるなりすればいいのでしょうか? 初心者の私に出来る限り判りやすく教えて頂けませんか?よろしくお願いします。 <SCRIPT Language="JavaScript"> <!-- if(navigator.appVersion.charAt(0) >=3) { var changeImg= new Array(); changeImg[0] = new Image(); changeImg[0].src = "blank1.jpg"; changeImg[1] = new Image(); changeImg[1].src = "5.bmp"; changeImg[2] = new Image(); changeImg[2].src = "6.bmp"; changeImg[3] = new Image(); changeImg[3].src = "7.bmp"; changeImg[4] = new Image(); changeImg[4].src = "8.bmp"; var changeCount = 0; function change() { if(changeCount < changeImg.length-1) { changeCount++; } else { changeCount = 0; } document.images["change_img"].src = changeImg[changeCount].src; } } //--> </SCRIPT> 画像の部分には下記のような設定をしています。 <A HREF="javascript:change()"><IMG SRC="blank1.jpg" width="450" height="213" name="change_img" border="0"> ちなみに使用する画像は5枚か6枚で、共用してそれぞれ別の枠内に呼び出すことも可能でしょうか? 例えば1.jpgという画像を2枚並べたりという意味です。

  • フィルターを使って画像を入れ替えたいのですが、うまくいきません

    今スクリプトやタグについて勉強中です。 フィルターを使って画像を入れ替えたいと思い、下のものを使ってやってみたのですが、ビルダー上ではうまく表示されているのですが、アップすると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枚目の画像のファイル名を入れたところ ビルダー上では表示され、うまく入れ替えが出来ているのですが、アップすると入れ替えが出来ず、1枚目のみ表示されてしまいます) </BODY> </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> 以上となります。 詳しい方、ぜひ教えてくださいませ。 どうぞ宜しくお願いいたします。

  • 画像を貼り出してその後、その画像をクリックすると大きく表示されるように

    画像を貼り出してその後、その画像をクリックすると大きく表示されるようにしたいのですが、どうしたら良いかわかりません。 <html> <head> <title>画像を大きくする</title> <script type="text/javascript"> <!-- var imagetachi = 5; //イメージの切り替え function kirikae(num){ document.main.src = "big/photo" + num + ".jpg"; } // --> </script> </head> <body> <center> <script type="text/javascript"> <!-- //サムネールの書き出し for (i=1; i <=imagetachi; i++) { document.write('<img src="small/photo' + i + '.jpg" onclick="kirikae(i)">'); } // --> </script> <hr> <img src="big/photo1.jpg" name="main"> </center> </body> </html> どうやらkirikae(i)をkirikae(' + i +')にすれば良いとまではわかったのですが、なぜ(' + i +')にしないといけないのかがわかりません。 (' + i +')にすると関数の処理が document.main.src = "big/photo" + + i + + ".jpg";になってしまいませんか?? 初心者なので+ i +の意味がよくわかりません。 よろしくお願い致します。