プロが教えるわが家の防犯対策術！

cssで背景画像をランダム表示する

締切済

  • 質問者：fitsong
  • 質問日時：
  • 回答数：2件

現在cssで背景画像をランダム表示するよう指示をしたいです。
テンプレート配布サイトからDLしたcssには以下のように指定されています。
----
.menu{
float :left;
background-image:url(img/menu_01.png);
background-repeat:no-repeat;
width :270px
----
このようなcss表記から画像をランダム表示に指定するには
どのように加筆、修正をしたらよいのか教えて頂けますでしょうか。

似たような質問もたくさんされていたのでとても申し訳ないのですが、自力で色々試してみたものの、
どうしてもわからなかったので、お力を貸して頂ければ幸いです。
よろしくお願い致します。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (2件)

No.2

  • 回答者： ORUKA1951
  • 回答日時：

なら、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を理解しないユーザーエージェントもあるのでお勧めとはいえない。
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： ORUKA1951
  • 回答日時：

最も簡単なのは、ごく簡単なCGIを作成することです。


たとえば、random.cgi(ファイル名は任意)は、指定されたディレクトリを開いて画像一覧を取り出し、その数とファイル名をリストとして取り込みます。
　ついで、その数以内の乱数を作り、それからファイル名を選択したら、その画像のファイルを開いて、サイズを取得したらHTTP応答ヘッダで画像のタイプ、サイズを出力した後、そのファイルをそのまま出力させます。
　十数行で終了する小さな小さなプログラムで済むでしょう。

そして、CSSにて
background-image:url(cgi-bin/random.cgi);

この回答への補足

ご回答ありがとうございます！
ただ、私はCGIを使用した一度も事がないのと、使用しているサーバー（忍者ツール）さんは
CGIの設置ができないようなのです。。

なので、可能であれば質問に記載してある現状のCSSへの加筆、修正等ができればと思っております。。

補足日時：2012/06/28 12:53
通報する
    • good
    • 0
    • 件
通報する

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

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報