ホームページのJavascriptで画像をランダムに切り替えて表示する方法を試行錯誤していましたら、うまく表示できるようになったので紹介します。ページにアクセスする毎に画像ファイルが違ってなかなか良い感じにすることができましたが、私はPHPの方を使っています。
前回はPHPでしたが、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タグで表示する画像を指定します。
