複数の画像リンクからランダムに1つを表示する方法(2ページ目)

1. 画像リンクのリストを作る

まずは、表示させたい画像とその説明文・リンク先URLのリストを作りましょう。下記のソースを、HTMLのhead要素内などに記述します。

<script type="text/javascript"><!--
   // 画像・URLリストを配列で作る
   var imglist = [
      [ "flowerA.jpg", "花A", "pagea.html" ] ,
      [ "flowerB.jpg", "花B", "pageb.html" ] ,
      [ "flowerC.gif", "花C", "pagec.html" ] ,
      [ "flowerD.gif", "花D", "paged.html" ] //注
   ];
// --></script>

ここでは、JavaScriptの2次元配列を使って、以下の3つの情報を4セット記述しています。これらの値は、自由に書き換えて下さい。数も4つに限らず、必要なだけ増減できます。

1. 画像ファイル名 (「flowerA.jpg」・「flowerC.gif」など)
2. 画像の代替文字 (「花A」・「花C」など)
3. リンク先URL (「pagea.html」・「pagec.html」など)

画像ファイル名やリンク先は、上記のようなファイル名だけではなく、ディレクトリ名を含めても構いません。 また、「http://」から記述しても問題ありません。

■配列の最後にはカンマ記号は不要なので注意
上記のJavaScriptソースの中で、配列の末尾にある「//注」と書いた位置にだけはカンマ記号は不要です。ここにカンマを加えてしまうと、JavaScriptが正しく動作しません。特にコピー＆ペーストで行を増やした場合に、消し忘れがちなので注意して下さい。



4個用意したなら4個目の末尾、10個用意したなら10個目の末尾にのみ、カンマ記号は不要です。

さて、これで、表示する内容のリストができあがりました。次に、これらの中から1つをランダムに選んで表示するJavaScriptを書きましょう。