- ベストアンサー
固定の背景画像をランダム表示したい。
現在、HPを作成中なのですがどうしてもうまくいきません!!(>_<) お力をお貸しください!! ---- 固定してある背景画像を、アクセスするたびにランダム表示をしたいのです! 固定してない背景をランダム表示する方法はわかるのですが、固定してあるとどうしてもできません…。 なにかいい方法はありませんでしょうか? ちなみに画像が固定してある場所は、画像毎にちがいます。 よろしくお願いします!!
- みんなの回答 (2)
- 専門家の回答
質問者が選んだベストアンサー
せっかくスタイルで、あらかじめbodyのスタイルを2種類用意していても、 body{} body{} では、後の方が有効になってしまいます。 また、スクリプトで画像を指定するなら、スタイルの方で指定しても仕方ないです。 スクリプトで全て設定するのも1つの方法ですが、(最小限の変更で) スタイルを2つに分けてクラスの切り換えでやる方法のサンプルに書き換えてみました。 <body class="A"> <body class="B"> のようにしてスタイルをスクリプトから切り換えます IEとFireFoxで動作確認しました。 ----------------------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <TITLE>タイトルname</TITLE> <STYLE type="text/css"> <!-- body.A{ background-attachment:fixed; background-image : url(画像A.jpg); background-repeat:no-repeat; background-position:100% 0%;} body.B{ background-attachment:fixed; background-image : url(画像B.jpg); background-repeat:no-repeat; background-position:0% 100%;} --> </STYLE> </HEAD> <BODY> <script language="JavaScript"> <!-- topimg = new Array("A","B"); document.body.className = topimg[Math.floor(Math.random() * topimg.length)]; // --> </script> </BODY> </HTML>
その他の回答 (1)
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
現在は、どのようにやっておられるのでしょうか キモの部分のソースをアップしていただけませんか?
補足
お返事ありがとうございます。 回答が遅くなって申し訳ございません。 現在ソースはこのようなかんじデス。。。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <STYLE type="text/css"> <!-- body{ background-attachment:fixed; background-image : url(画像AのURL); background-repeat:no-repeat; background-position:100% 0%;} --> <!-- body{ background-attachment:fixed; background-image : url(画像BのURL); background-repeat:no-repeat; background-position:0% 100%;} --> </STYLE> <TITLE>タイトルname</TITLE> </HEAD> <BODY> <script language="JavaScript"> <!-- topimg = new Array("画像AのURL","画像BのURL"); document.body.style.backgroundImage = "url(" + topimg[Math.floor(Math.random() * topimg.length)] + ")"; // --> </script> </BODY> </HTML> …初心者なもので、たぶんぐっちゃぐちゃかもしれませんが、 よろしくお願いします。
お礼
ばっちりできました!!! ありがとうございます!!! sleionirとLunascapeでも動作しました♪ 内容もわかりやすく、とても勉強になりました。 本当にありがとうございますm(_ _)m