激凹みから立ち直る方法

現状
<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/month …

あるのですが、td内限定の場合どのようにすればいいのでしょうか?
教えてください。

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

A 回答 (1件)

はじめに、例に挙げられている背景画像の変更は


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;}
を入れてあげれば、
毎月自動的に変わるかと思います。

#参考にならなければすみません。
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!


おすすめ情報