5/5 複数の画像リンクからランダムに1つを表示する方法 [ホームページ作成] All About

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要素の部分だけです。それ以外の箇所は、自由に修正して下さい。