• ベストアンサー

クリックして変更した画像を他の画像をクリックしたとき戻すには？

以前、別で下記のような質問がありました。 ●質問－－－－－－－－－－－－－－－－－－－ 複数の同じ画像があるとします。 そのひとつをクリックすると画像が変わるようにします。 その後別の画像をクリックすると先ほどクリックした画像が初期の状態に戻るようにしたいのですが、どのような記述にすればよいのでしょうか？ どなたかご教授おねがいします。 －－－－－－－－－－－－－－－－－－－－－－ 上記の質問を受けての回答が下記のような感じで ●回答－－－－－－－－－－－－－－－－－－－ <script> function change(obj){ var orgimg="a.gif"; var newimg="b.gif"; var imgs=document.getElementsByTagName('img') for(var i=0;i<imgs.length;i++){ if(imgs[i].className==obj.className){ if(imgs[i]==obj) imgs[i].src=newimg; else imgs[i].src=orgimg; } } } </script> <img src="a.gif" class="hoge" onClick="change(this)"> <img src="a.gif" class="hoge" onClick="change(this)"> <img src="a.gif" class="hoge" onClick="change(this)"> －－－－－－－－－－－－－－－－－－－－－－ これで終わってしまっていたのですが、画像が複数のパターンある場合はどのようにすればよいでしょうか。 例えば 「a1.gif」をクリックすると「a2.gif」に変更するようにして、さらに「b1.gif」というものがあって、クリックすると「b2.gif」に変更するように設定してあるとします。 「a1.gif」をクリックして「a2.gif」になっている状態で「b1.gif」をクリックすると「a2.gif」が「a1.gif」に戻るようにするにはどのようにすればよいでしょうか。 このb1が、c1,d1,e1・・・・とたくさんある感じです。 質問の内容がわかりづりかもしれませんが、どなたかご教示いただけると幸甚です。 宜しくお願い申し上げます。

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

  • ベストアンサー
  • auty
  • ベストアンサー率58% (284/486)
回答No.6

クリックで変更したい画像（"a1.gif","a2.gif","a3.gif","b1.gif","b2.gif","b3.gif"...　）は、一箇所にまとまっているとします。 （つまりこの間には、他の画像が含まれない）。 その場合、画像を <div id="hoge_range">...</div> で囲います。 ----------------------------------------------------------------------- <div id="hoge_range"> <img src="a1.gif" class="hoge" onClick="change(this)"> <img src="a2.gif" class="hoge" onClick="change(this)"> <img src="a3.gif" class="hoge" onClick="change(this)"> </div> ----------------------------------------------------------------------- また、JavaScriptを下記のように変更します。 ----------------------------------------------------------------------- <script language="JavaScript"> <!-- var class_na = "hoge"; var img1 = new Array("a1.gif","a2.gif","a3.gif"); var img2 = new Array("b1.gif","b2.gif","b3.gif"); var flag= new Array(0,0,0); var targets= new Array(); function change(obj){ var hoge_range = document.getElementById('hoge_range'); var targets = hoge_range.getElementsByTagName('img'); for(var i=0;i<targets.length;i++){ if(targets[i]==obj && flag[i]==0){ targets[i].src=img2[i]; flag[i]=1; } else { if (flag[i]==1) { targets[i].src=img1[i]; flag[i]=0; } } } } // --> </script> ----------------------------------------------------------------------- これでやってみてください。

u51976
質問者

お礼

auty様 何度も丁寧にご回答頂き誠にありがとう御座いました。 何とか解決することができました。 本当に困っていたので、とても助かりました。 私も　もう少しjavascriptを勉強したいと思います。

その他の回答 (5)

  • auty
  • ベストアンサー率58% (284/486)
回答No.5

