/ヘッダーの背景画像をランダムに表示させたくなって知恵を絞る、の巻2009.10.06ヘッダーの背景画像をランダムに表示させたくなって知恵を絞る、の巻Tweet先日追加したテンプレート(x-ran-zatsu)のヘッダー画像が何パターンかあるのでせっかくだから全部使ってしまおうとランダムで背景画像を表示するjavascriptを追加してみたら、これがうまくいかない。うまくいかないといっても、htmlに使えば動くんだけど、wordpress(php)で読み込むと画像が消えてしまう。これがその時書いたjavascriptで読み込んだ時のミリ秒が奇数か偶数かで分岐させて、#headerの背景を差し替える。Date();ms=dt.getMilliseconds();//console.log("ms:"+ms);if(ms%2==0){document.getElementById("header").style.backgroundImage="url(img/common/header.jpg)"}else{document.getElementById(‘header’).style.backgroundImage=’url(img/common/header-2.jpg)’}}[/js]関係ないけどキーボードの調子がすこぶる悪い。文字側のenter(テンキー側のは反応する)やc,v,F7あたりが反応したり、しなかったり、延々と一文字が入力され続けたり。粘ってみたけど、うまい解決法も閃かないので別の方法を考える事にした。wordpressでphpを使っているのだから、phpで出来ないかね?と辞書を片手にシコシコ書いてみたら、とりあえず動くだけというものだけど、出来たので手順を晒してみます。image/jpeg’);readfile("img/common/header-2.jpg");?>[/php]やった、localhostから確認するとheader-2.jpgが表示された。次にこのphpをcssに読み込ませてみる。#f33;height:400px;width:400px;}[/css]test表示用のphpを作ってtest-css.cssを読み込ませる。id="header">head</div></body></html>[/php]やった、#headerの背景にheader-2.jpgが表示された。背景画像を表示させる事は出来たので次は、画像の選び方を考える。ランダムに切り替えたい背景画像だけを集めたフォルダを作って、そのフォルダ内にある画像を配列に入れられないか?これが出来れば、いちいちtest-sw.phpを変更する必要がなくて、背景画像を集めたフォルダに画像をぶっこめば済むようになる。辞書を引くと、opendir()とreadfir()でディレクトリ操作ができるそうだ。"ファイル名:$file<br>";}closedir($dn);[/php]出力結果例[text]ファイル名:.ファイル名:..ファイル名:header-2.jpgファイル名:header-3.jpgファイル名:header-4.jpgファイル名:header-5.jpgファイル名:header-6.jpgファイル名:header.jpg[/text]ん?ファイル名:.ファイル名:..?なんだこれ。わからないのであとで調べるとして今はif文で弾いとく、ついでにマジックナンバー的なフォルダ階層を潰して、抜き出したファイル名を配列に入れる。$file!=’..’){$files[]=$file;}}closedir($dn);[/php]これで画像が入った配列が完成。ここからランダムにピックアップさせる方法を調べる。php4~で「array_rand(配列);」というものがあった、配列のインデックスをランダムに取得できるらしい。image/jpeg’);readfile($headimgdir.’/’.$imgpath);[/php]readfileはフォルダ階層と配列からの値に変更。image/jpeg’);readfile($headimgdir.’/’.$imgpath);?>[/php]完成。画像SNSでもご購読できます。コメントをキャンセルコメント名前メールアドレス(公開はされません。2018年11月15日よく見られているページ2ヶ月ちょっとで15kg痩せた時のトレーニングメニュー。プロパティ)をコントロールして、テキストがボックスから飛び出さないようにしたい。illustratorこの操作を実行するのに十分な特権がありません。料理イラレ、アートボードをオブジェクトサイズに合わせる。