お勧め情報(画像)の中からランダムに1つを選んで掲載する目的などに
複数の画像リンクからランダムに1つを選んで表示する
たくさんある「お勧めコーナー紹介画像」の中からランダムに1つを掲載したり、お勧めの写真をランダムに1つ紹介したりしたい場合などに活用できます。リンク先は自サイト内に限らないので、お気に入りサイトの中から1つを選んで紹介する用途などにも使えます。
下図は、複数の画像リンクの中からランダムに1つを選んで表示するページの作成例です。ブラウザで実際に表示確認をしてみるには、「ランダム画像リンクを作る」サンプルページをご覧下さい。
複数のリンク画像群から1つをランダムに選んで表示するサンプルページ
上記のサンプルページの枠内には、花のイラストが1つだけ表示されています。ページを表示するたびに、異なる画像が表示されます。また、画像と一緒にリンク先も変化しています。
※ランダムに選ばれた結果、たまたま前回と同じ画像が出ることもあります。ここでは画像を4種類しか用意していないので、そうなる可能性は高いです。試す際には、何度か再読み込みボタンをクリックしてみて下さい。
ランダム画像リンクの作り方
さて今回は、上記の作成例のように、画像とURLとを対にした「画像リンク」を複数用意しておき、その中から1つをランダムに選んで表示する方法をご紹介致します。複数の「画像リンク」の中から1つを選んで表示する方法には、短いJavaScriptを使います。とても簡単に作成できますので、ぜひ試してみて下さい。※本記事は、過去の記事「アクセスされるたびに画像をランダムに切り替える方法」の改良版です。画像をランダムに表示するだけでなく、説明文を加えてリンクにできるようにスクリプトを書き換えたものです。
【本記事の目次】
1. 画像リンクのリストを作る
2. ランダムに選んで、表示用HTMLを生成するJavaScriptを作る
3. 作ったJavaScript(関数)を呼び出して表示する
4. 装飾を加えたソースのまとめ
それでは、最初のステップから順に見ていきましょう。
