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がうまく対応できずに断念してしまいました。
どなた様か宜しくお願いいたします。
No.1ベストアンサー
- 回答日時:
変更する対象が異なるだけで、要領は同じです。
参考まで。
<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>
No.3
- 回答日時:
HTMLもCSSも触らず、また、訪問者側の環境に依存するjavascriptも使わずにできます。
PHPでも可能ですが、乱数発生とかややこしいので、CGIを別途おきましょう。月ごとに変えるものは作ったことがあるのですが、ちょっと応用が利くものを思案中。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- HTML・CSS 下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない 1 2022/04/16 21:31
- HTML・CSS 吹き出し 下記の吹き出しのスタイルシートについて 下記のスタイルシートは左側にアイコンがでる使用にな 1 2022/11/12 17:55
このQ&Aを見た人はこんなQ&Aも見ています
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
<hr>の縦バージョンはありますか?
-
画像とその下にあるテキストの...
-
background-repeat CSS で切れ...
-
【Webサイト】画像が小さく表示...
-
スクロールすると追従する画像...
-
大至急。webのシングルページを...
-
CSSでサイトの背景に画像を組み...
-
要素の幅をいろんな写真の幅に...
-
gif画像でたまに背景がグレーに...
-
background-sizeの背景で最小値...
-
背景が透明な画像をwebサイトに...
-
htmlかcssで背景の白い枠をなく...
-
画像横の余白をなくしたいんで...
-
背景固定、文字がスクロールす...
-
画像上に文字を表示するとiPhon...
-
背景画像をリンクにする?
-
CSSで複数の背景画像を実装する...
-
ワードプレスで事前定義されたc...
-
同じ画像 複数回使用
-
画像の上にテキスト配置で、拡...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
画像の上にテキスト配置で、拡...
-
<hr>の縦バージョンはありますか?
-
【至急お助け!】チェックボッ...
-
画像とその下にあるテキストの...
-
background-repeat CSS で切れ...
-
画像を複数横に並べ、かつそれ...
-
コーディング中、右側に謎の余...
-
同じ画像 複数回使用
-
background-sizeの背景で最小値...
-
htmlかcssで背景の白い枠をなく...
-
lightbox2で画像を天地左右中央...
-
HP作成 作成した画像を動画の上...
-
要素の幅をいろんな写真の幅に...
-
iframe内をクリックさせない方...
-
background-sizeでcontainする...
-
画像上に文字を表示するとiPhon...
-
IMGタグで画像の繰り返し使用は…
-
疑似要素で背景画像に指定したS...
-
スクロールすると追従する画像...
-
HTMLで使う「見出し」は英文で...
おすすめ情報