重複しないランダムリンクの表示位置
複数の画像の中から数個を選び、それを重複しないように表示し、尚且つ各画像に合った文章を表示したいのです。
それで、色々と調べて、以下のようなものを見つけました。
私が求めているものに極めて近いのですが、２～３変更したいのです。
しかし、どこをどうしたら良いの全くわかりません。
どなたか助けてください。
質問は３つあります。
一つ目は、画像をリンクにしたいということです。
二つ目は、文章を画像の下に持って来たいのです。
（画像、文章、画像、文章・・・の順に縦に表示されるように）
三つ目は、文章もリンクにしたいということです。
三つ目はできればで構いませんが、一つ目と二つ目は必須でお願いします。
初心者なものですから、わかりやすく教えて頂けるとありがたいです。
よろしくお願いします。
記述は以下の通りです。
<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>
お礼
ありがとうございます！ 参考にさせていただきますm(__)m