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内限定の場合どのようにすればいいのでしょうか？
教えてください。

宜しくお願いいたします。

回答No.1

sun-ward · ベストアンサー

はじめに、例に挙げられている背景画像の変更は
Movable Typeを利用するのが前提であることと、
Movable Typeで月別アーカイブを用意するということに
注意してください。

上の条件にあっているならば、
<td colspan="2" align="center" valign="middle" width="720" class="phot-<$MTArchiveDate format="%m"$>">
というように、例と同じようにHTMLを入れます。

CSSのテンプレートには
td.phot-01{ background-image:url(画像アドレス); background-repeat:repeat;}
td.phot-02{ background-image:url(画像アドレス); background-repeat:repeat;}
td.phot-03{ background-image:url(画像アドレス); background-repeat:repeat;}
…

というように12個のclassを作ればできるはずです。

----------------------------
もし、Movable Typeでない通常のホームページの場合は、
JavaScriptを用いてください。

HTMLのヘッダに、以下のようなソースを入れます。
<script type="text/javascript">
<!--
var today = new Date();
var month = today.getMonth();
document.write("<link rel='stylesheet' type='text/css' href=", month, ".css>");
// -->
</script>

get.Monthで0～11（1～12月）という整数を得ますから、
0.css（1月）
1.css（2月）
2.css（3月）…というように、12枚のCSSを用意して
それぞれのCSS内に
td.phot{ background-image:url(それぞれの月の画像アドレス); background-repeat:repeat;}
を入れてあげれば、
毎月自動的に変わるかと思います。

＃参考にならなければすみません。