※ ChatGPTを利用し、要約された質問です(原文:画像をクリックして別の画像を変えたい)
画像をクリックして別の画像を変えたい
このQ&Aのポイント
ボタン画像をクリックしたときに同一ページ内にある画像が変わるようにしたいのですが、どう修正すれば良いでしょうか。
原因として、設定した変数imageUrlが<img src="button.gif">で受け取られてしまっている可能性が考えられます。
過去ログの似た質問を調べたりしても理解できないため、どのように修正すればよいかわかりません。お願いいたします。
ボタン画像をクリックしたときに同一ページ内にある画像が変わるようにしたいのですが、下のように描くと、ボタン画像(button.gif)自身が2.pngなどの画像に変わってしまいます。
<HTML>
<HEAD>
<TITLE>スワップイメージ</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function changeImage(imageUrl){
document.images[0].src = imageUrl;
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<A HREF="#" onClick="changeImage('1.png')" ><IMG SRC="button.gif" border="0"></A>
<A HREF="#" onClick="changeImage(2.png')" ><IMG SRC="button.gif" border="0"></A>
<A HREF="#" onClick="changeImage(3.png')" ><IMG SRC="button.gif" border="0"></A>
<TABLE BORDER="0">
<TR>
<TD>ボタンを押すと下に画像が表示されます。</TD>
</TR>
<TR>
<TD><IMG SRC="1.png"></TD>
</TR>
</TABLE>
</BODY>
</HTML>
原因を私なりに考えたところ、設定した変数mageUrlをボタンを表示させるために使った<img src="button.gif">で受け取ってしまっているというのはわかりました。(確認のため <IMG SRC="1.png"> を<A HREF>~</A>より上に持ってきたら思っていた動きになりました。)
けれどそれからどう修正したらもとの順番でもちゃんと動くのかがわかりません。過去ログの似た質問も拝見したのですが、今の自分では理解できませんでした‥。すみませんがよろしくお願いいたします。
お礼
早速のご回答ありがとうございます。 document.images[0].src = imageUrl;の[0]を[3]に変えたらうまくいきました。 かなり初歩的な質問をしてしまいすみません。スクリプトの意味をきちんと把握せずにサンプルプログラムをかいつまんで作ってしまっていたので以後もっと内容を理解しながら使っていこうと反省しました。 また、名前やIDを使って試してみたらこちらも出来ました~。ためになるアドバイスありがとうございます!