CSSで背景をランダム表示させたい
CSS初心者です。
3分割のフレームのサイトで、mainページの背景をCSSで指定しているのですが
それをランダムに5種類の画像を表示出来るようにしたいのですが
何度やってもやり方が分からず教えてもらえませんでしょうか・・・
PHPは対応していないサーバーなので無理でした。
http://okwave.jp/qa/q4805263.htmlこちらも試してみましたが出来ませんでした・・・
どうかご教授願います。
style.CSSから抜粋↓
/* デザイン全般設定 */
.ta1{border-bottom:1px solid #cccccc;background-color:#eeeeee;}
.ta2{background:url(bg02.gif) repeat-y 260px 0px;}
.ta3{background:url(bg01.jpg) repeat-y 95% 0%;}
#enter_page{overflow:hidden;}
#main_page{background:url(img/hptop1109.jpg) no-repeat 100% 50% fixed;}←ここでmainページの背景を指定しています。
#menu_page{border-bottom:1px solid #cccccc;background-color:#eeeeee;}
#left_page{background:url(bg02.gif) repeat-y 260px 0px fixed;}
.back{font-size:17px;text-align:right;background:url(back.gif) no-repeat 160px 90%;margin:20px 0px 0px 0px;padding:15px 20px 5px 0px;}
.back a:hover{text-decoration:underline;}
#main_page{background:url(img/hptop1109.jpg) no-repeat 100% 50% fixed;}
</style>
<script type="text/javascript">
window.onload = function(){
//var url = "a.jpg,b.jpg,c.jpg".split(',');
var url=[];
url[0] = 'top_bg01.jpg';
url[1] = 'top_bg02.jpg';
url[2] = 'top_bg03.jpg';
var n = Math.floor(Math.random() * url.length);
var elm = document.getElementById('main');
elm.style.backgroundImage = 'url(/image/' + url[n] + ')';
}
</script>
↑このように、#main_page{background~~の後ろに、参考サイトのをコピペしても何も表示されず背景は白のままになってしまいました。
色々頑張ってみたのですが分からないので、どなたか教えてくれませんか・・・
他に必要なソースがあれば追記いたします。
どうぞよろしくお願いいたします。