• ベストアンサー

CSSの画像をPHPで毎月自動で変更したい。

CSSの画像をPHPで毎月自動で変更したい。 td.phot { background-image: url("フォルダ/10gatu.gif"); background-repeat: repeat } のようにCSSで毎月画像を手動で変更しているのですが、 これを自動で変更できないものでしょうか。 1月はichigatu.gif 2月はnigatu.gif・・・ といった具合に、月が変更したら自動で変更する。 phpでランダムにできるようなのがあったので、phpとcssの組み合わせができるものだと思い質問しています。

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

  • ベストアンサー
  • JaneDue
  • ベストアンサー率75% (263/350)
回答No.1

01月から12月までの背景画像  01.gif~12.gif を用意して td.phot { background-image: url("フォルダ/ <?= date(m).'.gif'; ?>"); ~ とすればよいでしょう。 ファイルがhtmlの場合は、css をPHPで出力する方法もあります。 html側では、css に phpファイルを指定。 <LINK href="./style.php" rel="STYLESHEET" TYPE="text/css"> style.php側では最初に以下headerを出力して、後は上記の通り <?php header('content-type: text/css'); ?> td.phot { background-image: url("フォルダ/ <?= date(m).'.gif'; ?>"); ~

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • CSSでtd内の画像を月ごとに自動的に変える方法

    現状 <td colspan="2" align="center" valign="middle" width="720" class="phot">丸丸</td> CSS td.phot{ background-image:url(画像アドレス); background-repeat:repeat;} 以上のように設定しています。 したいことは、 このtd内の画像を12個登録して、自動的に月が替わったら画像を変えるようにしたいです。 body背景画像を変えるのは、 http://hxxk.jp/tutorial/case-study/exhibit/monthly_background-image あるのですが、td内限定の場合どのようにすればいいのでしょうか? 教えてください。 宜しくお願いいたします。

  • cssで角丸で一部の画像だけを変更したい。

    cssで角丸テーブルにトライしています。(参考にしたサイトhttp://jmblog.jp/archives/94) これをアレンジして、左上の画像(タイトル部分にする)のみを枠によって変えたいと思っています。<span class="taiken"></span>のクラス名を変えることで画像を変えられると良いのですが、 でもどうしても上手く行きません。どうぞどなたかお助け下さい。 ********HTML********* <div class="dialog"> <div class="header"><span class="taiken"></span> <div class="c"></div> </div> <div class="body"> <div class="c">テストテスト</div> </div> <div class="footer"> <div class="c"></div> </div> </div> ******** CSS ******** .dialog { width:698px; } .dialog .header .c, .dialog .footer .c{ font-size:1px; /* ensure minimum height */ height:20px; } .dialog .header span.taiken{ background-color: transparent; background-image: url(../pic/head_r1_c1.gif); background-repeat: no-repeat; background-position: 0px 0px; height: 37px; } .dialog .header .c{ background-color: transparent; background-image: url(../pic/head_r1_c2.gif); background-repeat: no-repeat; background-position: right 0px; height: 37px; } .dialog .body{ background-color: transparent; background-image: url(../pic/body_r2_c1.gif); background-repeat: repeat-y; background-position: 0px 0px; } .dialog .body .c{ background-color: transparent; background-image: url(../pic/body_r2_c2.gif); background-repeat: repeat-y; background-position: right 0px; } .dialog .footer{ background-color: transparent; background-image: url(../pic/footer_r3_c1.gif); background-repeat: no-repeat; background-position: 0px 0px; } .dialog .footer .c{ background-color: transparent; background-image: url(../pic/footer_r3_c2.gif); background-repeat: no-repeat; background-position: right 0px; } 宜しくお願いいたします。

    • ベストアンサー
    • HTML
  • cssで背景画像をランダム表示する

    現在cssで背景画像をランダム表示するよう指示をしたいです。 テンプレート配布サイトからDLしたcssには以下のように指定されています。 ---- .menu{ float :left; background-image:url(img/menu_01.png); background-repeat:no-repeat; width :270px ---- このようなcss表記から画像をランダム表示に指定するには どのように加筆、修正をしたらよいのか教えて頂けますでしょうか。 似たような質問もたくさんされていたのでとても申し訳ないのですが、自力で色々試してみたものの、 どうしてもわからなかったので、お力を貸して頂ければ幸いです。 よろしくお願い致します。

    • 締切済み
    • CSS
  • CSSで画像表示のやり方を教えてください

    初めまして、CSSを少し勉強中なんですが、文字の背景に画像を張りたいんですがうまくいかないので教えていただけないでしょうか? 今の状態はこんな感じです。 間違っていますか? HTMLファイル <TD colspan="3" width="609"><div class="menu1">aaaaaaaa</div></TD> CSSファイル div.menu1 { background-img : url(object.gif); } この二つのファイルを使っているんですが画像が表示されなくて困ってます。教えていただけるとうれしいです。 ご迷惑おかけしますがよろしくお願いします。

  • CSSでの画像メニューの設定について

    現在CSSの勉強中です。 外部CSSで画像を使用してリンクメニューを作ったのですが、 やり方があっているか確認をお願いしたいのですが。 off時の画像(白)、ページのin時の画像(赤)、hover(青)の画像を用意しています。 CSS部分▼ .navi01 a{ width:102px; height:43px; background-image:url(common/img/navi_top_off.gif); background-repeat:no-repeat; } .navi01_on a{ width:102px; height:43px; background-image:url(common/img/navi_top_on.gif); background-repeat:no-repeat; } .navi01 a:hover{ width:102px; height:43px; background-image:url(common/img/navi_top_hover.gif); background-repeat:no-repeat; } .navi01_on a:hover{ width:102px; height:43px; background-image:url(common/img/navi_top_hover.gif); background-repeat:no-repeat; } HTML部分▼ <li class="navi01_on"><a href="index.html" title="トップページ"><span class="none">トップページ</span></a></li> <li class="navi02"><a href="work.html" title="仕事内容"><span class="none">仕事内容</span></a></li> CSSの講座のページなどを見ると、設定がもうすこし少なくても うまく動いていたりして、無駄な部分があるのではと思っています。 今の私の知識ではどこが悪いのか分からないので、 教えて頂けると幸いです。 (もし良い講座のページ、本がありましたら教えて頂ければと思います。) 宜しくお願い致します。

    • ベストアンサー
    • CSS
  • IE8で追加したcss背景画像が表示されません

    新しく追加した背景画像がFireFoxでは表示されるのにIE8だと表示されません。 ↓はソースで、「FILE3.gif'」が表示されません。 ------------------------------------------ <css内より抜粋> -css1.css- h2 { width: OOOpx; height: OOpx; background-repeat: no-repeat; background-position: O% OO%; } ※数値の部分は伏せています。 -css2.css- h2.hoge1{ background-image: url('画像場所/FILE1.gif'); } h2.hoge2{ background-image: url('画像場所/FILE2.gif'); } h2.hoge3{ background-image: url('画像場所/FILE3.gif'); } ←新しく追加したもの <jsp内より抜粋> <%@ page contentType="text/html; charset=Shift_JIS"%> <% request.setCharacterEncoding("Shift_JIS");%> ~中略~ <h2 class="hoge3"><font class="none">ホゲ3画像</font></h2> ~以下省略~ ------------------------------------------ 以前からあった背景画像はちゃんと表示されています。 jspで<img src="画像場所/ファイル3.gif">とやれば一応IEでも画像は表示できるのですが、画像の位置がズレてしまうので、この方法はだめそうです。 文字コードはcss、jspともにShift-JISです。 追加した画像はファイル1,2と同じ場所にあります。 また、<h2 class="hoge3">を<h2 class="hoge2">に変更したら、FILE2.gifの画像がIEでも表示されました。(FILE3.gifとFILE2.gifはほぼ同じ大きさです。) どなたか解決策がわかる方、またはどこを調べればいいかわかる方いましたらお願いします。

    • 締切済み
    • CSS
  • cssでロールオーバー設定した画像がoperaでは最初のロールオーバーでは非表示になります

    いつもお世話になっております。 以下の様にcssを組みました。 〔css〕 @charset "UTF-8"; #bnn0513 span { display:none; } #bnn0513 a { display:block; width:212px; height:102px; padding:0; background-image:url(images/sample.gif); background-repeat:no-repeat 0 0; } #bnn0513 a:link { background-image:url(images/sample.gif); background-repeat:no-repeat 0 0; } #bnn0513 a:visited { background-image:url(images/sample.gif); background-repeat:no-repeat 0 0; } #bnn0513 a:hover { background-image:url(images/sample_ov.gif); background-repeat:no-repeat 0 0; } #bnn1 a:active { background-image:url(images/sample_on.gif); background-repeat:no-repeat 0 0; } 〔xhtml(一部)〕 <div id="bnn0513"> <a href="sample.html"><span>サンプル</span></a></div> CSSでロールオーバー設定した画像が、他のブラウザではきちんと表示されるのですが、operaブラウザでは一度目にカーソルをロールオーバー指定した場所に置くと、hover用の画像が表示されず、sample.gifの画像も消えてしまいます。 一旦カーソルを移動させて再び戻すとhover用の画像は表示されます。 一度目にカーソルを置いたときもキチンと表示される様にしたいのですが、どうすればよろしいでしょうか? java等他のプログラミングが入っても構いませんので方法をご教授ください。 宜しくお願い致します。

    • ベストアンサー
    • HTML
  • 背景に複数の画像を入れることは可能でしょうか

    HTML、CSSの初心者の者です。 下記のように、CSSで背景に画像back1.gifを右上に入れているのですが、画面の右下にもう一つの画像back2.gifを入れることは可能でしょうか? もし可能なら、方法を教えて下さい。 初心者向けに易しくご説明頂けると幸いです。 body { background-color:yellow; background-image:url(image/back1.gif); background-attachment:fixed; background-repeat:no-repeat; background-position:right top; }

    • ベストアンサー
    • HTML
  • CSS初心者です。至急お願いします!

    現在CSSでHP制作に挑戦しています。 自分なりに調べながら制作していたのですが、どうしても2点だけ上手くいきません。 ●サイト全体を中央表示 (widthを指定して左右のmarginをautoにすればブロック要素をセンタリング出来る、というのは理解しています。) ●SCCでロールオーバー表示 この2点です。 文章が下手くそなので、キャプチャを貼らせていただきました。 現在の作業画像です。 見にくいので… 【HTML】 <head> <link href="main_box.css" rel="stylesheet" type="text/css"> </head> <body topmargin="0"> <div id="bg"> <div id="head">熊本県でお風呂のリフォーム・修理をお考えの方はお気軽にご相談ください。</div> <div id="rogo"></div> <table width="1024" border="0" cellspacing="0" cellpadding="0"> <tr> <td class="menutop"></td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> </table> </div> </body> 【CSS】 #head { font-size: 12px; color: #FFFFFF; background-color: #000000; background-position: center top; text-align: left; margin: 0px; padding: 10px; height: 32px; width: 1024px; } #rogo { background-repeat: no-repeat; height: 70px; width: 1024px; background-image: url(img/rogo.gif); margin: 0px; background-position: center top; margin-left:auto; margin-right:auto; } .menutop { background-image: url(img/top.gif); background-repeat: no-repeat; display: block; height: 37px; width: 78px; position: static; } .menutop a:hover{ background-image:url(img/top2.gif) } #bg { margin: 0 auto; margin-top: 0px; background-color: #FFFFFF; width: 1024px; background-position: center top; } です。 情けない事に、どこが間違っているのか全くわかりません。 アドバイスをいただけると幸いです。 現在Macromedia Dreamweaver MXを使用しています。 ちゃんと保存しているのですが、もしかしたら、修正後のCSSがHTMLに反映されていないだけ…? そんな時はどうやったら反映されるでしょうか? ちなみにコチラのサイト様を参考にさせていただいています。 http://hac-design.com/ よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • 外部CSSで画像にリンクを貼りたい

    まだCSS初心者ですので宜しくお願いします。 外部CSSに位置指定した「画像」にリンクを貼りたいのですが いろいろ調べてもその方法がわかりません。 以下のタグにどのようにリンクの指定をすればよいでしょうか? div#index{ margin-top:5px; background:url(../img/oribox.gif) no-repeat right bottom; } また、HTMLにはどのように記述したらよいかも宜しくお願いいたします。

    • ベストアンサー
    • HTML