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を書きましょう