- ベストアンサー
背景ランダム
JavaScriptを使って背景をランダムに変更したいので すが、その背景ごとにを左上固定や縦リピートなど を設定することは出来るのでしょうか？ 宜しくお願い致します ちなみにCSSは基本だけですが理解しています <SCRIPT LANGUAGE="JavaScript"> <!-- function randomWall() { if (navigator.appVersion > '5' || (navigator.appName == 'Microsoft Internet Explorer' && navigator.appVersion > '4')) { var max = 6; wall = Math.floor(Math.random() * max) + 1; if (wall == 1) { document.body.background = '1.gif' } else if (wall == 2) { document.body.background = '2.gif} } } //--> </SCRIPT>
- ringerhat
- お礼率28% (9/32)
- JavaScript
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
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>
その他の回答 (2)
- NTJ
- ベストアンサー率44% (46/103)
あ、下の例は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>
お礼
色々な方法でアプローチできるのですねぇ 面白いです！ありがとうございました！
- NTJ
- ベストアンサー率44% (46/103)
手法としては#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> これでイケる筈・・・（ノーテストです。。）
お礼
ありがとうございます！解決いたしました！！