色彩を教える人になるための講座「色彩講師養成講座」の魅力とは>>

CSSで背景画像をランダムに表示させたいのですが、簡単な対応方法などありますでしょうか?

背景のランダム表示としてbody部分をjavascriptで背景のランダム処理はたくさんあるのですが、今回はスタイルシートでbodyではなく、サイト内のいち部分のクラス要素の背景をランダムに表示させたいと思っています。

<div class="main">
ここにコンテンツがあって、このmainのクラス要素の背景をランダムに変えたいです。
</div>

スタイルシートの方では現在は
.main {
float:left;
background-image:url(/image/top_bg01.jpg);
background-repeat:no-repeat;
min-width:736px;
height:auto;
border-right:1px solid #000000;
}

としており、このtop_bg01.jpgの部分の画像を
top_bg01.jpg
top_bg02.jpg
top_bg03.jpg
top_bg04.jpg
top_bg05.jpg
とランダムに表示させたいのですが、対応方法が分からずに困っています。
http://www.designwalker.com/2006/12/random-css.h …
はためしてみましたが、PHPがうまく対応できずに断念してしまいました。

どなた様か宜しくお願いいたします。

gooドクター

A 回答 (3件)

変更する対象が異なるだけで、要領は同じです。



参考まで。
<html>
<style type="text/css">
.main {
background-image:url(/image/top_bg01.jpg);
}
</style>
<script type="text/javascript">
window.onload = function(){
//var url = "a.jpg,b.jpg,c.jpg".split(',');
var url=[];
url[0] = 'top_bg01.jpg';
url[1] = 'top_bg02.jpg';
url[2] = 'top_bg03.jpg';
var n = Math.floor(Math.random() * url.length);
var elm = document.getElementById('main');
elm.style.backgroundImage = 'url(/image/' + url[n] + ')';
}
</script>
<body>
<div class="main" id="main">
コンテンツ
</div>
</body>
</html>

この回答への補足

動きました。
id="main"を忘れてました。
ありがとうございます!!
嬉しいです!

補足日時:2009/03/18 10:45
    • good
    • 1
この回答へのお礼

やってみたのですが、うまく出来ませんでした・・・。
参考を作って頂いたのに、申し訳ないです。
ありがとうございます。

お礼日時:2009/03/18 10:35

 HTMLもCSSも触らず、また、訪問者側の環境に依存するjavascriptも使わずにできます。

PHPでも可能ですが、乱数発生とかややこしいので、CGIを別途おきましょう。
 月ごとに変えるものは作ったことがあるのですが、ちょっと応用が利くものを思案中。

この回答への補足

なるほど!CGIは全く頭にありませんでした。
どんな感じのCGIが簡単に使えるでしょうか?

補足日時:2009/03/18 10:13
    • good
    • 1

CSSでは無理です。


Javascriptで実行します。
検索すれば出ますよ。
Javascript ランダム表示
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!


人気Q&Aランキング