• ベストアンサー

背景画像のランダム表示

お世話になります。 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
  • 回答数2
  • ありがとう数2

質問者が選んだベストアンサー

  • ベストアンサー
  • tao_0077
  • ベストアンサー率48% (33/68)
回答No.2

配列から指定数の要素をランダムで抜き出す array_rand という、そのものずばりなものもあります。 './image/bg04.jpg' , $walls = array( './image/bg01.jpg' ,'./image/bg02.jpg' ,'./image/bg03.jpg' ); $wall = array_rand( $walls ) ;

その他の回答 (1)

  • moon_night
  • ベストアンサー率32% (598/1831)
回答No.1

$walls = array( './image/bg02.jpg' ,'./image/bg03.jpg' ,'./image/bg04.jpg' ,'./image/bg05.jpg' ,'./image/bg06.jpg' ,'./image/bg07.jpg' ,'./image/bg08.jpg' ); if (rand(1, 10) < 7) { $wall = "./image/bg01.jpg"; } else { $wall = $walls[rand(0,count($walls))]; } 動作確認をしてないので動かないかもしれません。

関連するQ&A

  • CSSで背景画像をランダムに表示させたいのですが

    CSSで背景画像をランダムに表示させたいのですが、簡単な対応方法などありますでしょうか? 背景のランダム表示としてbody部分をjavascriptで背景のランダム処理はたくさんあるのですが、今回はスタイルシートでbodyではなく、サイト内のいち部分のクラス要素の背景をランダムに表示させたいと思っています。 <div class="main"> ここにコンテンツがあって、このmainのクラス要素の背景をランダムに変えたいです。 </div> スタイルシートの方では現在は .main { float:left; background-image:url(/image/top_bg01.jpg); background-repeat:no-repeat; min-width:736px; height:auto; border-right:1px solid #000000; } としており、このtop_bg01.jpgの部分の画像を top_bg01.jpg top_bg02.jpg top_bg03.jpg top_bg04.jpg top_bg05.jpg とランダムに表示させたいのですが、対応方法が分からずに困っています。 http://www.designwalker.com/2006/12/random-css.html はためしてみましたが、PHPがうまく対応できずに断念してしまいました。 どなた様か宜しくお願いいたします。

    • ベストアンサー
    • HTML
  • CSSレイアウトとJavascriptの連動について質問なのですが…

    過去の教えてgooの記事より見つけたJavascriptのテーブルの背景画像がランダムに変わるスクリプトを使用しています。 <script type="text/javascript"> wall = new Array(); /* 使用する背景画像を好きなだけ記述 */ wall[0] = "aaaaaaaaaaaaaaa.jpg"; wall[1] = "bbbbbbbbbbbbbbb.jpg"; wall[2] = "ccccccccccccccc.jpg"; rnd = Math.round(Math.random() * (wall.length - 1)); document.write('<style type="text/css">ontline { background-image:url(' , wall[rnd] , '); }</style>'); </script> CSSレイアウトに変更したところ背景が表示されません。 CSSのOutline部分(<div id="outline"></div>)に表示させようとしたのですが、エラーが起こりレイアウトが崩れてしまいます。 JavaとCSSはどうしたら連動させる事ができますでしょうか? ぜひ教えてください。

    • ベストアンサー
    • HTML
  • テーブルの背景画像が30枚以上で表示されません

    このjsでfor (i=1; i<=31; i++){の部分でfor (i=1; i<=30; i++){にすると、表示されるのですが、 for (i=1; i<=31; i++){にすると、31枚目以降表示されません。 なぜ表示されないのか、どなたかご教授お願いします。 .jsファイル↓ var wall = new Array(); wall[0] = "desert"; wall[1] = "devilscastle1"; wall[2] = "devilscastle2"; wall[3] = "devilscastle3"; wall[4] = "domdora"; wall[5] = "galaistomb"; wall[6] = "mountain"; wall[7] = "poison"; wall[8] = "prairie"; wall[9] = "rockymountaincave"; wall[10] = "swanpycave"; wall[11] = "woods"; for (i=1; i<=31; i++){ var rnd = Math.floor((Math.random() * 100)) % wall.length; document.write('<style type="text/css">.bg',[i],' { background-image:url(bg/' , wall[rnd] , '.gif); width:136px; height:120px;}</style>'); }

  • ランダム表示に加えwidthをブラウザに合わしたい

    ホームページを作成しています。 5枚の画像からランダムで背景に表示する処理に加えて、選ばれた画像のwidthをブラウザに合わせて拡大・縮小したいです。 以下ソースのランダム表示の処理に加えて、ブラウザに合わせて画像を拡大・縮小して表示する方法を教えて下さい。 よろしくお願いします。 <SCRIPT language="JavaScript"> bgc = new Array(); bgc[0] = "url(../image/ti1.jpg)"; bgc[1] = "url(../image/bg2.jpg)"; bgc[2] = "url(../image/bg3.jpg)"; bgc[3] = "url(../image/bg4.jpg)"; bgc[4] = "url(../image/bg5.jpg)"; n = Math.floor(Math.random()*bgc.length); document.body.style.backgroundImage = bgc[n]; </SCRIPT>

  • 画像をランダムにスクリプト

    ホームページをHTMLで作成しております。画像をランダムにスクリプトしてますが、画像のサイズが大きすぎるので、HTMLでサイズ変更する場合の、HTMLをご教授ください。 width="300" height="200"を挿入でいいのでしょうか。 その場合の挿入箇所をお教えください。 現在、下記のHTMLを作成しております。 <script language="JavaScript"> <!-- var image=new Array (); image[0]="s/b/bike1.jpg" ; image[1]="s/h/hatake207.jpg"; var rnd=Math.floor(Math.random()*image.length); document.write(" <img src=' "+image[ rnd ]+ " '> "); //--> </script> 宜しくお願いします。

  • GoogleChromeでは表示されません

    Javascriptで、IE9では表示されるのですが、GoogleChromeVer22では表示されません。 uncaught referenceerror: Randombg1 is not definedというデバッグ結果になっています。 下記のjsファイルがうまく動作してくれてないようですが、どこか間違ってる箇所がありましたら、 ご教授お願いします。 // JavaScript Document // ランダムに背景画像を変更する var wall = new Array(); /* 使用する背景画像を好きなだけ記述 */ wall[0] = "desert"; wall[1] = "devilscastle1"; wall[2] = "devilscastle2"; wall[3] = "devilscastle3"; wall[4] = "domdora"; wall[5] = "galaistomb"; wall[6] = "mountain"; wall[7] = "poison"; wall[8] = "prairie"; wall[9] = "rockymountaincave"; wall[10] = "swanpycave"; wall[11] = "woods"; var bgurl1 = [ 'http://blog-imgs-51.fc2.com/e/n/i/enix77777/dq1-' ]; function Randombg1() { var rnd = Math.floor((Math.random() * 100)) % wall.length; document.write('<table border="0" bordercolor="white" cellpadding="0" cellspacing="0">'); document.write('<tr><td style="background-image:url(' + bgurl1 + wall[rnd] + '.gif);" width="136" height=120" align="center">'); /* document.write('<style type="text/css"><!-- .bg1 { background-image:url(' + bgurl1 + wall[rnd] + '.gif); width:136px; height:120px; } --></style>'); */ } 下記がHTML文です。 <script type="text/javascript"><!-- Randombg1(); RandomImage1(); // --></script>

  • スライド写真で2、3枚目をランダムで表示させるには

    bgSwitcherを使用してフェードインアウトするスライドショーを作りました。 [A固定]→[Bランダム]→[Bランダム]→[C固定] 1枚目、4枚目は指定画像に差替え表示できていますが、 2枚目、3枚目が同じ画像を表示してしまい、繰り返し再生しても再度ランダムに選んでくれず、初めに読み込んだ画像のままでした。 【実現したいこと】 ●imgBをランダム読み込みし、2枚目、3枚目で同じ画像が選ばれないようにしたい ●2巡目以降も、再生のたびにランダム処理を実施する どなたか、上記のものが実現できるように出来ないものでしょうか。 どうぞよろしくお願いいたします。 <!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <script src="js/jquery.js" type="text/javascript"></script> <script src="js/jquery.bgSwitcher.js" type="text/javascript"></script> <script language="javascript"> <!-- // JavaScript Document var imgA = ["images-top/A.jpg"], imgC = ["images-top/C.jpg"]; imgB = new Array(); imgB[0] = "images-top/B1.jpg"; imgB[1] = "images-top/B2.jpg"; imgB[2] = "images-top/B3.jpg"; imgB[3] = "images-top/B4.jpg"; imgB[4] = "images-top/B5.jpg"; n = Math.floor(Math.random()*imgB.length); jQuery(function($) { $('#bgSwitch-fadeOut').bgSwitcher({ images: [imgA, imgB[n], imgB[n], imgC], interval: 1000, fadeSpeed: 1000, }, true); }) --> </script> <style type="text/css"> .bg { width: 160px; height: 160px; padding: 20px; line-height: 1.6; } </style> </head> <body> <div> <div id="bgSwitch-fadeOut" class="bg"> <p>テキスト</p> </div> </div> </body> </html>

  • 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~~の後ろに、参考サイトのをコピペしても何も表示されず背景は白のままになってしまいました。 色々頑張ってみたのですが分からないので、どなたか教えてくれませんか・・・ 他に必要なソースがあれば追記いたします。 どうぞよろしくお願いいたします。

  • 画像のランダム表示

    初心者です。。 画像のランダム表示で、下のものを使っているのですが、 画像の上にカーソルをもっていったときに手のマークにしたいのですが、 どのようにすればできるのでしょうか? onclickを使っているからだと思うのですが、 A href=を使えばできるのでしょうか? よろしくお願いします。 <script type="text/javascript"> <!-- var imgs = new Array; var n = 5; var i; for(i=0;i<n;i++){ imgs[i] = new Image(); } imgs[0].src="image/001.jpg"; imgs[1].src="image/002.jpg"; imgs[2].src="image/003.jpg"; imgs[3].src="image/004.jpg"; imgs[4].src="image/005.jpg"; function disp(img){ img.src=imgs[Math.round(Math.random()*(n-1))].src; } //--> </script> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> </head> <body> <div align="center"> <img src="image/001.jpg" border="0" onclick="disp(this)"> </div> </body> </html>

  • ランダム表示の画像位置

    初めまして、本当に初心者な質問で 申し訳ないのですが回答を頂ければ 嬉しく思います。 ホームページビルダー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を使えばよろしいでしょうか? 本当に申し訳ありませんが、回答の方を どうかよろしくお願い致します。

専門家に質問してみよう