重複しないランダムリンクの表示位置
複数の画像の中から数個を選び、それを重複しないように表示し、尚且つ各画像に合った文章を表示したいのです。
それで、色々と調べて、以下のようなものを見つけました。
私が求めているものに極めて近いのですが、２～３変更したいのです。
しかし、どこをどうしたら良いの全くわかりません。
どなたか助けてください。
質問は３つあります。
一つ目は、画像をリンクにしたいということです。
二つ目は、文章を画像の下に持って来たいのです。
（画像、文章、画像、文章・・・の順に縦に表示されるように）
三つ目は、文章もリンクにしたいということです。
三つ目はできればで構いませんが、一つ目と二つ目は必須でお願いします。
初心者なものですから、わかりやすく教えて頂けるとありがたいです。
よろしくお願いします。
記述は以下の通りです。
<html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title>test ２３区外</title>
<script type="text/javascript">
<!--
function createGalleryTable() {
//表に表示する数を指定
var n = 6;
//画像のURL
var img = [
'samp1.jpg', 'samp2.jpg', 'samp3.jpg', 'samp4.jpg',
'samp5.jpg', 'samp6.jpg', 'samp7.jpg', 'samp8.jpg'
];
var inum = img.length;
//画像の代替テキスト
var alt = [
'画像a', '画像b', '画像c', '画像d',
'画像e', '画像f', '画像g', '画像h'
];
//画像とセットで表示する文章（画像と個数を合わせる）
var str = [
'１番目の文章が表示されます。',
'２番目の文章が表示されます。',
'３番目の文章が表示されます。',
'４番目の文章が表示されます。',
'５番目の文章が表示されます。',
'６番目の文章が表示されます。',
'７番目の文章が表示されます。',
'８番目の文章が表示されます。'
];
//画像・文章の個数と同じだけ数字を配列に入れる
//この例だと [0, 1, 2, 3, 4, 5, 6, 7] という配列ができる
var num = new Array();
for(var i = 0; i < inum; i++) num[i] = i;
//上で作った配列の中身をランダムに並び替える
//並び替えなので、数字は重複しません
for(var j = inum - 1; j >= 0; j--) {
var r = Math.floor(Math.random() * inum);
var tmp = num[j];
num[j] = num[r];
num[r] = tmp;
}
//並び替えた配列の先頭から、ほしい数だけ抜き取る
var result = num.splice(0, n);
//表を作成し、指定箇所に挿入する
var target = document.getElementById('galleryArea');
var table = document.createElement('table');
for(var k = 0; k < n; k++) {
var row = table.insertRow(k);
var rImg = new Image();
rImg.src = img[result[k]];
rImg.alt = alt[result[k]];
var cell1 = row.insertCell(0);
cell1.appendChild(rImg);
var text = document.createTextNode(str[result[k]]);
var cell2 = row.insertCell(1);
cell2.appendChild(text);
}
target.appendChild(table);
}
if(window.addEventListener) {
window.addEventListener('load', createGalleryTable, false);
}
else if(window.attachEvent) {
window.attachEvent('onload', createGalleryTable);
}
//-->
</script>
<div id="galleryArea"></div>
お礼
ご回答ありがとうございます。 全く知識がなかったために、アドバイスいただいた内容もよく理解できない状態だったのですが、入門ページ等とにらめっこで何とか思い通りの挙動をさせることができました。 2)のやり方が一般的？なのかどうかわかりませんが、他の例文にも見られましたので、その方法をとることにしました。 これを機にjavascriptもがんばらなければと思います… どうもありがとうございました。