背景画像をCSSにてランダムに表示する方法を教えてください。

現在 @import "bg.css" というCSSファイルから背景画像を指定したCSSファイルを読み込ませています。
背景画像は複数用意しておりまして、ページごとに違う種類を指定しているのですが、これを新たに変えてみようと思います。
複数枚ある背景画像を一つのディレクトリにいれて、各ページからランダムに毎回違うCSSファイルを読み込ませ背景を毎回変わるようにしたいのです。JavaScriptは利用せずにCSSでこれを実現できないでしょうか。もしJavaScriptしかないのならその方法で、毎回違うCSSファイルを読み込む @importさせる方法を教えてください。お願いします。

回答の条件
  • 1人1回まで
  • 登録:2006/10/02 10:52:42
  • 終了:2006/10/05 15:50:34

ベストアンサー

id:susie-t No.1

susie-t回答回数99ベストアンサー獲得回数182006/10/02 12:41:12

ポイント70pt

JavaScriptでしかできないと思います。

<html>
<head>
<title></title>
<link rel="stylesheet" href="bg.css" type="text/css" id="css"/>
<script>
<!--
var cssAray = ["bg0.css", "bg1.css", "bg2.css"];
var css = cssAray[Math.floor(Math.random() * cssAray.length)];
document.getElementById("css").href = css;
//-->
</script>
</head>
<body>
</body>
</html>

cssArayのメンバを増やせばその分対応します。

id:BrainCHAOS

回答有り難うございます。

教えていただいたソースを使ってみましたが、なぜか実現できません。私のスキルのせいなのですが、もう少し詳しく教えていただけますか?

2006/10/02 15:05:40

その他の回答(1件)

id:susie-t No.1

susie-t回答回数99ベストアンサー獲得回数182006/10/02 12:41:12ここでベストアンサー

ポイント70pt

JavaScriptでしかできないと思います。

<html>
<head>
<title></title>
<link rel="stylesheet" href="bg.css" type="text/css" id="css"/>
<script>
<!--
var cssAray = ["bg0.css", "bg1.css", "bg2.css"];
var css = cssAray[Math.floor(Math.random() * cssAray.length)];
document.getElementById("css").href = css;
//-->
</script>
</head>
<body>
</body>
</html>

cssArayのメンバを増やせばその分対応します。

id:BrainCHAOS

回答有り難うございます。

教えていただいたソースを使ってみましたが、なぜか実現できません。私のスキルのせいなのですが、もう少し詳しく教えていただけますか?

2006/10/02 15:05:40
id:pi8027 No.2

pi8027回答回数4ベストアンサー獲得回数02006/10/02 19:15:18

CSSをCGI等で出力すれば良いのでは?

画像のURIの部分だけ乱数とか使って……

id:BrainCHAOS

その方法を教えて欲しいのですが・・・

2006/10/02 21:51:05
  • id:susie-t
    回答回数が制限されているのでコメントします。

    こちらではそのままコピーしてOS:WinXP SP2、ブラウザ:IE6、Netscape7.1、Firefox1.5.0.4、Opera9 で動作確認しましたが・・・。

    ただのランダムなので、同じスタイルが続けて適用される場合もあります。

    やっていることは、
    -linkタグにidを指定
    -getElementByIdでそのオブジェクトを取得
    -そのhrefプロパティに適用したいcssのアドレスを指定する
    です。指定した時点で適用されるcssが変わります。
    >||
    var cssAray = ["bg0.css", "bg1.css", "bg2.css"];
    ||<
    は以下と同じです。
    >||
    var cssAray = new Array();
    cssAray[0] = "bg0.css";
    cssAray[1] = "bg1.css";
    cssAray[2] = "bg2.css";
    ||<
    >||
    Math.floor(Math.random() * (整数))
    ||<
    で、0~(整数)-1までの整数の乱数が生成されます(Math.floorは端数切捨て、Math.randomは乱数生成(0~1未満))。ここでは(整数)に上記配列の要素数(lengthプロパティ)を設定しています。

    一応、使用したcssファイルは以下です。
    >||
    [bg.css]スクリプトが動作しないときのcss
    body{background-color:blue;}
    [bg0.css]
    body{background-color:red;}
    [bg1.css]
    body{background-color:yellow;}
    [bg2.css]
    body{background-color:green;}
    ||<
    htmと同じディレクトリに置けば動作します(無論、違うディレクトリなら相対もしくは絶対アドレス指定が必要です)。

    linkタグより前にスクリプトを書かないでください。getElementByIdで取得できないので・・・。

    あとはソースを見てみないと何ともいえないですね・・・。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません