人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

Javascriptを使用し、ランダムに背景画像を表示させたいと思っています。且つ、背景画像自体の指定はスタイルシートにて行いたいと思っているのですが、どのようにして両方を組み合わせればよいでしょうか。
スタイルシートは外部から読み込ませるもので、
body{
background-image: url(XXX.gif);
background-position: 550px 90%;
background-repeat:no-repeat;
background-attachment: fixed;
}のような感じです。
Javascriptはhttp://homepage3.nifty.com/west-mira/javascript/picture/background5.htmlのものを使わせていただこうと思っています。ソースを書いていただいても、この両方の組み合わせ方を教えていただいてもどちらでも構いませんが、なるべく具体的にお願い致します。

●質問者: Poupee_de_cire
●カテゴリ:ウェブ制作
✍キーワード:background background-image background-position background-repeat BODY
○ 状態 :終了
└ 回答数 : 4/4件

▽最新の回答へ

1 ● akimasa2000
●30ポイント

<script language=”JavaScript”>

<!--//Copyright (C) WEST MiRa

http://homepage3.nifty.com/west-mira/

WEST MiRa

my_pics=new Array();

//ランダムで表示したい画像を指定する

my_pics[0]=’0.gif’;

my_pics[1]=’1.gif’;

my_pics[2]=’2.gif’;

my_pics[3]=’3.gif’;

my_pics[4]=’4.gif’;

a=Math.floor(Math.random()*my_pics.length);

document.write(’<style type=”text/css”>’);

document.write(’body{’)

document.write(’background-image: url(”’+my_pics[a]+’)’);

//-->

</script>

background-position: 550px 90%;

background-repeat:no-repeat;

background-attachment: fixed;

}

</style>

このような感じだと思います

◎質問者からの返答

ありがとうございます。

これをそのまま、外部に指定しているスタイルシートの中に入れればよいのでしょうか?


2 ● aki73ix
●25ポイント

http://tohoho.wakusei.ne.jp/js/math.htm#xRandom

普通にランダムにファイル名を変えてはいかがでしょうか?

例:

fName = ””;

a = Math.random()*2;

if (a<= 0) fName = ”test1.css”;

else fName = ”test2.css”;

document.write(”<link rel=’stylesheet’ href=’”+fName+”’ type=’text/css’>”);

◎質問者からの返答

ありがとうございます。

そういう方法もあるのですね。

ただ、スタイルシートには背景の画像以外の要素についても指定しているので、背景画像のみ変えられる方法はないかなあ…と思って質問致しました。


3 ● akimasa2000
●0ポイント

先ほどの補足です。Javascriptを使っているので、HTMLのHEAD要素内に入れてください。

◎質問者からの返答

わざわざありがとうございます。

ぅぅ、HTMLのHEAD要素内に入れてみたのですが、

なぜか、

background-position: 550px 90%;

background-repeat:no-repeat;

background-attachment: fixed;

}がページ内に表示されてしまいました。


4 ● aki73ix
●25ポイント

http://www.cybergarden.net/javascript/js_bcgimage.html

Javascriptだけで後で、背景画像を変更したり

最初にランダムで変更したりも出来ます

リンク先参照

ただスタイルシートを使った固定背景を使う

(スクロールさせても動かない奴とか)を使うなら最初の回答の様にスタイルシートを読み込んでください

http://www.azemichi.net/javascript/script6.htm

ランダム背景画像表示

◎質問者からの返答

ありがとうございます。

追記;最初の回答についてですが、’と”を半角に直し、

document.write(’background-image: url(”’+my_pics[a]+’”);’);

としてみたところ、うまく表示させることが出来ました。

ということで、質問を終了させていただきます。

お答えいただいた皆様、どうもありがとうございました。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