ホームページ作成

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

文字や画像の動的変更 (HTML,CSS,JavaScript)

更新日：2007年05月20日

複数の画像リンクからランダムに1つを表示

西村文宏

たくさんある「お勧め」の中からランダムに1つを選んで表示する機能を作ってみましょう。ページが表示されるたびに、ランダムに選ばれた画像が1つ表示されます。クリックすると画像に対応するページに移動できます。

ソースのまとめ

今回の記事で作ったすべてのソースを以下にまとめて掲載しておきます。 HTMLファイルへコピー＆ペーストして試してみる際などにご活用下さい。

■head要素内に書くJavaScript

<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" ] //注

   ];

   // ランダムに1つ選んで表示する関数

   function RandomImageLink() {

      // どれか１つ選ぶ

      var selectnum = Math.floor(Math.random() * imglist.length);

      // 画像とリンクを生成

      var output = 

         '<a href="' + imglist[selectnum][2] + '">' +

         '<img src="' + imglist[selectnum][0] + '"' +

         ' alt="' + imglist[selectnum][1] + '"><br>' +

         imglist[selectnum][1] + '</a>';

      // 生成したHTMLを出力

      document.write(output);

   }

// --></script>

※「 // 注」の部分（7行目）には、カンマは不要です。（詳しくは、2ページ目の説明をご参照下さい。）

■装飾のためのスタイルシート（例）

この部分は書かなくても問題ありません。ただ、冒頭のサンプルのように装飾して表示させるためのものです。

<style type="text/css"><!--

/* 全体の囲み */

div.box {

   border: 1px solid #cc0000; /* 全体を囲む枠線 */

   width: 240px; /* 囲みの横幅 */

   margin: auto; /* 中央寄せ */

}

/* 囲みの内側 */

div.box p {

   padding: 0.3em; /* 内側の余白 */

   text-align: center; /* 中央寄せ */

   margin: 0px; /* 外側の余白をゼロに */

}

/* 囲み上部のタイトル部分 */

div.box p.title {

   background-color: #cc0000; /* 背景色 */

   color: white; /* 文字色 */

}

/* 画像の表示 */

div.box p img {

   border: 0px; /* リンク画像の枠線を消す */

}

--></style>

■実際に表示したい箇所に記述するHTML

<div class="box">

   <p class="title">ランダム画像リンク</p>

   <p>

       <script type="text/javascript"><!--

         RandomImageLink();

      // --></script>

    </p>

    <noscript>

      <p><a href="list.html">お勧めリストへ</a></p>

   </noscript>

 </div>

※最低限必要なのは、script要素とnoscript要素の部分だけです。

上記のソースをすべて表示

上記のソースをすべて使って表示させると、以下のように見えます。

ランダム画像リンク

ページを読み込むたびに、異なる画像リンクが表示されます。
※たまたま前回と同じ画像が出る場合もあります。（4種類しかないので特に）

ランダム画像リンク(2)

上記のように、1つのページ内に複数個記述することもできます。（それぞれの表示内容は、別個にランダムに選ばれます。ただし、たまたま同じになることもあります。）
※スクリプトは1回だけ書きます。HTMLを複数書けば、複数表示できます。

おわりに

今回は、複数の「画像リンク」の中からランダムに1つを選んで表示するJavaScriptをご紹介いたしました。
たくさんある「お勧め」の中から、自動的に1つを選んでアクセス者に紹介するような機能などとして使うとおもしろそうです。ぜひ、ご活用下さい。

【関連記事】

マネしたくなるアイデア住宅

住まいには、人の個性がよく現れるもの。同じ空間をどのように使うかで、雰囲気も、快適さも大きく変わってくる。ここでは、「建築家と家を建てる」ガイドの川畑博哉氏が厳選した10軒を紹介し、建築家それぞれのこだわりのポイントを紹介しよう。建築のプロたちが考え出した、マネしたくなるアイデアが満載！さぁ、いますぐチェック！