- ベストアンサー
背景ランダム
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> これでイケる筈・・・（ノーテストです。。）
関連するQ&A
- テーブルもしくセルの背景をランダムにしたいがうまくいかない
テーブルの背景を表示のたびに変えたいと思っています。 http://oshiete1.goo.ne.jp/kotaeru.php3?q=171099&rev=1 この記事を参考にしました。 用意している壁紙は7枚で画像ファイルは0～7.gifとしています。 記述するhtmlファイルと同じ階層にhaikeiフォルダを置き、その中に0～7.gif画像を入れました。画像の大きさは200*150で統一しています。 <SCRIPT LANGUAGE="JavaScript"> <!-- var imgback = "haikei/" ; var imgno = (Math.floor(Math.random() * 6) + 1) ; document.write("<TABLE frame=\"void\" cellpadding=\"0\" width=\"200\" height=\"150\" background = ", imgback+imgno ,".gif>"); document.write("<TR><td align=\"center\">hallo！</TD></TR>"); document.write("</TABLE>"); //--> </SCRIPT> ランダムにならないどころか何も表示されません。 どこがどう間違っているのでしょうか。
- ベストアンサー
- JavaScript
- 時間帯によって背景画像を変える
タイトル通りなのですが、なかなかうまくいきません・・・。 <BODY style="background-image:url(test.gif);background-repeat:no-repeat; background-attachment:fixed;background-position:bottom right;"> スタイルを使って右下に背景画像を表示しています。このtest.gifを時間帯によって変えたいです。 自分なりにこのようにしてheadタグの中に埋め込みましたがうまくいきません。 <SCRIPT LANGUAGE="JavaScript"> <!--- function geth(t){ if (t<=5) document.write("<BODY style='background-image:url(test1.gif);background-repeat:no-repeat; background-attachment:fixed;background-position:bottom right;'>"); else { if (t<=11) document.write("<BODY style='background-image:url(test2.gif);background-repeat:no-repeat; background-attachment:fixed;background-position:bottom right;'>"); else { if (t<=17) document.write("<BODY style='background-image:url(test3.gif);background-repeat:no-repeat; background-attachment:fixed;background-position:bottom right;'>"); else { if (t<=23) document.write("<BODY style='background-image:url(test4.gif);background-repeat:no-repeat; background-attachment:fixed;background-position:bottom right;'>"); }}} } //---> </SCRIPT> <SCRIPT LANGUAGE="JavaScript"> <!--- h = new Date(); geth(h.getHours()); //---> </SCRIPT> <BODY BACKGROUND='test.gif'>という普通の背景の表示の仕方ならうまくできました。スタイルはheadの中では使えないのでしょうか・・・？どのようにすればうまくいくでしょうか？JavaScriptに関してはほとんど無知ですがよろしくおねがいします。 ※意味不明なことを言っていたらすみません。
- ベストアンサー
- JavaScript
- セルの背景画像ランダムチェンジがうまくいきません！
過去の質問などを参考にセルの背景画像のランダムチェンジのソースを作りましたがうまく表示されません！何かアドバイスがあれば是非お願いします。 <head> <script language="javascript"> var BGimg=new Array(); BGimg[0]="image/01.gif"; BGimg[1]="image/02.gif"; var img_pcs=BGimg.length;//画像の数 var rdm_num=Math.floor(Math.random()*img_pcs);//乱数 function chg_BGimg(){ document.getElementById("changeIMG").style.backgroundImage="url('"+BGimg[rdm_num]+"')"; } </script> </head> <body onload="chg_BGimg();"> <table bgcolor="#333333"> <tr> <td id="changeIMG" style="background-image:url('image/first.gif');">このセルの背景が変わります</td> <td>blank</td> <tr> </table> </body> （実際のテーブルは列11×行9です。） 以上がソースです。どうも初期設定のfirst.gifが一瞬だけ表示されて、あとはテーブルの背景色になり、何も画像が表示されてず、「×」マーク（画像が見つからなかった場合にでるアイコン）もないのです。 このソースの改良点または、全く違う方法でも結構です、何かアドバイスがあれば是非お願いします。よろしくお願いします！
- ベストアンサー
- JavaScript
- 背景画像のランダム表示
お世話になります。 PHP勉強中です。 1.背景画像のランダム表示：bodyタグ内でなくdiv内の背景画像を変更したい。bottom right指定等施したいのでスタイルシートで書き出す？？ 2.確率を設定したい：1枚の基本画像が60％表示され、それ以外の複数の画像が40％で選択、その中で画像をランダムに設定したい。 3.使用する画像は同一フォルダ内にある、背景画像以外はいれない。今後枚数を増やしていく予定なので、ファイル名を1つずつ指定するのではなく、フォルダ内の画像を読んで、配列に・・・ と、やりたいことはあるのですが、どうやったらいいのやら・・・頭が混乱してます（汗） 私のサイトに訪問される方でjsをOFFにされている方が多少いらっしゃるので、どうせならPHPで！と意気込んでみたのですが・・・ もしよろしかったらご教授下さいませ。 よろしくお願い致します。 参考：現在設置のjsファイル <script> wall = new Array(); wall[0] = "./image/bg01.jpg"; wall[1] = "./image/bg02.jpg"; wall[2] = "./image/bg03.jpg"; wall[3] = "./image/bg04.jpg"; wall[4] = "./image/bg05.jpg"; wall[5] = "./image/bg06.jpg"; wall[6] = "./image/bg07.jpg"; wall[7] = "./image/bg08.jpg"; rnd = Math.round(Math.random() * (wall.length - 1)); document.write('<style type="text/css">div.mainTOP { background:url(' , wall[rnd] , ') no-repeat bottom right #FAFAFA; }</style>'); </script>
- ベストアンサー
- PHP
- ランダムに背景画像を変える方法。
掲示板などのCGIの背景をランダムに変えたいのですが、 どうすればいいのでしょうか？ あるサイトでは、 @backimg =('img1.gif', 'img2.gif', 'img3.gif'); srand(time); $imgno=rand($#backimg+1); そして $body="<body background=\"$backimg[$imgno]\">"; となっていたのですが、これをCGIに埋め込んでもうまく動きません。 (img1.gifしか表示されません。) どうすれば背景画像をランダムに変化させることができるのでしょうか？
- ベストアンサー
- CGI
- document.write が作動してくれません！
/* ブラウザが 「IE Version 5 以上」 または 「Netscape Navigator Version 4 以上」 のときに文字列を出力するつもりで、以下のscriptを書きましたが、IE Version 6 のパソコンで文字列が出力されません。 （エラーにはなりません。インターネット・セキュリティは既定レベルの「中」です。） 何が間違いなのかお教えくださいませ。 <script type="text/javascript"> <!-- if ( ( (navigator.appName.indexOf("Microsoft") >=0)&&(navigator.appVersion.charAt(0) >4) ) || ( (navigator.appName.indexOf("Netscape") >=0)&&(navigator.appVersion.charAt(0) >3) ) ) { document.open(); document.write("「パソコン申し込み」 では、入力していただいた貴下の個人情報を送信する際に、情報の暗号化をおこないます。"); document.close(); } //--> </script> */
- 締切済み
- JavaScript
- ランダムに流れるMIDIを止める
ホームページで、『ランダムにMIDIを流す』を取り入れました。 見ている人が、画像（●●●.gif/ストップと書いたもの）を押したら、曲が止まるようにしたいのですが。 <HTML> <HEAD> <TITLE> </TITLE> </HEAD> <SCRIPT language="JavaScript"> <!-- BGM = new Array(7); BGM[0]="1.mid"; BGM[1]="2.mid"; BGM[2]="3.mid"; BGM[3]="4.mid"; BGM[4]="5.mid"; BGM[5]="6.mid"; BGM[6]="7.mid"; maxSound = 6; function setBGM() { soundNo = Math.floor(Math.random()*maxSound); if (navigator.appName == "Netscape") document.writeln("<EMBED src='",BGM[soundNo],"' autostart=true loop=true>"); else document.writeln("<BGSOUND src='",BGM[soundNo],"' loop=infinite>"); } // --> </SCRIPT> <SCRIPT language="JavaScript"> <!-- setBGM(); // --> </SCRIPT> <CENTER> <TABLE width="594"> <TBODY> <TR> <TD width="220"><BR>メール送信はこちらから</TD> <TD height="26" align="center" width="106"><A href="mailto:○○○?Subject=ホームページから"> <IMG src="mail.gif" width="57" height="80" border="0" alt="メールくださいね"></A></TD> <TD nowrap height="26" align="center" width="235"><FONT color="#ff2492">SOUND OFF</font> <img src="●●●.gif" border="0"></a> <BR> <FONT color="#0000a0">２００２．３．１１ 更新<BR></FONT></TD> </TR> </TBODY> </TABLE> </CENTER> </BODY> </HTML> 簡単に出来る方法がありましたら、教えてください。
- ベストアンサー
- JavaScript
- スクロールの時間調節
初めて投稿します。 よろしくお願いします。 下記のような ソースで テキストのスクロールをしようと思いますが スクロールの早さの調節をしたい場合どうしたらよいのでしょう？ プログラムには詳しくないので すぐに使える状態で教えていただけませんか？ <SCRIPT language=JavaScript> <!-- var count,max,timer function init(){ count=0 max=(document.all?document.body.scrollHeight:document.height?document.height:1000) autoScroll() } function autoScroll() { if(navigator.appVersion.charAt(0)>=3) { if(count<max) { window.scroll(0,count++); timer=setTimeout("autoScroll()",4); } } } //--> </SCRIPT> <BODY onload=init()>
- 締切済み
- JavaScript
- ブラウザが判別出来ない。
お世話になっております。 JavaScriptの本を購入しました。 その本にブラウザ判定のスクリプトが掲載されており、それをそのままアップしたところ、私はIE6なのにIE4と判別されてしまいました。 下記がそのスクリプトです。 ちなみに、私はXPのIE6です。 このスクリプトはこれで完璧なのでしょか？ また、出来ましたら、このスクリプトを試していただけたらと思うのですが・・・よろしくお願い致します。 <script language="JavaScript"> <!-- if( navigator.appVersion.charAt(0)==4){window.location.href = "nn4.html"} // NN Ver4 の場合 if( navigator.appVersion.charAt(0)==5){window.location.href = "nn5.html"} // NN Ver5 の場合 if( navigator.appVersion.charAt(0)==6){window.location.href = "nn6.html"} // NN Ver6 の場合 } if( navigator.appName.charAt(0)=="M"){ if( navigator.appVersion.charAt(0)==2){window.location.href = "ie2.html"} // IE Ver2 の場合 if( navigator.appVersion.charAt(0)==3){window.location.href = "ie3.html"} // IE Ver3 の場合 if( navigator.appVersion.charAt(0)==4){window.location.href = "ie4.html"} // IE Ver4 の場合 if( navigator.appVersion.charAt(0)==5){window.location.href = "ie5.html"} // IE Ver5 の場合 if( navigator.appVersion.charAt(0)==6){window.location.href = "ie6.html"} // IE Ver6 の場合 } //--> </script> <noscript>JavaScript を使用しています。JavaScript を有効にしてください。</noscript>
- ベストアンサー
- JavaScript
- ランダム表示の画像位置
初めまして、本当に初心者な質問で 申し訳ないのですが回答を頂ければ 嬉しく思います。 ホームページビルダー7ライトを使い、 画像をランダムで変えたいと思って 調べてやってみたところ、以下の JavaScriptで一応は出来たんです。 <script language="JavaScript"> <!-- img = new Array img[0] = "gif/1.gif"; img[1] = "gif/2.gif"; img[2] = "gif/3.gif"; img[3] = "gif/4.gif"; img[4] = "gif/5.gif"; rnd = Math.floor(Math.random() * img.length); document.write("<img src='",img[rnd],"'>"); //--> </script> しかし、画像が一番左上に出てしまいます。 これを位置調整しようと思ったらどんな JavaScriptを使えばよろしいでしょうか？ 本当に申し訳ありませんが、回答の方を どうかよろしくお願い致します。
- ベストアンサー
- JavaScript
お礼
ありがとうございます！解決いたしました！！