4. 装飾を加えたソースのまとめ

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

head要素内に記述するJavaScript (ランダムに1つを選ぶ関数):
<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() {
      // どれか1つ選ぶ
      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>
※上記ソース内の「// 注」の部分には、カンマ記号を書いてしまわないようにご注意下さい(詳しくは、2ページ目の説明をご参照下さい)。

装飾のためのスタイルシート例:
この部分は書かなくても機能上の問題ありません。冒頭でご紹介したサンプルページのように装飾するためだけのCSSソースです。
<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ソース:
先のスタイルシートを適用するために、適宜class名を割り振ってあります。
<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要素の部分だけです。それ以外の箇所は、自由に修正して下さい。

上記のソースをすべて使った表示例

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

複数のリンク画像群から1つをランダムに選んで表示するサンプルページ

複数のリンク画像群から1つをランダムに選んで表示するサンプルページ


実際にブラウザを使って表示と動作を確認してみたい場合は、「ランダム画像リンクを作る」サンプルページをご覧下さい。

ランダム画像リンクの作り方

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

【関連記事】



※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。