- 締切済み
cssで背景画像をランダム表示する
現在cssで背景画像をランダム表示するよう指示をしたいです。 テンプレート配布サイトからDLしたcssには以下のように指定されています。 ---- .menu{ float :left; background-image:url(img/menu_01.png); background-repeat:no-repeat; width :270px ---- このようなcss表記から画像をランダム表示に指定するには どのように加筆、修正をしたらよいのか教えて頂けますでしょうか。 似たような質問もたくさんされていたのでとても申し訳ないのですが、自力で色々試してみたものの、 どうしてもわからなかったので、お力を貸して頂ければ幸いです。 よろしくお願い致します。
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
なら、javascriptで、ページを開くたび<body onLoad="test()">とでもして、background要素を書き換えるくらいでしょう。 <script language="JavaScript"> <!-- Lines = 4; // ←画像の数（要変更） Mess = new Array( "<body background='画像URL'>", "<body background='画像URL'>", "<body background='画像URL'>", "<body background='画像URL'>" ); Rndm = Math.floor(Math.random()*Lines); document.write(Mess[Rndm]); // --> </script> あるいは、 <script language="JavaScript"> <!-- Lines = 4; Mess = new Array( "<body class=\"A\">", "<body class=\"B\">", "<body class=\"C\">", "<body class=\"D\">",>" ); Rndm = Math.floor(Math.random()*Lines); document.write(Mess[Rndm]); // --> </script> とか・・・ ただし、javascriptで記事の書き換えは停止しているユーザーやjavascriptを理解しないユーザーエージェントもあるのでお勧めとはいえない。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
最も簡単なのは、ごく簡単なCGIを作成することです。 たとえば、random.cgi(ファイル名は任意)は、指定されたディレクトリを開いて画像一覧を取り出し、その数とファイル名をリストとして取り込みます。 ついで、その数以内の乱数を作り、それからファイル名を選択したら、その画像のファイルを開いて、サイズを取得したらHTTP応答ヘッダで画像のタイプ、サイズを出力した後、そのファイルをそのまま出力させます。 十数行で終了する小さな小さなプログラムで済むでしょう。 そして、CSSにて background-image:url(cgi-bin/random.cgi);
補足
ご回答ありがとうございます！ ただ、私はCGIを使用した一度も事がないのと、使用しているサーバー（忍者ツール）さんは CGIの設置ができないようなのです。。 なので、可能であれば質問に記載してある現状のCSSへの加筆、修正等ができればと思っております。。