前からやりたかったことの一つとして「タイトルバナー画像を複数用意し、ランダムで表示させる」というものがありました。

実際にNo Returnのサイトではやっていたのですが、何故かやる気がおきなくて放置していたのを、ようやく実装することに成功しました。

スクリプトはこんな感じ。

<script type="text/javascript">
  <!--
   // ランダムに画像を表示する
  img = new Array();
  img[0] = "banner00.jpg";
  img[1] = "banner01.jpg";
  img[2] = "banner02.jpg";
  img[3] = "banner03.jpg";
   n = Math.floor(Math.random()*img.length);
   document.write("<img alt='Onion Kills Zombies' src='http://okz-web.com/img/"+img[n]+"' width='780' height='100' border='0' />");
   //-->
  </script>
  <noscript>
   <img alt="Onion Kills Zombies" src="http://okz-web.com/img/banner00.jpg" width="780" height="100" border="0" />
  </noscript>

img[n]配列内のファイル名を、Math.random関数を使ってランダム表示しています。
画像が増えたときはimg[n]="画像ファイル名";を追加していけばよいだけです。

この内容で「banner.php」というファイルを作成し、各ページでは

<?include("/banner.php");?>

というphpのinclude機能を使って呼び出しています。

これでもし画像ファイルが増えても、「banner.php」だけを書き換えれば即座に全ページに変更が反映されます。