- ベストアンサー
CSSで背景をランダム表示させたい
- CSSを使用して３分割のフレームのサイトで、mainページの背景をランダムに５種類の画像に設定したいです。
- 試した方法や参考サイトを試しても背景が表示されず、背景は白のままになってしまいます。
- PHPは対応していないサーバーなので、別の方法を探しています。どのように設定すればよいでしょうか？
- rom02
- お礼率89% (26/29)
- JavaScript
- 回答数4
- ありがとう数4
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
なるほど… CSSファイルに書いちゃだめですね(笑) もしやるなら、拡張子jsの独立したファイルにするか、HTMLの中に書きます。 1)画像を表示させたいHTMLファイルは、top.htmlです。 2)top.htmlは、サイトのトップの階層にあります。 3)「img」のフォルダはサイトのトップの階層（top.htmlや、style.css等のファイルがある階層)にあります。 ということなので、Javascriptのプログラム自体は正常に動くものであることがわかりました。 フレームについてわかりにくかったですか。つまり<frameset>と<frame>のタグを使用して、フレームの中にほかのファイルを表示「させている」のはどれですかという質問でした。 main.htmlがフレーム分割されていてその中にmenu、top、leftの各HTMLファイルですね。そしてtop.htmlが画像を表示させたいファイルであると。 では、top.htmlの<head></head>の中に <script type="text/javascript"> window.onload = function(){ 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); document.body.style.backgroundImage = 'url(/img/' + url[n] + ')'; } </script> ↑ これを入れます。 お礼でtop.htmlに入れてある例では<body></body>の中なので予定通りに動かなかったものとみられます。<head></head>の中なら大丈夫なはず。 これでもしだめならそろそろお手上げです(笑)
その他の回答 (3)
ん～？ ちょっと待った。main.htmlもフレーム分割されているんですか？それじゃあbackgroundImageは表示されませんよ？ 今出先なので帰ったら詳細に回答しますから、もう一度だけ確認させてください。 1)画像を表示させたいHTMLファイル名は？ 2)それはルートディレクトリ(サイトのトップの階層）にあるのですか？ 3)そこに「img」というフォルダは確かにありますか？ 4)質問した最初の時点で、画像を呼び出しているJavascriptが記述されていたファイル名は？ 以上を補足してもらえたら、次回で最終回答できるはずですのでよろしくお願いします。 あと、とりあえず、CSSは何も関係ないとだけお伝えしておきます。
お礼
お忙しい中ご返答ありがとうございます！ 1)画像を表示させたいHTMLファイル名は？ 画像を表示させたいHTMLファイルは、top.htmlです。 2)それはルートディレクトリ(サイトのトップの階層）にあるのですか？ top.htmlは、サイトのトップの階層にあります。 3)そこに「img」というフォルダは確かにありますか？ 「img」のフォルダはサイトのトップの階層（top.htmlや、style.css等のファイルがある階層)にあります。 4)質問した最初の時点で、画像を呼び出しているJavascriptが記述されていたファイル名は？ 最初に質問した時のjavascriptをコピペしたファイルは、「style.css」です。 ＞main.htmlもフレーム分割されているんですか？ main.htmlもフレーム分割・・・されてるんでしょうか・・・？；よく意味が分からなかったです・・・；； 上部にメニューがあり、左側にメニューから開いた各作品リストが表示され、右側の大きい部分で作品が表示される、というようなスタイルになっています。 言ってる意味が伝わらなかったらごめんなさい・・・！ どうぞよろしくお願いします＞＜
カテゴリは管理している人がそのうち移動してくれるはずです。 改めて確認します。 TOP.html(ちなみに大文字は推奨されません)がフレーム割りしてあって、その中にあるmain.htmlの背景画像をランダム表示ですよね？ 質問文であげられたスクリプトが行っている動作は、このスクリプトが書かれているHTMLファイルの「main」というidをつけたタグの要素の背景をランダムで表示します。表示する画像は、このHTMLファイルと同じフォルダにある「image」フォルダの中にあるtop_bg01～03.jpgです。 これはおそらく質問者さんの望む動作と異なるんではないでしょうか？ main.htmlの背景をランダムに表示したいのであればgetElementByIdは使用しません。 画像ファイルの位置が正しく、かつこのスクリプトがmain.htmlから呼び出されるかmain.htmlの中に書いてあるという前提で var elm = document.getElementById('main'); elm.style.backgroundImage = 'url(/image/' + url[n] + ')'; を document.body.style.backgroundImage = 'url(/image/' + url[n] + ')'; に変えてください。 この2行は、上記で説明したとおり「id="main"」がついたタグを見つけ出し、その要素の背景を指定しています。 document.bodyはそのスクリプトが実行されるHTMLファイルの<body></body>の中のことです。 ファイル名、フォルダ名があわせてあるならこれで表示されるはずですがいかがでしょうか？
お礼
返信遅くなりましたすいません！ ＞改めて確認します。 TOP.html(ちなみに大文字は推奨されません)がフレーム割りしてあって、その中にあるmain.htmlの背景画像をランダム表示ですよね？ はい。main.htmlの背景をランダム表示したいのです。 main.htmlのメインフレームと、 left.htmlの左側フレームと、 menu.htmlの上側フレームの３分割のサイトなのですが、このメインフレームの背景をランダム表示したいのです。 (訪問者さんがindexからtopページに入った時に、毎回違う画像だと少しは楽しんでもらえるのでないかと！） ＞画像ファイルの位置が正しく、かつこのスクリプトがmain.htmlから呼び出されるかmain.htmlの中に書いてあるという前提で var elm = document.getElementById('main'); elm.style.backgroundImage = 'url(/image/' + url[n] + ')'; を document.body.style.backgroundImage = 'url(/image/' + url[n] + ')'; に変えてください。 このスクリプトは、main.htmlのファイル内に記入するだけでいいのでしょうか？ それともstyle.cssファイルでしょうか・・・？； top.htmlファイルに記入・・・？？； ↓main.htmlファイル↓ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-style-Type" content="text/css"> <title>-post mortem-</title> </head> <frameset rows="45,*" frameborder="0" border="0"> <frame src="menu.html" name="menu" scrolling="no"> <frameset cols="280,*" frameborder="0" border="0"> <frame src="left.html" name="left" scrolling="auto"> <frame src="top.html" name="main" scrolling="yes"> </frameset> <noframes> <body> フレーム対応のブラウザでご覧ください。 <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); document.body.style.backgroundImage = 'url(/img/' + url[n] + ')'; } </script> </body> </noframes> </frameset> </html> 挿入する位置が間違っているのでしょうか？根本的に違うんでしょうか？？； それと、自サイトの画像が入っているフォルダ名が「img」だったので、直しましたが やはり表示されませんでした。 （main.htmlやtop.htmlやstyle.cssファイルがある階層にimgフォルダがあり、 imgフォルダ内にtop_bg01.jpgデータが入っているので場所は合っていると思うのですが・・・) それともstyle.cssファイルに記入なのかと思ったのでやってみたのですがダメで・・・ ↓style.cssより抜粋↓ /* デザイン全般設定 */ .ta1{border-bottom:1px solid #cccccc;background-color:#eeeeee;} .ta2{background:url(bg02.gif) repeat-y 260px 0px;} .ta3{background:url(bg01.jpg) repeat-y 95% 0%;} #enter_page{overflow:hidden;} #main_page{background:url(img/hptop1109.jpg) no-repeat 100% 50% fixed;} #main_page{background:url(img/hptop1109.jpg) no-repeat 100% 50% fixed;} </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); document.body.style.backgroundImage = 'url(/img/' + url[n] + ')'; } </script> #menu_page{border-bottom:1px solid #cccccc;background-color:#eeeeee;} #left_page{background:url(bg02.gif) repeat-y 260px 0px fixed;} .back{font-size:17px;text-align:right;background:url(back.gif) no-repeat 160px 90%;margin:20px 0px 0px 0px;padding:15px 20px 5px 0px;} .back a:hover{text-decoration:underline;} それとも、top.htmlのファイルに入れるのだろうかと試してみましたが何がなにやらでもう・・・(泣 ↓top.html↓ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-style-Type" content="text/css"> <link rel="stylesheet" type="text/css" href="style.css"> <title>ｘｘｘｘｘ</title> </head> <body id="main_page"> <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); document.body.style.backgroundImage = 'url(/img/' + url[n] + ')'; } </script> <h2>更新履歴</h2> <div class="text1"> <textarea cols="55" rows="6" readonly="readonly"> ～～～～ top.htmlで見ると、id=main_pageというカテゴリのようだったので、 それも関係してるのかな？と思ったのですが 教えてくださった文章だとid=mainを探して～というのは最初の時の話なので違うようだし・・・ 自身で精一杯頑張ってみたのですがどうにも分からないので、 どうか教えてくださると大変助かります。 どうぞよろしくお願いいたします。
<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> えー 本当にコピペしたまま使ってるみたいですが、画像のファイル名とフォルダ名は合わせてあるんですか？ あとCSSじゃないのでカテ違い。
お礼
あぁああカテゴリ違いでしたかすいませ・・・！！ 最初、 url[0] = 'img/hptop1001.jpg'; url[1] = 'img/hptop1002.jpg'; url[2] = 'img/hptop1003.jpg'; と入力してやってみたのですが表示されず画面は真っ白だったので、 参照と同じファイル名に画像名を変更してやってみたのですがやっぱりだめで おろおろしていました。 いっそスタイルシートの方で背景を指定せず、TOP.htmlファイルの方で背景を指定したら出来るのかなと思って、 （indexからTopページに移った時に、topの背景をランダムに変えたいのです） スタイルシートの背景指定の項目を消して ランダム表示出来るとあるjava scriptを検索しtop.htmlファイルに貼り付けてみたのですが 表示されなく、３分割フレームを使っているので、topページが表示されるmain.htmlファイルにも ランダム表示できるjava scriptを貼ったらいいのか、訳が分からなくなってしまい・・・ 何か方法はないでしょうか？ カテゴリー直して質問しなおした方がいいのであればそうします！
お礼
ほぁああっ!! 出来ました!! 教えてくれた通りに、top.htmlの <head></head>の中にjavascriptをコピペしたら 見事ランダム表示されました！！ うわぁあああ凄く嬉しいです！！やったぁあああありがとうございます！！ ここまで色々教えてくれて本当にありがとうございます！！ おかげさまで、サイトのトップページが華やかになって訪問者の方にも少しでも楽しんでもらえそうです～～^-^ 本当にありがとうございました！ 心から感謝します！ありがとうございます！！