• ベストアンサー

JavaScriptでボタンをクリックすると画像が変わる設定をするには？

たとえば、1.gif － 2.gif , 3.gif － 4.gif，5.gif － 6.gif,7.gif － 8.gif,9.gif － 10.gif の画像をついにしてボタンとして利用するとします。 最初に表示されるボタンは　1.gif , 3.gif ，5.gif , 7.gif , 9.gif の５つです。 JavaScriptで1.gifボタンをクリックしたら、2.gifボタンに画像が変わり、 3.gifボタンをクリックしたら、4.gifボタンに画像が変わるように（残りの画像も同様）したいと 考えています。この時、1.gif , 3.gif ，5.gif , 7.gif , 9.gifのいずれかのボタンがクリックされた 時点で、直前に変更していた 2.gif , 4.gif ，6.gif , 8.gif , 10.gifのいずれかのボタンは最初のボタン の状態に戻したいと考えています。 どのようにJavaScriptを記述すると可能なのでしょうか。 １つのボタンをクリックすると別の画像に変わる方法は色々なＨＰを参考に↓の記述でなんとかできたのですが、 複数のボタンになるとどのように修正していけばうまくいくのかわかりません。 <HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript"> <!-- imgnum=1; function changeImage(){ if(imgnum==1){ document.myimg.src="2.gif"; imgnum=2; }else if(imgnum==2){ document.myimg.src="1.gif"; imgnum=1; } } // --> </SCRIPT> </HEAD> <BODY> <CENTER> <A href="javascript:changeImage()"><IMG src="1.gif" name="myimg" border=0></A> </CENTER> </BODY> </HTML> 質問がややこしくてすみません。 方法をお分かりの方はどなたか教えてください。よろしくお願いします。

  • m_f
  • お礼率66% (28/42)

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

  • ベストアンサー
回答No.3

こんな感じでしょうかね。 <html> <head> <title></title> <script language="JavaScript"> <!-- var img = new Array( "1.gif","2.gif", "3.gif","4.gif", "5.gif","6.gif", "7.gif","8.gif", "9.gif","10.gif"); function changeImage(id){ var btn = new Array( document.btn0, document.btn1, document.btn2, document.btn3, document.btn4); for (i = 0; i < 5; i++) { if (id == i) { btn[i].src = img[i * 2 + 1]; } else { btn[i].src = img[i * 2]; } } } //--> </script> </head> <body> <a href="JavaScript:changeImage(0)"><img src="1.gif" name="btn0" border="0"></a> <a href="JavaScript:changeImage(1)"><img src="3.gif" name="btn1" border="0"></a> <a href="JavaScript:changeImage(2)"><img src="5.gif" name="btn2" border="0"></a> <a href="JavaScript:changeImage(3)"><img src="7.gif" name="btn3" border="0"></a> <a href="JavaScript:changeImage(4)"><img src="9.gif" name="btn4" border="0"></a> </body> </html>

m_f
質問者

お礼

イメージどおりに作ることができました。ありがとうございました。ボタンをクリックすることで別ページにリンクさせることも、色々試していると何とか解決ができました。今後もよろしくお願いします。

m_f
質問者

補足

イメージどおりに作ることができて本当に助かりました。実は、左右に区切られたフレームページの左側にこのボタンがあり、ボタンをクリックすると、右側に指定したHTMLファイルを表示させようと思っているのですが、上記のようにボタンを設定した上に、さらにファイルも開く設定をするのは可能なのでしょうか？<a href=～>の前に<A onClick="**.htm" target="main" style = "cursor : pointer>と記述してみるとうまくいくかと試してみたところ、ファイルが開かなかったのですが何が悪いのか原因がお分かりでありましたら、教えて頂けないでしょうか？補足として質問を追加して申し訳ありませんが、よろしくお願いします。

その他の回答 (4)

  • ittochan
  • ベストアンサー率64% (2667/4137)
回答No.5

