ランダム表示の画像とリンクのづれを修正したい
以前こちらで下記のような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>
よろしくお願いいたします。
お礼
早々に回答を頂いていたのに、お礼が遅れて申し訳ありません。 そうです！これです。 有り難う御座います。