javascriptで複数の画像をランダム表示さたいです・・

質問

お願いいたします！
javascriptで複数の画像をランダム表示さたいのですが。。。
４行６列のテーブルを使用し、同じ画像が重ならないようにランダム表示をさせたいのですがうまくいきません。。

途中まで出来たものは以下になります─────────
<SCRIPT>
IMAGES=new Array();
IMAGES[0]="x1.gif";IMAGES[1]="x2.gif";
IMAGES[2]="x3.gif";IMAGES[3]="x4.gif";
IMAGES[4]="x5.gif";IMAGES[5]="x6.gif";
IMAGES[6]="x7.gif";IMAGES[7]="x8.gif";
IMAGES[8]="x9.gif";IMAGES[9]="x10.gif";
IMAGES[10]="x11.gif";IMAGES[11]="x12.gif";
IMAGES[12]="x13.gif";IMAGES[13]="x14.gif";
IMAGES[14]="x15.gif";IMAGES[15]="x16.gif";
IMAGES[16]="x17.gif";IMAGES[17]="x18.gif";
IMAGES[18]="x19.gif";IMAGES[19]="x20.gif";
NUMBER=new Array(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0);
document.write("<table border=0><tr>");
var i;
var n=0;
for(i=0;;i++){
j=Math.floor(Math.random()*24);
if(NUMBER[j]==0){
if(n == 4){
document.write("</tr><tr>");
}
document.write("<td><image src=\""+IMAGES[j]+"\"></td>");
n++;
NUMBER[j]=1;
}
if(n==20){
break;
}
}
document.write("</tr></table>");
</SCRIPT>
───────────────────────────

上の物だと１行目は４つのテーブルになるのですが
２行目で残りの画像が１列になっていまします。。。

どうしたものでしょうか。。。

ご教授お願いいたします。

回答No.3

leap_day · ベストアンサー

こんにちは

同じ要領ですることが出来ます
X○.linkにはurlのパスを
あとalt='"+IMAGES[i-1]+"'は確認のためにこうしてますのでそのままだと画像のパスが表示されるようになりますのでLINKSと同じ要領で作ってみてください

<script language="javascript"><!--
IMAGES = new Array(
'X1.gif','X2.gif','X3.gif','X4.gif','X5.gif',
'X6.gif','X7.gif','X8.gif','X9.gif','X10.gif',
'X11.gif','X12.gif','X13.gif','X14.gif','X15.gif',
'X16.gif','X17.gif','X18.gif','X19.gif','X20.gif',
'X21.gif','X22.gif','X23.gif','X24.gif'
);

LINKS = new Array(
'X1.link','X2.link','X3.link','X4.link','X5.link',
'X6.link','X7.link','X8.link','X9.link','X10.link',
'X11.link','X12.link','X13.link','X14.link','X15.link',
'X16.link','X17.link','X18.link','X19.link','X20.link',
'X21.link','X22.link','X23.link','X24.link'
);

for(i=0; i<IMAGES.length; i++){
var tmpA, tmpB, tmpC, tmpD, rnd;
rnd=Math.floor(Math.random() * IMAGES.length);

tmpA=IMAGES[i];
tmpB=IMAGES[rnd];
tmpC=LINKS[i];
tmpD=LINKS[rnd];

IMAGES[i]=tmpB;
IMAGES[rnd]=tmpA;
LINKS[i]=tmpD;
LINKS[rnd]=tmpC;
}

document.open();
document.write("<table><tr>");

for(i=1; i<25; i++) {
document.write("<td><a href="+LINKS[i-1]+"><img src='"+IMAGES[i-1]+"' alt='"+IMAGES[i-1]+"'></a></td>");
if(i%4 == 0) {
document.write("</tr><tr>");
}
}
document.write("</tr></table>");
document.close();
//--></script>

お礼

いやぁ～出来ました！
ALTタグも普通に表示されるようになりましたので大丈夫だと思います。
感動です＾＾
ありがとうございます！！

回答No.2

leap_day

こんにちは

こんな感じですか？

<script language="javascript"><!--
IMAGES = new Array(
'X1.gif','X2.gif','X3.gif','X4.gif','X5.gif',
'X6.gif','X7.gif','X8.gif','X9.gif','X10.gif',
'X11.gif','X12.gif','X13.gif','X14.gif','X15.gif',
'X16.gif','X17.gif','X18.gif','X19.gif','X20.gif',
'X21.gif','X22.gif','X23.gif','X24.gif'
);
for(i=0; i<IMAGES.length; i++){
var tmpA, tmpB, rnd;
rnd=Math.floor(Math.random() * IMAGES.length);
tmpA=IMAGES[i];
tmpB=IMAGES[rnd];
IMAGES[i]=tmpB;
IMAGES[rnd]=tmpA;
}
document.open();
document.write("<table><tr>");

