- ベストアンサー
CSSで背景画像をランダムに表示する方法
- CSSを使用して特定の要素の背景画像をランダムに表示させる方法について説明します。
- 具体的な対応方法として、JavaScriptで要素にランダムなクラスを割り当て、そのクラスに対応する背景画像を設定する方法があります。
- また、スタイルシート内でランダムな数値を生成し、それに基づいて背景画像を設定する方法もあります。
- speedofhiro
- お礼率43% (14/32)
- HTML
- 回答数3
- ありがとう数1
- みんなの回答 （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>
その他の回答 (2)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
HTMLもCSSも触らず、また、訪問者側の環境に依存するjavascriptも使わずにできます。PHPでも可能ですが、乱数発生とかややこしいので、CGIを別途おきましょう。 月ごとに変えるものは作ったことがあるのですが、ちょっと応用が利くものを思案中。
補足
なるほど！CGIは全く頭にありませんでした。 どんな感じのCGIが簡単に使えるでしょうか？
CSSでは無理です。 Javascriptで実行します。 検索すれば出ますよ。 Javascript ランダム表示
お礼
やってみたのですが、うまく出来ませんでした・・・。 参考を作って頂いたのに、申し訳ないです。 ありがとうございます。
補足
動きました。 id="main"を忘れてました。 ありがとうございます！！ 嬉しいです！