- ベストアンサー
複数の画像をランダムに表示させるソース
- テーブル内のセルにリンクバー付きのランダムな画像を表示するソースコードを教えてください。
- 画像数やURL、パスを簡単に書き換えるだけで使用できる、XHTMLで使えるJavaScriptによるソースコードをご教授ください。
- 素人でも簡単に使用できる、XHTML形式の既存ページで使用するための画像ランダム表示のソースコードを教えてください。
- pfam
- お礼率87% (7/8)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
[ファイル構成] ├hoge.html └img └banner ├00.jpg ├01.jpg ├02.jpg [hoge.html] <html><head> <script> var imgcount=10; //img枚数 ここに枚数を =の後に入れてください var viewcount=8; //表示するのは 8枚なので 8 var Images = new Array(); var Link = new Array(); Link[0]="http://questionbox.jp.msn.com/"; //link先0 Link[1]="http://www.yahoo.co.jp/"; //link先1 Link[2]="./"; //以下同様に http://から Link[3]="./"; //画像の枚数分 /*・・・・・link の分だけ追加*/ Images[0] = './img/banner/00.jpg'; // for文は はずしてください Images[1] = './img/banner/01.jpg'; // Link[数字] と Image[数字]の Images[2] = './img/banner/02.jpg'; // 数字部分があうように Images[3] = './img/banner/03.jpg'; // 枚数分 /* imgファイルは img/(数字).gif 上をいじれば変更可能・配列に直接書き込んでもおｋ*/ function changeImage(){ for(i=0;i<viewcount;i++){ k = parseInt(Math.random() * Images.length); document.getElementById("a_"+i).innerHTML='<a href="'+Link[k]+'" target="_blank"><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> </body> </html> 今後のためにもjavascript のfor文、if文、変数、配列について、 html の idについて、少し 勉強されるのがいいとおもいます。 document.getElementById("a_"+i).innerHTML='<a href="'+Link[k]+'" target="_blank"><img src="'+Images[k]+'"></a>'; で <td id="a_○"></td> の 中身を innerHTMLで書き換えています。 <a href="'+Link[k]+'"・・・ で href= の中身を 配列Link で指定してます。
その他の回答 (1)
- noris02
- ベストアンサー率74% (56/75)
<html><head> <script> var imgcount=6; //img枚数 var viewcount=3; //表示枚数 var Images = new Array(); var Link = new Array(); Link[0]="./"; //link先0 Link[1]="./"; //link先1 Link[2]="./"; //link先2 Link[3]="./"; //link先3 Link[4]="./"; //link先3 Link[5]="./"; //link先3 /*・・・・・link の分だけ追加*/ for(i=0;i < imgcount;i++){ Images[i] = './img/icon' + i + '.gif'; } /* imgファイルは img/(数字).gif 上をいじれば変更可能・配列に直接書き込んでもおｋ*/ function changeImage(){ for(i=0;i<viewcount;i++){ k = parseInt(Math.random() * Images.length); document.getElementById("a_"+i).innerHTML='<a href="'+Link[k]+'" target="_blank"><img src="'+Images[k]+'"></a>'; Images.splice(k,1); } } </script> </head> <body onload="changeImage();"> <table> <script> //この部分はテーブルを表示してるだけなので書き換えてください m=""; for(i=0;i<viewcount;i++){ if(i==0||i==4)m+="<tr>"; m+='<td id="a_'+i+'">a</td>'; if(i==3)m+='</tr>'; } document.write(m); </script> </table> </body> </html>
お礼
ご回答ありがとうございます。 しかし私が無知すぎて使用してみたものの、全く機能しません。 どこが間違っているのかもわかりません。もう少し教えていただけないでしょうか？ 参考ＵＲＬのページも以前に見たことありましたが書き換え方がわからず使用できませんでした。 リンク先の部分は Link[0]="./http://questionbox.jp.msn.com/"; Link[1]="./http://www.yahoo.co.jp/"; この書き方でいいのでしょうか？ for(i=0;i < imgcount;i++){ Images[i] = './img/icon' + i + '.gif';の部分は Images[0] = './img/banner/0' + i + '00.jpg'; Images[1] = './img/banner/1 + i + '01.jpg'; こんな感じで画像枚数分増やせば いいのでしょうか？ そもそも記述方法があってるのでしょうか？ あとセル内に <td> <img id="0" src="img/banner/00.jpg" /> ←最初にくる画像を指定？ </td> これでいいのでしょうか？ すみません、お手数をお掛けいたしますが、もう一度教えていただけると 非常に助かります。どうかよろしくお願いいたします。
お礼
お忙しいところ本当にありがとうございました。 ご指摘頂いたとおり、javascriptをもう少し勉強してから、 とりかかってみようと思います。 大変、失礼をいたしました。 助かりました。感謝いたしております。 ちょっとギリギリ自分でわかるところまで チャレンジしてみようと思います。 また少しして、すぐ質問しちゃうかもしれませんが…f(^^) またの機会によろしくお願いいたします。 ありがとうございました。