補足です。 スクリプトコンポーネントファイル（ChangeImg.htc）は、 ANo.#2で書いたそのままで保存します。 ---この下から--- <script language="jscript"> attachEvent("onclick", event_onclick); function event_onclick() { var a; a = src; src = value; value = a; } </script> ---この上まで--- ＞<head></head>の間でよかったのでしょうか？ 他のタグは不要ですよ。

  • ittochan
  • ベストアンサー率64% (2667/4137)
回答No.4

＞スクリプトコンポーネントの入力位置は ＞<head></head>の間でよかったのでしょうか？ いやいや、別ファイルですよ。 他のページからも流用できるようにコンポーネント化する方法です。 <STYLE> .ChangeImg{behavior:url(ChangeImg.htc);} </STYLE> って記述があるでしょ？ これは classにChangeImgとあるエレメント内では、 スクリプトコンポーネントファイルの ChangeImg.htcを使ってね。と言う意味です。 ですから、 ChangeImg.htcファイルとして保存してね。

  • ittochan
  • ベストアンサー率64% (2667/4137)
回答No.2

IE限定で htmファイルは <HTML> <head> <TITLE></TITLE> <STYLE> .ChangeImg{behavior:url(ChangeImg.htc);} </STYLE> </head> </HEAD> <BODY> <P> <IMG class=ChangeImg src="1.gif" value="2.gif"> <IMG class=ChangeImg src="3.gif" value="4.gif"> <IMG class=ChangeImg src="5.gif" value="6.gif"> <IMG class=ChangeImg src="7.gif" value="8.gif"> <IMG class=ChangeImg src="9.gif" value="10.gif"> /P> </BODY> </HTML> スクリプトコンポーネント（ChangeImg.htc）は <script language="jscript"> attachEvent("onclick", event_onclick); function event_onclick() { var a; a = src; src = value; value = a; } </script> こんな感じになります。

m_f
質問者

お礼

スクリプトコンポーネントは別ファイルにするということだったのですね。素人な質問に親切にお答え頂きありがとうございました。とても勉強になりました。今後もよろしくお願いします。

m_f
質問者

補足

ご回答頂きありがとうございます。上記の方法を試してみたのですが、ボタンをクリックしても何も変化がありませんでした。初心者なので、基礎的なことを聞くようなのですが、スクリプトコンポーネントの入力位置は<head></head>の間でよかったのでしょうか？

  • ittochan
  • ベストアンサー率64% (2667/4137)
回答No.1

こんな感じはどうですか？ <HTML> <HEAD> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <TITLE></TITLE> <SCRIPT LANGUAGE=javascript> <!-- function ig1_onclick() { if (ig1.src=="img2.gif") { ig1.src="img1.gif"; } else { ig1.src="img2.gif"; } } function ig2_onclick() { if (ig2.src=="img3.gif") { ig1.src="img4.gif"; } else { ig1.src="img3.gif"; } } function ig3_onclick() { if (ig3.src=="img5.gif") { ig1.src="img6.gif"; } else { ig1.src="img5.gif"; } } function ig4_onclick() { if (ig4.src=="img7.gif") { ig1.src="img8.gif"; } else { ig1.src="img7.gif"; } } //--> </SCRIPT> </HEAD> <BODY> <P> <IMG id=ig1 src="img1.gif" LANGUAGE=javascript onclick="return ig1_onclick()"> <IMG id=ig2 src="img3.gif" LANGUAGE=javascript onclick="return ig2_onclick()"> <IMG id=ig3 src="img5.gif" LANGUAGE=javascript onclick="return ig3_onclick()"> <IMG id=ig4 src="img7.gif" LANGUAGE=javascript onclick="return ig4_onclick()"> </P> </BODY> </HTML>

m_f
質問者

補足

