javascriptで画像と文字をセットでランダム表示させ指定のURLに飛ぶようにしたい

Question

当方、プログラミングのプの字もわからないド素人です、恥を忍んでお聞きいたします。

javascriptで複数枚の中から画像と文字をセットでランダムに表示させ、クリックしたら画像毎に違うURLに飛ぶ、というのをやりたいのですがうまくいきません。

ランダムに表示させリンク先に飛ぶのはできたのですが、画像と文字がセットではなくバラバラで表示されてしまいます。
画像１を表示したら文字１を表示、画像２を表示したら文字２を表示、という風にやりたいのですが、どうすればいいのでしょうか？

Googleの力を借りて私が使った画像ランダム表示のコードがこちらです

<SCRIPT language="JavaScript">
<!--
// ランダムに画像を表示する
jmp = new Array();
img = new Array();
// ジャンプ先のアドレス(数字は画像と対応)
jmp[0] = "表示させたいページのURL";
jmp[1] = "表示させたいページのURL";
jmp[2] = "表示させたいページのURL";
jmp[3] = "表示させたいページのURL";
jmp[4] = "表示させたいページのURL";
jmp[5] = "表示させたいページのURL";
// 画像のアドレス(数字はジャンプ先のアドレスと対応)
img[0] = "表示させたい画像のURL";
img[1] = "表示させたい画像のURL";
img[2] = "表示させたい画像のURL";
img[3] = "表示させたい画像のURL";
img[4] = "表示させたい画像のURL";
img[5] = "表示させたい画像のURL";
n = Math.floor(Math.random()*jmp.length);
document.write("<a href='"+jmp[n]+"'>");
document.write("<img src='"+img[n]+"' border='0'>");
document.write("</a>");
//-->
</SCRIPT>

このコードにどう書き加えれば文字と画像をセットで表示させることができますか？

そして、とりあえずランダムじゃなくても一枚だけ表示できれば何か掴めるだろうと、こちらのサイトの情報と合わせて書いたコードがこちらです。非常に醜いものとなっております、御許し下さい

<SCRIPT language="JavaScript">
<!--

var image0 = new Image();
image0.src = "画像のURL";

list.push({
    imageDeta:image0,
    textDeta;"表示させたい文字"
});

var image = list[0].imageDeta;
var text = list[0].textDeta;

jmp = new Array();
image = new Array();

jmp[0] = "表示させたいページのURL";

image[0] = "画像のURL";
n = Math.floor(Math.random()*jmp.length);
document.write("<a href='"+jmp[0]+"'>");
document.write("<image src='"+image[0]+"'width='160' height='100' border='0'>");
document.write("</a>");
//-->
</SCRIPT>

もしかしたらと思いましたが、当然のように何も表示されませんでした...

Comments

[hentaiman]

一つ目のコードでバラバラになる理由がない。確認ミスと思われるゆえ再度動かして確認してはどうか

Answer 1

最小の変更でいくなら、上のコードに追加で、次のようなのを作っといて同じようにdocument.writeで書き出せばできます。

txt = new Array();
txt[0] = '...';
txt[1] = '...';
txt[2] = '...';
txt[3] = '...';
txt[4] = '...';
txt[5] = '...';

二つめのコードでは関連するデータをまとめて見通し良くしようとしたってことですよね。
次のような感じでできると思います。

data = [
  {
    link: '表示させたいページのURL',
    image: '表示させたい画像のURL',
    text: '表示させたいテキスト'
  },
  {
    link: '表示させたいページのURL',
    image: '表示させたい画像のURL',
    text: '表示させたいテキスト'
  },
  //.....
];
n = Math.floor(Math.random() * data.length);
document.write('<a href="' + data[n].link + '">');
document.write('<img src="' + data[n].image + '">');
document.write('<p>' + data[n].text + '</p>');
document.write('</a>');
//.....

Comments

[Mrucurus]

コードを試していたら遅くなりまして申し訳ありません。
二つのコード、どちらでも文字と画像をセットでランダム表示させることができました
まさか私の醜いコードまで簡潔に纏めてくださるとは...本当に素晴らしいです！
本当にありがとうございました、また機会があればよろしくお願いいたします。

[set0gut1]

ベストアンサーありがとうございます！またよろしくお願いします。