画像をランダムに切り替えて表示する方法(PHPとJavascript)

ホームページやブログのトップ画面でいつも同じ画像が表示されているのは味気ないものです。時々画像を入れ替えるのも面倒なものです。画像をランダムに切り替えて表示する方法を試してみました。

PHPで画像をランダムに切り替えて表示する方法

サーバーの写真

ワードプレスや ホームページ楽天 のPHPで画像をランダムに切り替えて表示する方法を試行錯誤していましたら、うまく表示できるようになったので紹介します。

ページにアクセスする毎に、ランダムに画像ファイルが違って表示されるので、なかなか良い感じになりました。

PHPスクリプトは次の通り

<?php
$rand_img[] = "<img src=\"http://hogehoge.jp/****/img1.jpg\" alt=\"img1の代替テキスト\" title=\"img1の説明\" />";
$rand_img[] = "<img src=\"http://hogehoge.jp/****/img2.jpg\" alt=\"img2の代替テキスト\" title=\"img2の説明\" />";
$rand_img[] = "<img src=\"http://hogehoge.jp/****/img3.jpg\" alt=\"img3の代替テキスト\" title=\"img3の説明\" />";
srand(microtime()*1000000);
$rand_num = rand(1, $n = count($rand_img));
$rand_num -= 1;
echo "$rand_img[$rand_num]";
?>

このように画像ファイルを何個か用意して、2行目以降に羅列します。画像ファイルはhttpから記入しなくても、相対パスで記入してもOKです。altとtitleは無くてもけっこうです。必要に応じて記入します。

rand_imgとrand_numは別の好きな名前に変えてもOKです。

Javascriptで画像をランダムに切り替えて表示する方法

PHPの使えない環境では、Javascriptを使って同じ動作をさせることができます。

<script type="text/javascript">
<!--
var max_no = 3; //画像の最大数
var rand_no = Math.floor(Math.random() * max_no);

if(rand_no == 0){
document.write('<img src="http://hogehoge.jp/***/img1.jpg" alt="img1の代替テキスト" title="img1の説明" />');
}
else if(rand_no == 1){
document.write('<img src="http://hogehoge.jp/***/img2.jpg" alt="img2の代替テキスト" title="img2の説明" />');
}
else if(rand_no == 2){
document.write('<img src="http://hogehoge.jp/***/img3.jpg" alt="img3の代替テキスト" title="img3の説明" />');
}//-->
</script>
<noscript><img src="http://hogehoge.jp/***/img1.jpg" alt="img1の代替テキスト" title="img1の説明" style="margin:0" /></noscript>

Javascriptでは画像の数に応じて、セットする画像の枚数を設定してから、PHPの時と同様に、画像の情報を記録した行を追加してやります。

JavascriptではJavascriptが使えない環境にも配慮する必要があります。noscriptタグで表示する画像を指定します。

PHPとJavascriptの動作の違い

PHPではサーバー側で動作するので、表示動作はブラウザには依存しませんが、Javascriptではブラウザ側で動作するので、ブラウザによって動作が違うことがあります。

また、JavascriptではJavascriptが使えない環境にも配慮する必要があります。

私は画像ファイルのwidthとheight属性は指定しない方針です

imgファイルのwidthとheight属性の指定問題は賛否両論あるようです。私も今まではNetscape Navigator 4のような古いブラウザへの配慮で指定するのが必須だと思っていました。

しかし、私は指定しないことに変更しました。元々XHTML1.0やHTML4.01ではimgファイルのwidthとheight属性の指定は任意です。つまり、指定してもしなくても良いのです。

widthとheightを指定しないメリット

widthとheight属性を指定しないので、記述の必要がないので手間が省けます。また、ファイルの大きさも少しですが小さくなります。

もっと大きなメリットは画像を別のものと差し替え時た時にHTMLファイルの修正が不要となることです。画像の編集でトリミング等をして画像のピクセル数が少しでも変わった場合、画像ファイルの差し替えだけでなくHTMLファイルの方も修正しないといけません。そうしないと画像が変形します。

ホームページビルダーでは、widthとheight属性が自動的に入力されてしまいますが、最近使い出したExpression Web3では、widthとheight属性は、自動的には入力されません。将来的にはこれが標準になるんだろうと思っています。

widthとheightを指定しないデメリット?

img要素にwidthとheightを指定しておくと画像を読み込む前に表示領域を確保します。指定しなかった場合は画像を読み込む時に表示領域を確保するので表示が遅いといわれていました。

しかし、指定しない方が表示が速かったという情報もありますので何とも言えないようです。