ホームページの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タグで表示する画像を指定します。
以前にやってました。
たぶん２０世紀。
曜日によって、バックの色を変えたり。
画像をランダム表示させたり。
Macの人がIEで見れないと言ってきたので、やめました。（記憶はあいまい）
いまどきは、そんなこともないと思いますが。
それと、NOSCRIPT対策が不十分だったのかもしれません。
多種のブラウザで検証しようにも全部は無理でしたね。
コメント by あにやん — 2010年9月4日 @ 3:47 PM
あにやんこんにちは。私はJavascriptはあまり好きではないので、使うのは必要最低限にしています。これも私のページでは使っていません。PHPの方を使っています。
でも、せっかく実験したので、誰かの参考になるだろうと書き留めておきました。他にもお気づきの点がありましたら教えてください。
コメント by daii — 2010年9月4日 @ 5:53 PM