ご回答頂きましてありがとうございます。上記の方法をそのままコピーして試して見たのですが、私のやり方が悪いのか、１をクリックしたら２には変わるのですが、３をクリックすると４に、５をクリックすると６に、７をクリックすると８に変わらず、３をクリックすると１のボタン部分が３に変わったり、５をクリックすると１のボタン部分が５に変わったり、７をクリックすると１のボタン部分が７に変わったりしてしまい、イメージどおりにならなかったのですが、私のやり方がどこかまずかったのでしょうか？

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • JavaScriptのwindowcloseとボタンのロールオーバーの組み合わせ方

    いまHPを作成中です。 そのなかでクリックすると、指定された大きさで表示される別ウィンドウがあります。 そのウインドウに次の2つのJavaScriptを使いたいのです。 ひとつひとつなら出来るのですが、二つを組み合わせるとどう書いていいのかわかりません。 しかも、ふたつともhead内に書き込むにはどうしたらいいですか？ １、ウインドウに「閉じる」ボタンを付けたい ２、そのボタンはロールオーバー効果を使ってマウスがオーバーのときはボタンが変化するよう、別のgifを表示したい 1,2の詳しい内容です。 1<a href="javascript:window.close();"></a> 2<head> <title>ロールオーバーイメージ</title> <script language="JavaScript"> <!-- function changeImage1(){ document.myimg.src="img2.gif"; } function changeImage2(){ document.myimg.src="img1.gif"; } // --> </script> </head> <body> <p> <a href="javascript:;" onMouseOver="changeImage1()" onMouseOut="changeImage2()"><IMG src="img1.gif" name="myimg" border=0></a> </p> </body>

  • 画像クリックで画像変化を1ページに複数表示

    どのJavaScriptサイトにも記載されていなかったので、こちらでお尋ねします。どなたかご存知だったら、教えてください。 changeImageと<a href=""></a>を使って、クリックして画像を変えるっていうのをやっているのですが、同じページでの複数表示のやり方がわかりません。 それと、2つの画像を変化させて、他のアイコンを作ってそこを押すと元の画像に戻るというのは、可能でしょうか？ ４つ画像を用意して、２つまでしか画像変化できないようにさせて、取り消しアイコンで元の画像に戻す・・・ということがやりたいのですが。 今はこんな感じの記述ができています。 <SCRIPT type="text/javascript"> function changeImage() { var imgname = document.images[0].name; if(imgname == "01"){ document.images[0].src = "02.gif"; document.images[0].name = "02"; } else { document.images[0].src = "01.gif"; document.images[0].name = "01"; } } </SCRIPT> </head> <body> <a href="JavaScript:changeImage()"> <img src="01.gif" name"01" border=0></a>

  • 画像をクリックして別の画像を変えたい

    ボタン画像をクリックしたときに同一ページ内にある画像が変わるようにしたいのですが、下のように描くと、ボタン画像（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>より上に持ってきたら思っていた動きになりました。） 　けれどそれからどう修正したらもとの順番でもちゃんと動くのかがわかりません。過去ログの似た質問も拝見したのですが、今の自分では理解できませんでした‥。すみませんがよろしくお願いいたします。

  • セレクトボックスでの結果で画像を変化させるモノを同ページに複数個表示する

    セレクトボックスの結果によって画像を変化させるものを作ったのですが、これが一つのみだと動作したのですが、"同じ条件"で複数個おく方法が分かりません。 ちなみに試したものです。（一つ目すら動作しませんでした。） <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」 と「画像」の項目を増やすだけではだめなのでしょうか？ 自分でもこれじゃまずいんじゃない？とは何となく思うのですが、細かな原因が分かりません。かなりの初心者です。どうすればうまくいくのでしょうか？

  • 画像を変えるスクリプト

    <HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript"> <!-- img=new Array(); for(i=1;i<=4;i++){ img[i]=new Image(); img[i].src="img"+i+".gif"; } function changeImage(i,j){ document.images[i].src=img[j].src; } // --> </SCRIPT> </HEAD> <BODY> <CENTER> <A href="#" onMouseOver="changeImage(0,2)" onMouseOut="changeImage(0,1)"><IMG src="img1.gif" border=0></A><BR> <BR> <A href="#" onMouseOver="changeImage(1,4)" onMouseOut="changeImage(1,3)"><IMG src="img3.gif" border=0></A> </CENTER> </BODY> </HTML> マウスオーバーしたら画像が変わるスクリプトです。 質問ですがこのスクリプトでどうしてオブジェクトを作っているのでしょうか？ 普通にsrcプロパティを変更するだけではだめなのでしょうか？例えばdocument.images[i].src="img"＋j＋".gif"のようにしてiとjを変えるような 感じです。

  • javascriptについて

    javascriptに関してまだまだ初心者で困っております． 作成したいプログラムは，画像をクリックすると，クリックした画像だけが"on.gif"になり，それ以外の画像は"off.gif"となるようなプログラムです． そこで以下のようなプログラムを作成したのですが，うまく動きません． ご助言頂ければ幸いです． <html> <head> <script type="text/javascript> <!-- function changeImg(no){ for (i=1; i<3; i++){ document.image[i].src = "off.gif"; if(i==no) document.image[i].src = "on.gif"; } } //--> </script> </head> <body> <ul> <li><a href="JavaScript:changeImg(1)"><img src="on.gif" name="image[1]" /></a></li> <li><a href="JavaScript:changeImg(2)"><img src="off.gif" name="image[2]" /></a></li> </ul> </body> </html>

  • 一つのページで二つ動かすのはできないですか

    画像を次々に変えていく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>

  • input type="image"でマウスクリック画像変更がうまくいかない

    input type="image" で表示した画像を変更したいのですがうまくいきません。 <form name="form1" action="" method="POST"> <input type="image" src="A.gif" name="A" onclick="ChangeImage();"> </form> <script language="javascript"> function ChangeImage(){ document.form1.A.src="B.gif" } </script> というコードをなんですが、ボタンをクリックしても何も起こりません。 アンカータグを使わずにinputで行いたいのですがどなたかご存じないでしょうか。よろしくお願いします。

    • ベストアンサー
    • HTML
  • Javascript外部リンクの書き方（初心者）

    以下のJavascriptを外部リンクにしたいのですが、記述の仕方が分かりませんので、お教えください。 （引用元：Javascript例文辞典） <html> <head> <title>一定時間ごと画像を入れ替える（複数箇所に異なる画像［規則的なファイル名版］）</title> <script language="JavaScript"><!-- count = 0; function changeImg() { count++; count %= 4; document.btn1.src = "a" + count + ".gif"; document.btn2.src = "b" + count + ".gif"; } // --></script> </head> <body onLoad="setInterval('changeImg()',2000)"> <img src="a1.gif" name="btn1"> <img src="b1.gif" name="btn2"> </body> </html>

  • 画像をクリックして別の画像を表示させたい

    現在HPで親ページから、サブウインドウで画像を表示させるアルバムを作っています。 そのサブウインドウをクリックすると別の画像を表示させたいと思い、下記のように記述したのですが、画像がまったく変わりません。 （下記のページはalbum01です。クリックしたら album02を表示させたいと思っています。） ----------------------------------------------- HEAD部に記述 <script language="JavaScript"> <!--num=0; function change() {num++; num %= 5; document.myIMG.src = "../img/album02.jpg"; } // --></script> BODY部に記述 <body> <table width="300" border="0" cellspacing="2" cellpadding="0"> <tr> <td> <a href="javaScript:change()"> <img src="../img/album01.jpg"name="album01"border="0"></a></td> </tr> <tr> <td> <div align="center">□画像をクリックすると、次の画像も見られます□</div> </td> </tr> </table> <div align="center"></div> </body> -------------------------------------------- 写真は全部で５枚です。今後増やしていきたいと思っています。 javascriptのことはわからないので、どこがどう間違っているのかわかりません。 表示されるようにするにはどのようにしたらいいですか？ 使用OSはWin98、ブラウザはIE6.0です。 よろしくお願いします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する