画像のランダム表示、及び画像毎のリンク設定に関して
- 画像のランダム表示と画像毎のリンク設定について質問します。サムネール画像が100個あり、各画像に対して個別のリンクを設定したいです。
- 過去の質問を参考にし、画像のランダム表示を実現しました。ランダム表示するためのソースコードとサムネール画像の準備方法について詳しく説明しました。
- さらに、各サムネール画像にリンク先を設定したいです。例えば、image0000.jpgには./0000.htmlへのリンクを設定したいです。最終的には100個以上のサムネール画像とリンク先があるため、リンク先を別ファイルで管理する方法を教えていただけると助かります。
- ベストアンサー
画像のランダム表示、及び画像毎のリンク設定に関して
こんにちは。 サムネールの画像が、最終的には100個位出来ます。個々のサムネール画像毎にリンクを設定したいと思います。 サムネール画像をダブらずランダムに表示する方法は、過去の質問を拝見して実現出来ました。 下記の質問が参考なりました。 http://oshiete1.goo.ne.jp/qa716071.html 過去の質問のとおり、下記のソースをまねて画像のランダム表示は可能になりました。基本的に上記質問のソースとほぼ同じ内容になります。 <html> <head> <title>ランダム表示</title> <script type="text/javascript"> <!-- NoMem = new Array(); function RndmNo(n){ x=Math.floor(Math.random()*29); if (NoMem.length){ for (j=0; j<NoMem.length; j++){ if (NoMem[j]==x){ RndmNo(n);} } } x=new String(x); if (x.length==1){ x="000"+x;} else if (x.length==2){ x="00"+x;} else if (x.length==3){ x="0"+x;} NoMem[n]=x; } for (k=0; k<3; k++){ RndmNo(k); } RndImg= new Array(); for (i=0; i<3; i++){ RndImg[i]= new Image(); RndImg[i].src="images/image"+NoMem[i]+".jpg"; } function ImgDisp(){ document.images["imgs0"].src=RndImg[0].src; document.images["imgs1"].src=RndImg[1].src; document.images["imgs2"].src=RndImg[2].src; } window.onload=ImgDisp; //--> </script> </head> <body> <img src="*" name="imgs0"><br> <img src="*" name="imgs1"><br> <img src="*" name="imgs2"> </body> </html> 画像は、images と言うフォルダを作り、フォルダ内に、image0000.jpg から image0019.jpg の画像を20個用意する事で、ランダムにサムネール画像を表示出来るようになりました。 希望として、サムネール画像毎にリンク先を設定したいと思っています。 イメージとして、ランダムに表示するバナー広告みたくしたいと思います。 サムネール画像とリンク先とは具体的に。 image0000.jpg が表示されたら、同じサイト内に ./0000.html へリンクを張れるようにしたいと思います。 また、最終的にサムネール画像は100個近くになり、リンク先もサムネール画像と同じ数になりますので、リンク先は別ファイルで管理出来るようになれば嬉しく思います。 アドバイスか、ヒントを頂ければと思います。
- nori_007
- お礼率75% (145/192)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
補足のご質問への返答です！ 壊れた画像３つというのは、正常にランダムで３つ画像が表示されていて、他に３つの表示されない画像が存在すると言う状態でしょうか。 ImgDisp()の最後にある document.body.appendChildは直接Body内に画像を書き出すので、元々ある<img>タグは不要になります。 例えば書き出した居場所があるなら <span id="kokonikakitai"></span> こんなタグを用意しておいて、 document.body.appendChild(elementA); この部分を document.getElementById('kokonikakitai').appendChild(elementA); こんな風に書き換えると任意の場所に書き出せたりします。 元々ある画像は存在させておきたい！なんて場合は、返答に書いた document.images["imgs" + i].parentNode.replaceChild(elementA, document.images["imgs" + i]); の処理にすれば元々の画像を書き換えてくれると思います。 そうではなく、ランダムの画像が表示されない場合はどっかおかしいかも知れません。 画像を右クリックしてプロパティを見て、画像のURLからどこが問題なのか判断できるんじゃないかな？と思います。
その他の回答 (1)
- みずの（@mizuno3）
- ベストアンサー率73% (192/263)
外部ファイル var randURL = { '0000':'http://domain/path/filename', '0001':'http://domain/path/filename', '0002':'http://domain/path/filename' }; こんな感じ。 ファイル名を例えば randomurl.jsにする。 <script type="text/javascript" src="http://domain/path/randomurl.js"></script> で読み込みます。 書き出しの処理は今のままでやるなら以下でしょうか。 function ImgDisp(){ document.images["imgs0"].src=RndImg[0].src; document.images["imgs1"].src=RndImg[1].src; document.images["imgs2"].src=RndImg[2].src; document.images["imgs0"].outerHTML = '<a href="' + randURL[NoMem[0]] + '">' + document.images["imgs0"].outerHTML + '</a>'; document.images["imgs1"].outerHTML = '<a href="' + randURL[NoMem[1]] + '">' + document.images["imgs1"].outerHTML + '</a>'; document.images["imgs2"].outerHTML = '<a href="' + randURL[NoMem[2]] + '">' + document.images["imgs2"].outerHTML + '</a>'; } 少し変えると以下。 function ImgDisp(){ for (var i = 0; i < 3; i++) { var elementA = document.createElement("a"); elementA.href = randURL[NoMem[i]]; elementA.appendChild(RndImg[i]); document.body.appendChild(elementA); } } 元々あるImgと差し替えたい場合は document.body.appendChild(elementA);の部分を document.images["imgs" + i].parentNode.replaceChild(elementA, document.images["imgs" + i]); に変えると良いかも知れません。
お礼
mizuno3 様 アドバイスをありがとうございました。 アドバイスの通りに修正するこで、希望通りのことが出来てとても感謝いたします。 ただ、下記の記述の部分ですが、function ImgDisp() の記述が膨大になってしまうと思います。 function ImgDisp(){ document.images["imgs0"].src=RndImg[0].src; document.images["imgs1"].src=RndImg[1].src; document.images["imgs2"].src=RndImg[2].src; document.images["imgs0"].outerHTML = '<a href="' + randURL[NoMem[0]] + '">' + document.images["imgs0"].outerHTML + '</a>'; document.images["imgs1"].outerHTML = '<a href="' + randURL[NoMem[1]] + '">' + document.images["imgs1"].outerHTML + '</a>'; document.images["imgs2"].outerHTML = '<a href="' + randURL[NoMem[2]] + '">' + document.images["imgs2"].outerHTML + '</a>'; 多分「少し変えると以下。」は、スクリプトの記述が膨大になるのを防ぐ為の記述と理解しました。 後は補足に質問します。
補足
続きの質問をさせて頂きます。 function ImgDisp(){ の項目を以下の通りに書き換えました。 function ImgDisp(){ for (var i = 0; i < 3; i++) { var elementA = document.createElement("a"); elementA.href = randURL[NoMem[i]]; elementA.appendChild(RndImg[i]); document.body.appendChild(elementA); } } 書き換えた結果、サムネール画像がランダムに表示し、画像毎のリンクも問題なく、スクリプトの記述も短くなり、是非とも利用させて頂きたいと思います。 ただ、書き換えるとブラウザ上に画像が表示出来ない時に表示される、壊れた画像のアイコンが3個表示されています。 何が問題になっているのか、アドバスを頂ければとても嬉しく思います。 追加の質問で申し訳ありません。
関連するQ&A
- ランダム表示とリンクの貼り付け
数百の画像を、ランダムにダブらないで表示させるのはできたのですが （画像名は整理しやすい0000.jpg～0100.jpgとしました） <script type="text/javascript"><!-- x=Math.floor(Math.random()*100); x=new String(x); if (x.length==1){ x="000"+x;} else if (x.length==2){ x="00"+x;} else if (x.length==3){ x="0"+x;} RndImg= new Image(); RndImg.src="images/image"+x+".jpg"; NoMem[n]=x;} //↑これって同じ画像が重複しないように。の意味でいいんですか？ function ImgDisp(){ document.images["imgs0"].src=RndImg.src; } window.onload=ImgDisp; //--></script> <body> <img src="*" name="imgs0"> </body> 一つ一つの画像にそれぞれリンクを貼りたいと思います。 どこに何を入れたらいいでしょうか？ それと ランダムにする画像を３つくらい並べたいのですが <img src="*" name="imgs0"> だと１つしかランダムにならずに、 あとの２つは画像が表示されません。 何を変えたらいいでしょうか？ よろしくお願いします。
- ベストアンサー
- JavaScript
- こちらの質問を参考に同じ様に画像をランダムするものを作りました。
こちらの質問を参考に同じ様に画像をランダムするものを作りました。 http://okwave.jp/qa/q716071.html No.3の回答を参考に一緒のものを作り、正常に動作しております。 ここからさらに、画像に合わせたリンク先へ飛ばしたいのですが （0.jpg→0.html 1.jpg→1.html 2.jpg→2.html の様に） どう手を加えればいいでしょうか？アドバイスよろしくお願いします。 【以下javascriptの部分】 <script type="text/javascript"><!-- NoMem = new Array(); function RndmNo(n){ x=Math.floor(Math.random()*100);//「Math.random()*100」の"100"は、用意している画像ファイルの枚数を指定 if (NoMem.length){ for (j=0; j<NoMem.length; j++){ if (NoMem[j]==x){ RndmNo();} } } NoMem[n]=x; } for (k=0; k<3; k++){ RndmNo(k); } //以上、乱数を生成して配列に格納。 RndImg= new Array(); for (i=0; i<3; i++){ RndImg[i]= new Image(); RndImg[i].src="images/image"+NoMem[i]+".jpg"; //「"images/image"」には画像ファイルへのパスの共通部分を、「".jpg"」には画像ファイルに共通の拡張子を入れます } //イメージオブジェクトとして表示する画像を取得 function ImgDisp(){ document.images["imgs0"].src=RndImg[0].src; document.images["imgs1"].src=RndImg[1].src; document.images["imgs2"].src=RndImg[2].src; } window.onload=ImgDisp; //--></script>
- 締切済み
- JavaScript
- 画像のランダム表示
初心者です。。 画像のランダム表示で、下のものを使っているのですが、 画像の上にカーソルをもっていったときに手のマークにしたいのですが、 どのようにすればできるのでしょうか？ 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>
- ベストアンサー
- JavaScript
- javaScriptでリンク画像のランダム更新表示
画像をランダム表示する方法はわかったのですが、 各画像にリンク設定したいのと、 各画像の大きさをCSSのwidthやhighのように調整する方法をご教授ください。 <html> <body> <script type="text/javascript"> <!-- var imgURL = ["./images/1.jpg", "./images/2.jpg", "./images/3.jpg"]; var n = Math.floor(Math.random() * imgURL.length); document.write('<img src="'+imgURL[n]+'">'); // --></script> </body> </html>
- 締切済み
- JavaScript
- 複数枚画像を表示して一定時間で切り替える方法
画像を表示して一定時間で切り替える方法は別ページに記載されているものをみて出来たのですが、最初に複数枚表示してて、その画像を定時間で切り替えたいのですがご教授願います。 以下別質問で見つけたもの <!-- これを画像を張りたい位置に挿入。<body>～</body>内 --> <script type="text/javascript"> /* 設定部分 */ var interval = 3000; //切り替わる時間（1000=1秒） var imgs = new Array(); var hrefs = new Array(); imgs[0] = new Image(); imgs[0].src = "http://www.xxxxx.net/images/img-main/pake/013.jpg"; hrefs[0] = "http://www.xxxxx.net/moviepages/130923_707_01/index.html"; imgs[1] = new Image(); imgs[1].src = "http://www.xxxxx.net/images/img-main/pake/014.jpg"; hrefs[1] = "http://www.xxxxx.net/moviepages/130906_701_01/index.html"; imgs[2] = new Image(); imgs[2].src = "http://www.xxxxx.net/images/img-main/pake/015.jpg"; hrefs[2] = "http://www.xxxxx.net/moviepages/130830_698_01/index.html"; /* プログラム部分 */ var num = Math.floor(Math.random()*imgs.length); document.write('<a href="'+hrefs[num]+'" id="cth"><img src="'+imgs[num].src+'" id="cti" style="border:0" /></a>'); var cti = document.getElementById("cti"); var cth = document.getElementById("cth"); setInterval(function(){ num += Math.floor(Math.random()*(imgs.length-1))+1; if(num>=imgs.length) num -= imgs.length; cti.src = imgs[num].src; cth.href = hrefs[num]; },interval); </script> <!-- ここまで --> script初心者でよくわかりません＞＜
- 締切済み
- JavaScript
- 画像をランダムに表示し、リンクもランダムにしたい
下記の通りにしたら、ランダムに画像が表示され、 クリックすれば画像とペアになっているアドレス先に飛ぶことは出来たのですが そのときのリンク先をランダムにすることは出来ないでしょか？ 例えば、img[2] の画像が表示された場合、jmp[2] ではなく ５つのアドレスの中からランダムにリンク先が決まる、 というようなことなんですが・・・。 // ランダムに画像を表示する jmp = new Array(); img = new Array(); // ジャンプ先のアドレス(数字は画像と対応) jmp[0] = "http://～"; jmp[1] = "http://～"; jmp[2] = "http://～"; jmp[3] = "http://～"; jmp[4] = "http://～"; // 画像のアドレス(数字はジャンプ先のアドレスと対応) img[0] = "img/img1.jpg"; img[1] = "img/img2.jpg"; img[2] = "img/img3.jpg"; img[3] = "img/img4.jpg"; img[4] = "img/img5.jpg"; n = Math.floor(Math.random()*jmp.length); document.write("<a href='"+jmp[n]+"' target='_blank'>"); document.write("<img src='"+img[n]+"' border='0'>"); document.write("</a>");
- 締切済み
- JavaScript
- ランダム表示の画像とリンクのづれを修正したい
以前こちらで下記のようなjavascriptのリンク付画像のランダム表示方法を教えて頂きました。 画像は全部で20枚以上、表示枚数は8枚、総画像枚数分別々のリンク先を指定します。画像枚数分のhtmlページが存在し、全てのページにテンプレートで同じスクリプトが組み込んであり、それぞれのページに8枚の違う画像が表示され、そこから好きな画像をクリックすることで指定したリンクページにジャンプさせたいのです。 が…確認すると画像は8枚づつランダムに表示はされるのですが、画像とその画像に指定したリンクがづれる箇所があります。全部ではないのですが…どこで画像とリンクがづれているのかいつも決まっているわけでもなく全くわかりません。 Images.splice(k,1);のところだと思いイジってみたものの今度は画像の表示8枚の中で、同じ画像が 表示されてしまったりと、解決できませんでした。 どのように直せば画像をランダムに表示させてリンク先のづれを無くせるのか、よろしければどなたか教えて頂けると大変光栄です。 <head> <script type="text/javascript"> var imgcount=23; var viewcount=8; var Images = new Array(); var Link = new Array(); Link[0]="o00.htm"; Link[1]="o01.htm"; Link[2]="o02.htm"; ・・・・・・ Images[0] = './img/0.jpg'; Images[1] = './img/01.jpg'; Images[2] = './img/02.jpg'; ・・・・・・ function changeImage(){ for(i=0;i<viewcount;i++){ k = parseInt(Math.random() * Images.length); document.getElementById("a_"+i).innerHTML='<a href="'+Link[k]+'" target="_self"> <img src="'+Images[k]+'"></a>'; Images.splice(k,1); } } </script> </head> <body onload="changeImage()"> <table> <tr><td id="a_0"></td><td id="a_1"></td><td id="a_2"></td><td id="a_3"></td></tr> <tr><td id="a_4"></td><td id="a_5"></td><td id="a_6"></td><td id="a_7"></td></tr> </table> よろしくお願いいたします。
- 締切済み
- JavaScript
- 画像をランダムに表示したい
var image = new Image[2]; // おまけ画像の読み込み image[0].src = "aaaa1.jpg"; image[1].src = "bbbb2.jpg"; // プレゼント画像を描画 int r=(int)(Math.random()*2); //ランダムに表示 context.drawImage(image[r], 0, 0); これだけでは、だめなのでしょうか!?
- 締切済み
- JavaScript
- javascript 画像切り替え ランダム 順番
インラインフレーム内のランダムな画像切り替えはできたのですが、順番に切り替えていくというのが出来ません。。。 ランダムソース var imglist=new Array( "100_0003.jpg", "100_0006.jpg", "100_0008.jpg", "100_0009.jpg", "100_0021.jpg", "100_0022.jpg", "100_0023.jpg", "100_0025.jpg", "100_0001.jpg" ); var selectnum=Math.floor((Math.random()*100))%imglist.length; var output="<IMG src=images/randomimg/"+imglist[selectnum]+">" ; document.write(output); 順番ソース var imglist=new Array( "100_0003.jpg", "100_0006.jpg", "100_0008.jpg", "100_0009.jpg", "100_0021.jpg", "100_0022.jpg", "100_0023.jpg", "100_0025.jpg", "100_0001.jpg" ); var selectnum=imglist.length-1; var i=0; function forward() { i=selectnum--; var output="<IMG src=images/randomimg/"+imglist[i]+">" ; document.write(output); } テキストリンクを押してインラインフレーム内の画像を変更していきたいのですが。。。順番にすると真っ白になってしまいます。。。 どなたか解決方法よろしくお願いします。
- ベストアンサー
- JavaScript
- テキストリンクにオンマウスで、別の場所の画像を変えて表示する方法を質問
テキストリンクにオンマウスで、別の場所の画像を変えて表示する方法を質問された方のログがありましたので、そこに追記で質問させてください。 以下は回答者の方のアンサーになります。 <html> <head> <title></title> <script type="text/javascript"> <!-- lnkimgsrc= new Array(); lnkimgs= new Array(); lnkimgsrc[0]="***0.jpg"; // リンク0の画像 lnkimgsrc[1]="***1.jpg"; // リンク1の画像 lnkimgsrc[2]="***2.jpg"; // リンク2の画像 lnkimgsrc[3]="***3.jpg"; // リンク3の画像 lnkimgsrc[4]="***4.jpg"; // リンク4の画像 /* 上記で画像のURLを指定 */ for (i=0; i<lnkimgsrc.length; i++){ lnkimgs[i]= new Image(); lnkimgs[i].src=lnkimgsrc[i]; } function changeImg(x){ if (document.images){ document.images['tgt'].src=lnkimgs[x].src; } } // --> </script> </head> <body> <a href="***0.html" onMouseover="changeImg(0)">リンク0</a> <a href="***1.html" onMouseover="changeImg(1)">リンク1</a> <a href="***2.html" onMouseover="changeImg(2)">リンク2</a> <a href="***3.html" onMouseover="changeImg(3)">リンク3</a> <a href="***4.html" onMouseover="changeImg(4)">リンク4</a><br> <img src="***.jpg" name="tgt"> </body> </html> この状態で、表示された画像から、テキストリンクと同じリンク先に飛ばしたい場合はどのようにすればいいでしょうか。。 よろしくお願いいたしますm(__)m
- ベストアンサー
- JavaScript
お礼
mizuno3 様 再度のアドバイスをありがとうございました。 下記の通りにする事で、希望通りになりました。 まず 壊れた画像のアイコンは、他の写真がちゃんと表示し、リンクも問題なく設定されていた状態にです。 html ファイルは、 <img src="*" name="imgs0"><br> <img src="*" name="imgs1"><br> <img src="*" name="imgs2"> の記述をそのままにしていましたが、上記の記述が壊れた画像のアイコンの正体でした、削除した事で壊れた画像のアイコンは表示されなくなりました。 ただ、ご指摘の通りページレイアウトの関係、任意の位置に表示させたい為。 document.body.appendChild(elementA); ↓↓↓↓↓↓↓↓ document.getElementById('kokonikakitai').appendChild(elementA); と変更し、 <div id="photo"> <span id="kokonikakitai"></span> </div> とした事で、任意の位置に表示させることが出来ました。 ちなみに、<div id="photo">でスタイルシートにて、表示領域をコントールすることが出来ました。 スタイルシートでは、以下のように設定してみました。 <style type="text/css"> <!-- div#photo { width: 400px; } --> </style> <div id="photo"> を用意出来た事でレイアウトが自由になりました。 何度もアドバイスをして頂き本当にありがとうございました。 何とかアドバイスを頂いた、JavaScript を理解出来るよう頑張りたいと思います。