【ホームページ作成】複数の画像リンクからランダムに1つを表示

お勧めページをランダムに選んで1つ紹介する…とか

たくさんある「お勧め」の中からランダムに1つを選び出して、ページが表示されるたびに異なる「お勧め」を表示してみてはいかがでしょうか。
お勧めのコーナーをランダムに1つ紹介したり、お勧めの写真をランダムに1つ紹介したりするとおもしろそうです。 リンク先は自分のサイト内に限らないので、お友達サイトの中から1つを選んで紹介する用途にも使えます。

以下は、ランダムに1つを選んで画像を紹介する例です。

上記の枠内には、花のイラストが1つだけ表示されていると思います。このページを再読み込みしてみて下さい。 読み込むたびに異なる画像が表示されます。また、画像と一緒にリンク先も変化しています。
※ランダムに選ばれた結果、たまたま前回と同じ画像が出ることもあります。（ここでは4種類しか用意していないので可能性は高いです。）

ランダム画像リンクを作る

上記のサンプルのように、画像とURLとを対にした「画像リンク」を複数用意しておき、 その中から1つをランダムに選んで表示する機能を作ってみましょう。
複数の「画像リンク」の中から1つを選んで表示する方法として、JavaScriptを使います。

先ほどのサンプルでは、次の4つの画像を用意しました。画像ごとに紹介文とリンク先URLがあります。 これらの画像のどれかが表示されているはずです。（JavaScriptが無効な環境では、代わりの文字とリンクが表示されます。）

花リンクA	花リンクB
花リンクC	花リンクD

今回は、このような「ランダム画像リンク」を作る方法をご紹介いたします。

※今回の記事は、2003年に公開した「ランダムに画像を表示したい」の改良版です。 画像をランダムに表示するだけでなく、説明文を加えてリンクにできるようにスクリプトを書き換えたものです。

ランダム画像リンクを作る（目次）

1. 画像リンクのリストを作る
2. ランダムに選んで、表示用HTMLを生成するJavaScriptを作る
3. 表示するHTMLを書く
4. 装飾とソースのまとめ

それでは、最初のステップへ >>