背景ランダム

解決済

質問者：ringerhat
質問日時：2006/03/30 15:04
回答数：3件

JavaScriptを使って背景をランダムに変更したいので
すが、その背景ごとにを左上固定や縦リピートなど
を設定することは出来るのでしょうか？
宜しくお願い致します
ちなみにCSSは基本だけですが理解しています

<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>

通報する

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

質問の本文を隠す

回答 (3件)

No.1ベストアンサー

回答者： yambejp
回答日時：2006/03/30 16:37

classを切り替えてみてはどうでしょうか？

<html>
<head>
<style type="text/css">
.s1{
background-image:url("1.jpg");
background-repeat:no-repeat;
}
.s2{
background-image:url("2.jpg");
background-repeat:repeat-y;
}
.s3{
background-image:url("3.jpg");
background-repeat:repeat-x;
background-position:bottom;
background-attachment:fixed;
}
</style>
<script language="javascript">
function onloadFunc(){
var max=3;
var wall=Math.floor(Math.random() * max) +1;
if (wall==1) document.body.className="s1";
if (wall==2) document.body.className="s2";
if (wall==3) document.body.className="s3";
}
</script>
</head>
<body onLoad="onloadFunc()">
テスト
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

ありがとうございます！解決いたしました！！

通報する

お礼日時：2006/04/16 19:20

No.2

回答者： NTJ
回答日時：2006/04/03 13:18

手法としては#1さんの回答で充分とは思いますが、背景の管理という面を考慮すると、全体を配列で扱う方が楽かも、です。

<SCRIPT>
var dat=[
'url("1.jpg") no-repeat',
'url("2.jpg") repeat-y',
'url("3.jpg") repeat-x bottom fixed'];

function randomWall(){
document.body.style.background = dat[Math.floor(Math.random()*dat.length)];
}
</SCRIPT>

これでイケる筈・・・（ノーテストです。。）

- 0
- 件

通報する

No.3

回答者： NTJ
回答日時：2006/04/03 13:29

あ、下の例はBODYエレメントの style background へ、個別には何も指定していないことを前提にしてます。

background-repeat: や
background-position: などが個別に指定されている場合、そっちのほうが優先されてしまうみたいですね。

そういう場合への別解も一応・・・

<SCRIPT>
var dat=[
['#000000','url("1.jpg")','no-repeat','',''],
['','url("2.jpg")','repeat-y','',''],
['','url("3.jpg")','repeat-x','fixed','','bottom'];
var pColor = 0;
var pImage = 1;
var pRepeat = 2;
var pAttachment = 3;
var pPositionX = 4;
var pPositionY = 5;

function randomWall(){
var wall = Math.floor(Math.random()*dat.length);
document.body.style.backgroundColor = dat[wall][pColor ];
document.body.style.backgroundImage = dat[wall][pImage ];
document.body.style.backgroundRepeat = dat[wall][pRepeat ];
document.body.style.backgroundAttachment = dat[wall][pAttachment];
document.body.style.backgroundPositionX = dat[wall][pPositionX ];
document.body.style.backgroundPositionY = dat[wall][pPositionY ];
}
</SCRIPT>