"a1.gif","a2.gif","a3.gif","b1.gif","b2.gif","b3.gif"...　にのみ、 　クラス属性　class="hoge" を付けるということであれば、 　if(imgs[i].className==obj.className){ を 　if(imgs[i].className=="hoge"){ に変更すればよいと思います。

u51976
質問者

お礼

またまた回答有難うございます！！だんだん理想のものに近づいてきているような気がします。 っというか全くJavascriptを理解していなくて申し訳ない感じがしてきます。 これまで「auty」様にご教示いただいた方法ですと、ページの一番前（HTMLソース上で一番最初）にある場合は動作するのですが、今回のクリックで変更したい画像（"a1.gif","a2.gif","a3.gif","b1.gif","b2.gif","b3.gif"...　）よりもHTMLソース上で前に他の画像がある場合はうまいこと動かなくなってしまっているようです。 これの解決方法はありますでしょうか。。。 何度も何度も申し訳ありませんがご教示いただけると幸甚です。 宜しくお願いします。

  • auty
  • ベストアンサー率58% (284/486)
回答No.4

[追記] 　画像の数が多い場合は、 imgs[i].src=img1[i]; flag[i]=0; の部分を if (flag[i]==1) { imgs[i].src=img1[i]; flag[i]=0; } に変更してみてください。

u51976
質問者

お礼

有難うございます。 頂いたソースで、単独でファイルを作って試してみると出来ました。有難うございます。。。 ですが。。。 私がいま制作しているサイトに組み込もうとすると出来なくなってしまいます。。。 教えていただいたソースの場合　HTMLファイル内に"a1.gif","a2.gif","a3.gif","b1.gif","b2.gif","b3.gif"以外の画像があると動作しないのでしょうか。。。

  • auty
  • ベストアンサー率58% (284/486)
回答No.3

各画像が変更されているかどうかのフラグ(flag)を記憶しておくことにしました。 また、関数changeの引数は、何がクリックされたかを示すobj一つにしてみました。 ----------------------------------------------------------------------- <head> <script language="JavaScript"> <!-- var imgs=document.getElementsByTagName('img'); var img1 = new Array("a1.gif","a2.gif","a3.gif"); var img2 = new Array("b1.gif","b2.gif","b3.gif"); var flag= new Array(0,0,0); function change(obj){ for(var i=0;i<imgs.length;i++){ if(imgs[i].className==obj.className){ if(imgs[i]==obj && flag[i]==0){ imgs[i].src=img2[i]; flag[i]=1; } else { imgs[i].src=img1[i]; flag[i]=0; } } } } // --> </script> </head> <body> <img src="a1.gif" class="hoge" onClick="change(this)"> <img src="a2.gif" class="hoge" onClick="change(this)"> <img src="a3.gif" class="hoge" onClick="change(this)"> </body> -----------------------------------------------------------------------

  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.2

もとの場所とソースをグローバルに覚えておくというのはどうでしょう？ <script> previmg=new Image(); number=0; function change(obj,img){ var imgs=document.getElementsByTagName('img'); if(previmg.src!="") imgs[number].src=previmg.src; for(var i=0;i<imgs.length;i++){ if(imgs[i].className==obj.className){ if(imgs[i]==obj){ previmg.src=obj.src; number=i; imgs[i].src=img; } } } } </script> <img src="a1.jpg" class="hoge" onClick="change(this,'a2.jpg')"> <img src="b1.jpg" class="hoge" onClick="change(this,'b2.jpg')"> <img src="c1.jpg" class="hoge" onClick="change(this,'c2.jpg')">

u51976
質問者

お礼

おお　有難うございます。 私の理想としているものに結構近づきました！！ もう一つなのですが、同じ画像を二回クリックすると元に戻る、「a2.gif」をもう一度クリックすると「a1.gif」にも戻るようにしたいのですが。。。 ご教示頂けますでしょうか。

noname#84373
noname#84373
回答No.1

<html> <body> <img id="g0" src="a1.gif" onClick=chg()> <img id="g1" src="b1.gif" onClick=chg()> <img id="g2" src="c1.gif" onClick=chg()> <img id="g3" src="d1.gif" onClick=chg()> <img id="g4" src="e1.gif" onClick=chg()> <script> function chg(){ for(i=0;i<5;i++){ obj = document.getElementById('g'+i); obj.src = obj.src.replace(/2/,'1'); } obj = event.srcElement; obj.src = obj.src.replace(/1/,'2'); } </script>

u51976
質問者

お礼

早速の回答有難うございます。 試してみます。

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

関連するQ&A

  • javascriptでMYSQLに接続したい

    下記のクリック時に画像を変更するjavascript内で、画像を変更するたびに現在の画像が何かをデータベースに値として格納したいのですがやり方が分かりません。 現在の画像がA.gifだったらデータベースに0を格納、B.gifだったら1を格納するといった仕様です。 どなたかご教授お願いできませんでしょうか？ よろしくお願いします。 <script> function change(obj){ var orgimg="B.gif"; var newimg="A.gif"; var imgs=document.getElementsByTagName('img') for(var i=0;i<imgs.length;i++){ if(imgs[i].className==obj.className){ if(imgs[i]==obj) imgs[i].src=newimg; else imgs[i].src=orgimg; } } </script>

  • onClickで指定した以外の画像も変わってしまう

    Youtubeの動画をボタンを使って切り替えるように設定しています。 ＝＝＝＝＝＝＝＝＝＝ Youtube動画表示 ＝＝＝＝＝＝＝＝＝＝ ボタン１　ボタン２　ボタン３ という感じで配列しています。 ボタン１～３は、それぞれ同じ画像で表示しています。 btn.png：OFF時 btn_on.png：ON時 Javascriptは下記のように書いています。 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ function change(obj){ var orgimg="img/btn.png"; var newimg="img/btn_on.png"; var imgs=document.getElementsByTagName('img') for(var i=0;i<imgs.length;i++){ if(imgs[i].className==obj.className){ if(imgs[i]==obj) imgs[i].src=newimg; else imgs[i].src=orgimg; } } }; ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ ボタン部分はそれぞれ下記のようにしています。 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ <a href="http://www.youtube.com/watch?v=1111111" onclick="return Obj.replaceObject(this.href);"><img src="img/btn_on.png" width="16" height="15" border="0" alt="movie 1" onClick="change(this)"></a> <a href="http://www.youtube.com/watch?v=2222222" onclick="return Obj.replaceObject(this.href);"><img src="img/btn.png" width="16" height="15" border="0" alt="movie 2" onClick="change(this)"></a> <a href="http://www.youtube.com/watch?v=3333333" onclick="return Obj.replaceObject(this.href);"><img src="img/btn.png" width="16" height="15" border="0" alt="movie 3" onClick="change(this)"></a> ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ これでちゃんとクリックしたボタンのみがON時の画像になり、それ以外はOFF時の画像に戻るのですが 同ページ上に表示している全く関係ない画像（例えばタイトル画像やバナー等）が 何故かOFF時の画像が拡大された状態のもの（タイトルやバナーで指定してあるサイズ）に切り替わってしまいます。 CSSで背景に指定してある画像やボタン設定してある画像は大丈夫なのですが 普通にHTML上に指定してあるJPGやPNG画像が変わってしまいます。。。 どこかおかしな部分があると思うのですがわからず途方にくれております。 何方か教えて下さい。どうぞ宜しくお願いします。

  • 画像のランダム表示

    初心者です。。 画像のランダム表示で、下のものを使っているのですが、 画像の上にカーソルをもっていったときに手のマークにしたいのですが、 どのようにすればできるのでしょうか？ onclickを使っているからだと思うのですが、 A href=を使えばできるのでしょうか？ よろしくお願いします。 <script type="text/javascript"> <!-- var imgs = new Array; var n = 5; var i; for(i=0;i<n;i++){ imgs[i] = new Image(); } imgs[0].src="image/001.jpg"; imgs[1].src="image/002.jpg"; imgs[2].src="image/003.jpg"; imgs[3].src="image/004.jpg"; imgs[4].src="image/005.jpg"; function disp(img){ img.src=imgs[Math.round(Math.random()*(n-1))].src; } //--> </script> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> </head> <body> <div align="center"> <img src="image/001.jpg" border="0" onclick="disp(this)"> </div> </body> </html>

  • 画像のロールオーバー

    画像のロールオーバーで下記のスクリプトを教えてもらいました。 画像aをマウスオーバーで画像a2に変わる クリックでオーバーした状態を保持（画像a2のまま） さらに、画像bをマウスオーバーで画像b2に変わり クリックでオーバーした状態を保持（画像b2のまま） そのクリック時、画像a2が画像aに変わる 実装できたのですが。 下記のソース２つテーブルが１つのhtml上にあり a～fまでg～iまで画像が分かれていて a～fをクリックし画像が変わった後 g～iをクリックするとa～fの画像が変わらないようにしたいのです。 二つのテーブルの画像を別々に考えたいのですが、できますでしょうか？ よろしくお願いします。 <html> <head> <style type="text/css"> <!-- img.group {width: 111px; height:50px;} --> </style> <script type="text/javascript"><!-- var img=['a.jpg,a2.jpg','b.jpg,b2.jpg','c.jpg,c2.jpg','d.jpg,d2.jpg','e.jpg,e2.jpg','f.jpg,f2.jpg','g.jpg,g2.jpg','h.jpg,h2.jpg','i.jpg,i2.jpg']; var elm=[]; var o_idx=-1; window.onload=function(){ var e=document.getElementsByTagName('IMG'); for (var i=0,j=0; i<e.length; i++) if (e[i].className=='group1') elm[j++]=e[i]; for (i=0; i<elm.length; i++){ elm[i].onmouseover=change(i,1); elm[i].onmouseout=change(i,0); elm[i].onclick=change(i,2); } } function change(idx,n){ return function(){ if (n > 1){ if (o_idx > -1) elm[o_idx].src=img[o_idx].split(',')[0]; elm[idx].src=img[idx].split(',')[1]; o_idx=idx; } else { if (idx != o_idx) elm[idx].src=img[idx].split(',')[n]; } };} // --></script> </head> <body> <table width="676" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="111"><img src="a.jpg" width="111" height="50" border="0" class="group1"></td> <td width="2"></td> <td width="111"><img src="b.jpg" width="111" height="50" border="0" class="group1"></td> <td width="2"></td> <td width="111"><img src="c.jpg" width="111" height="50" border="0" class="group1"></td> <td width="2"></td> <td width="111"><img src="d.jpg" width="111" height="50" border="0" class="group1"></td> <td width="2"></td> <td width="111"><img src="e.jpg" width="111" height="50" border="0" class="group1"></td> <td width="2"></td> <td width="111"><img src="f.jpg" width="111" height="50" border="0" class="group1"></td> </tr> </table> <br> <table width="333" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="111"><img src="g.jpg" width="111" height="50" border="0" class="group1"></td> <td width="2"></td> <td width="111"><img src="h.jpg" width="111" height="50" border="0" class="group1"></td> <td width="2"></td> <td width="111"><img src="i.jpg" width="111" height="50" border="0" class="group1"></td> </tr> </table> </body> </html>

  • HPに複数の画像をクリックで切替えを設置したい

    http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q12121066372 を参考に <html> <head> <script language="JavaScript"> function change(name) { var img = document.images[name]; for(var i = 1; i < arguments.length; i++) { if(img.src == arguments[i]) { img.src = ((arguments.length - 1) > i) ? arguments[i+1] : arguments[1]; break; } } } </script> </head> <body> <img src="no0.png" name="img1" onClick="change('img1','no0.png','no1.png','no2.png','no3.png','no4.png','no5.png')"><br> <img src="yes0.png" name="img1" onClick="change('img1','yes0.png','yes1.png','yes2.png','yes3.png','yes4.png','yes5.png')"><br> </body> </html> と入力してみた所、no0.pngは表示されるのですが、画像をクリックしてもno1.pngに 切り替わってくれません。どこがおかしいのでしょうか？

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

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

  • onclickで呼び出す関数の引数を・・・

    質問させていただきます。 prototype.jsを使って, function hoge(){ 　AJAXで画像ファイル名img_name[i]を取得、 取得画像が無ければimg_name[i]はnull; for(i=1;i<5;i++){ if(img_name[i]){ $("img_"+i).onclick=function(){sample(i)}; $("img_"+i).src=img_name[i]; }else{ $("img_"+i).onclick=null; $("img_"+i).src="no_img.gif"; } } } function sample(row){ 略; } という関数を作り、 htmlに <img id="img_1" src="aa.gif" onclick=""> <img id="img_2" src="bb.gif" onclick=""> というAJAXの結果で画像リストが変化し、画像がクリックできる プログラムを作りました。 しかしsampleに入ってくる引数が、どの画像をクリックしても iの最大値４になってしまいます。 予定ではクリックした画像によって引数が変わるはずなのですが・・・ どなたかご教授できる方宜しくお願い致します。

  • ロールオーバーでクロスフェードするjsで、画像名を調整したいです

    こんにちは。 http://d.hatena.ne.jp/KAZUMiX/20071017/rollover2 こちらのページにある、 クロスフェードするロールオーバーのサンプルを、 サイトに使わせていただきたいと考えています。 サンプル通りだとすぐに利用できるのですが、 オンマウス/アウト画像の名前を、 サンプル通りの○○_rollout.gifと○○_rollover.gifではなく、 ○○.gifと○○_mouseout.gifという形で実現したいのです。 さらに、画像のclass名に"crossfade"と付けたものだけに限定したいです。 （決まった文字列を画像の名前の後ろに入れずに、 特定のclassを指定したものだけにロールオーバーが適用される状態） そこで、上記サンプルのjsの一部を ...... for(var i=0;i<imgs.length;i++){ var splitname = imgs[i].src.split('.'); if((imgs[i].className == 'crossfade')&&(splitname[1])&&(imgs[i].parentNode.tagName=='A')){ var rolloverImg = document.createElement('img'); rolloverImg.src = splitname[0]+'_rollover.'+splitname[1]; var alpha = 0; ...... と調整してみたところ、ローカルでは動作するのですが、 なぜかサーバーにアップした途端動かなくなってしまいます。 (WindowsXP Firefox3です。) 何か記述に間違いがありますでしょうか？ javascriptは付け焼き刃もいいところで、 レベルの低い質問で申し訳ありませんが、 どうぞよろしくお願いします。

  • 画像と文字を同時に切り替えたい

    お世話になります。どうしてもできなくて困っています。 <script> var n=1; var msg = ["テキスト1", "テキスト2", "テキスト3", "テキスト4", "テキスト5", "テキスト6", "テキスト7"]; function change(){ i++; document.img.src="../img/test" + n+ ".jpg"; } </script> <a href="JavaScript:change();"><img src="../img/test1.jpg" name="img"/></a> <script> document.write((msg[i++])); </script> これで、画像をクリックすると、画像はどんどん切りかわっていきますがその下のテキストが切り替わりません！ずっとテキスト1が出たまんまなんです。どうしたらいいのかわかりません！分かる方、ぜひ教えてください

  • マウスオーバー、アウト時の背景画像の変更

    こんにちは。 どうしても上手く行かないので教えてください。 マウスオーバー時とクリック時に背景画像を変更したいので、下記のように書いてみました。 初め、８つあるメニューのどこかが必ず、他のメニューとは違う背景画像になっていて（クリックしたときと同じ背景画像）、それはランダムで決まっていません。 たとえばデフォルトの画像がimg1.gif、変更画像がimg2.gifだとして、メニュー1の画像がimg2.gif、その他メニューはimg1.gifで、メニュー2をマウスオーバー（img2.gifに変更）、アウトしても、メニュー1の画像はimg2.gifのままで、メニュー2をクリックして初めて、メニュー1をimg1.gifに変更したいのです。 説明が下手で申し訳ありませんが、どなたかお知恵をお貸しいただけないでしょうか。わかりづらい点ありましたら補足いたします。 よろしくお願いいたします。 ■JavaScript var imgno = 8 var imgflag = new Array() for(var i = 0 ; i < imgno ; i ++){ imgflag[i] = 0 } function ResetIMG(m_flag,num){ if(m_flag == 'cl'){ for(var i = 0 ; i < imgno ; i ++){ if(i == num){ imgflag[num] = 1 }else{ imgflag[i] = 0 } } } for(var i = 0 ; i < imgno ; i++){ if(imgflag[i] == 1){ document.getElementById("menu" + (i+1)).style.backgroundImage = "url(img1.gif)" }else if(imgflag[i] == 0){ document.getElementById("menu" + (i+1)).style.backgroundImage = "url(img2.gif)" } } if(m_flag == 'ov'){ document.getElementById("menu" + (num + 1)).style.backgroundImage = "url(img1.gif)" } } ■HTML <A onclick="ResetIMG('cl',0)" onmouseover="ResetIMG('ov',0)" onmouseout="ResetIMG()" id="menu1">メニュー１</A> <A onclick="ResetIMG('cl',1)" onmouseover="ResetIMG('ov',1)" onmouseout="ResetIMG()" id="menu2">メニュー２</A> <A onclick="ResetIMG('cl',2)" onmouseover="ResetIMG('ov',2)" onmouseout="ResetIMG()" id="menu3">メニュー３</A> <A onclick="ResetIMG('cl',3)" onmouseover="ResetIMG('ov',3)" onmouseout="ResetIMG()" id="menu4">メニュー４</A> <A onclick="ResetIMG('cl',4)" onmouseover="ResetIMG('ov',4)" onmouseout="ResetIMG()" id="menu5">メニュー５</A> <A onclick="ResetIMG('cl',5)" onmouseover="ResetIMG('ov',5)" onmouseout="ResetIMG()" id="menu6">メニュー６</A> <A onclick="ResetIMG('cl',6)" onmouseover="ResetIMG('ov',6)" onmouseout="ResetIMG()" id="menu7">メニュー７</A> <A onclick="ResetIMG('cl',7)" onmouseover="ResetIMG('ov',7)" onmouseout="ResetIMG()" id="menu8">メニュー８</A>

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する