• ベストアンサー

固定の背景画像をランダム表示したい。

現在、HPを作成中なのですがどうしてもうまくいきません!!(>_<) お力をお貸しください!! ---- 固定してある背景画像を、アクセスするたびにランダム表示をしたいのです! 固定してない背景をランダム表示する方法はわかるのですが、固定してあるとどうしてもできません…。 なにかいい方法はありませんでしょうか? ちなみに画像が固定してある場所は、画像毎にちがいます。 よろしくお願いします!!

質問者が選んだベストアンサー

  • ベストアンサー
  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答No.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>

suzunari_rin
質問者

お礼

ばっちりできました!!! ありがとうございます!!! sleionirとLunascapeでも動作しました♪ 内容もわかりやすく、とても勉強になりました。 本当にありがとうございますm(_ _)m

その他の回答 (1)

  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答No.1

現在は、どのようにやっておられるのでしょうか キモの部分のソースをアップしていただけませんか?

suzunari_rin
質問者

補足

お返事ありがとうございます。 回答が遅くなって申し訳ございません。 現在ソースはこのようなかんじデス。。。 <!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> …初心者なもので、たぶんぐっちゃぐちゃかもしれませんが、 よろしくお願いします。