for(i=1; i<25; i++) {
document.write("<td><img src='"+IMAGES[i-1]+"' alt='"+IMAGES[i-1]+"'></td>");
if(i%4 == 0) {
document.write("</tr><tr>");
}
}
document.write("</tr></table>");
document.close();
//--></script>

20個で止めるなら
for(i=1; i<21; i++)
にしてください

お礼

ありがとうございます！！
表示させることができました。

大切な事を書くのを忘れておりました。。。

表示される画像１つ１つにリンクを張りたかったのですが、
それだと全く違ったタグになりますでしょうか。。。

アホで申し訳ございません！

回答No.1

himajin100000

>if(n == 4)

=4じゃなくて「4の倍数」だよな？正確には。(多分最大の原因)

あと、4行6列=24個なのに画像が20個しかないので下手すると無限ループに陥る。オーバーした分をどうするかを考える必要がある。以下のソースでは，
「不足」と表示している。

個人的にdocument.writelnが非常に嫌いなのでDOMを使う

それを踏まえて，
===========================Q3262491-1.js===================
function ListData(){

var ArrayMaxLength = 20;
var ColumnCount = 4;
var RowCount = 6;

var IMAGES=new Array(ArrayMaxLength);

IMAGES[0]="x1.gif";IMAGES[1]="x2.gif";
IMAGES[2]="x3.gif";IMAGES[3]="x4.gif";
IMAGES[4]="x5.gif";IMAGES[5]="x6.gif";
IMAGES[6]="x7.gif";IMAGES[7]="x8.gif";
IMAGES[8]="x9.gif";IMAGES[9]="x10.gif";
IMAGES[10]="x11.gif";IMAGES[11]="x12.gif";
IMAGES[12]="x13.gif";IMAGES[13]="x14.gif";
IMAGES[14]="x15.gif";IMAGES[15]="x16.gif";
IMAGES[16]="x17.gif";IMAGES[17]="x18.gif";
IMAGES[18]="x19.gif";IMAGES[19]="x20.gif";

var UsedFlag =new Array(ArrayMaxLength);
var hogefuga

for (var i = 0; i < ArrayMaxLength; i ++){
UsedFlag[i] = 0;
}

var table = document.createElement("table");
var tbody = document.createElement("tbody");
var caption = document.createElement("caption");

caption.appendChild(document.createTextNode("実験"));

for(var i = 0;i < RowCount; i++){

var tr = document.createElement("tr");

for (var j = 0; j < ColumnCount; j++){
var td = document.createElement("td");
var k = Math.floor(Math.random() * RowCount * ColumnCount);
while (k < ArrayMaxLength && UsedFlag[k] != 0){

k = Math.floor(Math.random() * RowCount * ColumnCount);

}

if (k >= ArrayMaxLength){
td.appendChild(document.createTextNode("不足" + k));
}
else{

/*
object要素使うときは参照先のリソースに対するContent-Typeをきちんと「サーバ」が与えないとjavascript側でtype属性を指定しても
無視される、というバグがFxにはある。Trunkでは修正済み。
Bugzillaの番号忘れた。後で調べる

めったにないだろうが，どうしてもアレだと言う場合
img要素を使用することになるか
*/
var object = document.createElement("object");
object.setAttribute("type","image/gif")
object.setAttribute("data",IMAGES[k]);
object.appendChild(document.createTextNode(k));

td.appendChild(object);
UsedFlag[k] = 1;

}
tr.appendChild(td);

}

tbody.appendChild(tr);

}

table.appendChild(caption);
table.appendChild(tbody);

var display = document.getElementById("display");
display.appendChild(table);

}

===========================Q3262491-1.html===================

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<script type="text/javascript" src="Q3262491-1.js"></script>
<title>Q3262491 テストケース1</title>
</head>
<body onload="ListData();">
<div id="display">
</div>
</body>
</html>
=================
IE 7だと固まります。(appendChildかcreateTextNodeがないみたい)
http://oshiete1.goo.ne.jp/qa3205193.html?ans_count_asc=0
回答7が使えるかもしれない。

ああ、そうそう、表示されるのは【添字kであって0から始まっているので】
ファイル名の番号ではない。一応。

お礼

ありがとうございます！

こちらのレベルが。。。
スクリプトのサンプル等ををコピペして「多分これかな？」と思う数字を少しいじる程度しか知識が無いのでちょっと難しいですね汗汗。。

あと、画像は20個の場合の物を貼り付けましたが
実際には24個の画像を使おうと思っています。

今お答えしていただいたものを参考にやってみたのですが・・・
わかりませんでした。。。

申し訳ないです。