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

2023/09/05 19:54

このQ&Aのポイント

HPに複数の画像をクリックで切替えを設置する方法について教えてください。
参考にしたサイトのスクリプトを使用して画像を切り替えてみたところ、指定の画像に切り替えることができませんでした。
どこが原因なのか教えてください。

ベストアンサー

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

2014/09/18 09:24

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に切り替わってくれません。どこがおかしいのでしょうか？

fwod
お礼率54% (47/86)

JavaScript
回答数1
ありがとう数8

みんなの回答 （1）
専門家の回答

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

ベストアンサー

Ogre7077
ベストアンサー率65% (170/258)

2014/09/18 13:38 回答No.1

img.src は場合によっては絶対パスに自動変換されますなので、一概には言えませんが直すとしたら誤: if(img.src == arguments[i]) { 正: if(img.src.indexOf(arguments[i]) > 0) {

質問者

お礼 2014/09/18 14:08

試したところ、切り替わってくれました。本当に助かりました、ありがとうございます。

関連するQ&A

クリックして変更した画像を他の画像をクリックしたとき戻すには？
以前、別で下記のような質問がありました。 ●質問－－－－－－－－－－－－－－－－－－－複数の同じ画像があるとします。そのひとつをクリックすると画像が変わるようにします。その後別の画像をクリックすると先ほどクリックした画像が初期の状態に戻るようにしたいのですが、どのような記述にすればよいのでしょうか？どなたかご教授おねがいします。－－－－－－－－－－－－－－－－－－－－－－上記の質問を受けての回答が下記のような感じで ●回答－－－－－－－－－－－－－－－－－－－ <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・・・・とたくさんある感じです。質問の内容がわかりづりかもしれませんが、どなたかご教示いただけると幸甚です。宜しくお願い申し上げます。
- ベストアンサー
- JavaScript
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画像が変わってしまいます。。。どこかおかしな部分があると思うのですがわからず途方にくれております。何方か教えて下さい。どうぞ宜しくお願いします。
- ベストアンサー
- JavaScript
マウスを当てると、サイコロの背景色を変化するように
したいです。 function senntaku(IMG){document.image1.src=IMG} document.write('<img onMouseOver="senntaku('MAPsenntaku.png');" class="simap" name="image1" src="img/MAP.png"/><img onclick="masusaikoro();" src="sai1.png" class="saikoro" name="saikoro">'); 上記のソースでサイコロの背景の画像がマウスに当たるとMAP.pngからMAPsenntaku.pngに変わるように作ったつもりですが、全然変わらない所か、サイコロ自体見えなくなりました。どう修正したら、変える事ができるのか、教えてください。 <html> <head> <link rel="stylesheet" href="daisu.css" type="text/css"/> <script src="daisu.js"></script> <title>ダイス戦略</title> </head> <body> <div id="title"> <p>あああ</p> <p><button id="btn_gamennkirikae" type="button">ああああ</button></p> </div> <div id="gamegamenn"> <p><button id="btn_hitori" type="button">あああああ</button></p> </div> <div id="map"> <ul id="sima"> <script type="text/javascript"> /*サイコロ*/function saikoro(){ var sai=new Array("sai1.png","sai2.png","sai3.png","sai4.png","sai5.png","sai6.png"); var imgs = document.querySelectorAll('.saikoro'); for (var i = 0; i < imgs.length; i ++) { var r = Math.floor(Math.random()*sai.length); imgs[i].setAttribute('src', sai[r]); } } function masusaikoro(){ var sai=new Array("sai1.png","sai2.png","sai3.png","sai4.png","sai5.png","sai6.png"); var imgs = document.querySelectorAll('.saikoro'); for (var i = 0; i < imgs.length; i ++) { var r = Math.floor(Math.random()*sai.length); imgs[i].setAttribute('src', sai[r]); } } function senntaku(IMG){document.image1.src=IMG}　＊＊＊＊ここと＊＊＊＊＊ document.write('<li>'); document.write('<img onMouseOver="senntaku('MAPsenntaku.png');" class="simap" name="image1" src="img/MAP.png"/><img onclick="masusaikoro();" src="sai1.png" class="saikoro" name="saikoro">');　　　　　　＊＊＊ここ＊＊＊＊ document.write('</li>'); </script> </ul> <div id="hyouzi"> </div> </div> <body> </html>
- ベストアンサー
- JavaScript
html内＞テーブル内に複数のjavascriptの設置方法を教えてご教授下さい・
皆様のお力をお借りし、javascriptを利用してリンク先の変更を無事解決できました。次に行おうとしたのが外部ファイル(js)にて呼び出そうと試みましたが、 jsファイル内にhtmlが入っている為、不可能だということも解かりました。 html内に複数のjavascriptを、しかもテーブル内に載せてみたのですが全てが同時に動いたり、全て動かなかったり、上のテキスト領域に記入したのに下のリンク先が変更になっていると言う様な、良く解からない状況になりました。下記が現在の状況なのですが、どなたか改善点をご教授願えませんでしょうか？・・贅沢と我侭を言えば、正解をそのまま記載していただきたいです・・・。＝＝＝ここから＝＝＝＝ <table border="1" width="300" height="100"> <tbody> <tr><td height="100"> <script> function change(){ var change=document.getElementById("change"); var tags=document.getElementsByTagName("a"); for(var i=0;i<tags.length;i++){ var url="http://aaa.bbb.ccc/"; var url2="?ddd="; var url3="eee"; var url4="&fff="; if(tags[i].href.match(url)){ tags[i].href=url+url2+url3+url4+change.value; }; } } </script> <a href="http://aaa.bbb.ccc/?ddd=eee&fff=xxxxx" target="_blank"> <img src="http://aaa.bbb.ccc/image/ddd.gif"></a> <br> <input type="text" id="change"><input type="button" value="変換" onclick="change()"> </td> </tr> </tbody> </table> <br> <table border="1" width="300" height="100"> <tbody> <tr><td height="100"> <script> function change(){ var change=document.getElementById("change"); var tags=document.getElementsByTagName("a"); for(var i=0;i<tags.length;i++){ var url="http://000.111.222/"; var url2="?333="; var url3="444"; var url4="&555="; if(tags[i].href.match(url)){ tags[i].href=url+url2+url3+url4+change.value; }; } } </script> <a href="http://000.111.222/?333=444&555=xxxxx" target="_blank"> <img src="http://000.111.222/image/333.gif"></a> <br> <input type="text" id="change"><input type="button" value="変換" onclick="change()"> </td> </tr> </tbody> </table> ＝＝＝ここまで＝＝＝＝自分の出来る範囲を超えているのは重々承知しておりますが何とか実現したい事ですので、どうか宜しくお願いします。
- ベストアンサー
- JavaScript
複数の画像をランダム（シャッフル）表示
１０枚の画像を更新するごとに重複せずランダム（シャッフル）させるにはどうしたらいいですか？理想は、JavaScriptは外部で読み込ませ、そして下記のようにHTMLでリストを使いランダム表示させたいのですが・・・ <ul> <li><a href="http://www.1/"><img src="s1.gif" /><br />あああ</a></li> <li><a href="http://www.2/"><img src="s2.gif" /><br />いいい</a></li> <li><a href="http://www.3/"><img src="s3.gif" /><br />ううう</a></li> <li><a href="http://www.4/"><img src="s4.gif" /><br />えええ</a></li> <li><a href="http://www.5/"><img src="s5.gif" /><br />おおお</a></li> <li><a href="http://www.6/"><img src="s6.gif" /><br />かかか</a></li> <li><a href="http://www.7/"><img src="s7.gif" /><br />ききき</a></li> <li><a href="http://www.8/"><img src="s8.gif" /><br />くくく</a></li> <li><a href="http://www.9/"><img src="s9.gif" /><br />けけけ</a></li> <li><a href="http://www.0/"><img src="s0.gif" /><br />こここ</a></li> </ul> 似たようなことをしているサイトがあったので参考に貼り付けておきます。 function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} }// JavaScript Document 詳しい方いましたら教えて頂けませんか？宜しくお願いします。
- 締切済み
- JavaScript
ＨＰにのせられなくてこまっています＞＜
HPに載せる為に独学でＪａｖａスクリプトに挑戦したのですがうまくいきません。希望・曜日ごとに画像・リンク・コメントが変わる。・曜日によって表示する画像の数が異なる。・同じ曜日でも画像ごとにリンク先が異なる。一応自分で考えて作ったものを下にはっておきます。 <script language=javascript>  </script> 製作しているサイトに締切りがあるため早めに解決方法が知りたいです。ご指摘・アドバイス・回答お待ちしています。
- 締切済み
- JavaScript
画像をクリックして別の画像を変えたい
ボタン画像をクリックしたときに同一ページ内にある画像が変わるようにしたいのですが、下のように描くと、ボタン画像（button.gif)自身が2.pngなどの画像に変わってしまいます。　 <HTML> <HEAD> <TITLE>スワップイメージ</TITLE> <SCRIPT LANGUAGE="JavaScript">  </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>より上に持ってきたら思っていた動きになりました。）　けれどそれからどう修正したらもとの順番でもちゃんと動くのかがわかりません。過去ログの似た質問も拝見したのですが、今の自分では理解できませんでした‥。すみませんがよろしくお願いいたします。
- ベストアンサー
- JavaScript
クリックでリンク先の切り替え
お世話になっています。基本かもしれませんが、どうしても分からないので質問させてください。クリックしたときにリンク先を変更したいのです。 <script> var i=1; function change(){ i++; if(0==i%2){ document.shop_img.src="test1.jpg"; }else{ document.shop_img.src="test2.jpg"; } } </script> クリックされた回数に応じて、画像の切り替えとリンクの切り替えをしたいのです。 <a href="http://www.test.jp"><img src="test2" name="shop_img" /></a> 画像の切り替えはOKで、あとは画像を囲っているリンク先のURLをクリックするごとに切り替えしたいのですが、どうしても分かりませんでした。分かる方、ぜひ教えてください！
- ベストアンサー
- JavaScript
多次元配列がさっぱりです。
var img = ["test01.jpg", "test02.jpg", "test03.jpg", "test04.jpg"]; var name = ["テスト1", "テスト2", "テスト3", "テスト4"]; for (var i = 0; i < img.length; i ++) { document.write('<img src="../img/' + (img[i]) + '" width="132" height="160" border="0" />' + '<br />'); for (var j = 0; j < name.length; j ++){ document.write((name[j])); } } 全然駄目です・・・画像があって、画像の下に　var name　を表示したいんですが、分かりませんでした。分かるかた、教えてください！
- ベストアンサー
- JavaScript
javascriptを使い、サムネイル表示
サンプルＨＰ⇒http://cartown.jp/detail_dt.php?car_id=1990056 のような、サムネイル画像と拡大画像を表示させる記述方法を教えてください。下記のような回答文を確認したのですが、img要素を列挙する記述やonclickイベントを結びつける記述すらわかりません。こんな超初心者ですが、よろしくお願い致します。 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ <html> <head> <meta http-equiv="Content-Language" content="ja"> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>サンプル</title> <script type="text/javascript"> function showImg(){ document.getElementById("image").src=this.src; } function setup(){ var thumbnails=document.getElementsByName("thumbnail");//name="thumbnail"とついているimg要素を列挙 for(var i=0;i<thumbnails.length;i++)thumbnails[i].onclick=showImg;//↑で列挙したものにonclickイベントを結びつける } window.onload=setup; </script> <style type="text/css"> .main td{ width:300px; height:300px; } </style> </head> <body> <table border class="main"> <tr> <td><img id="image" width="300" height="300"></td> <td> 文章 </td> </tr> </table>  <table border> <tr> <td><img name="thumbnail" src="img1.png" width="48" height="48"></td> <td><img name="thumbnail" src="img2.png" width="48" height="48"></td> <td><img name="thumbnail" src="img3.png" width="48" height="48"></td> <td><img name="thumbnail" src="img4.png" width="48" height="48"></td> <td><img name="thumbnail" src="img5.png" width="48" height="48"></td> </tr> <tr> <td><img name="thumbnail" src="img6.png" width="48" height="48"></td> <td><img name="thumbnail" src="img7.png" width="48" height="48"></td> <td><img name="thumbnail" src="img8.png" width="48" height="48"></td> <td><img name="thumbnail" src="img9.png" width="48" height="48"></td> <td><img name="thumbnail" src="img10.png" width="48" height="48"></td> </tr> </table> サムネイルクリックで拡大します。 </body> </html>
- 締切済み
- JavaScript