2007年4月25日

時間帯で背景画像変更

sunrise morning noon afternoon sunset twilight

訪問者のPCに設定されている時間帯によって、背景画像が変化するようにしてみた。

時間帯は

 5:00~ 8:00
 8:00~12:00
12:00~15:00
15:00~18:00
18:00~21:00
21:00~ 5:00

の6種類。

それぞれの背景用にスタイルシートを6つ作り、background-imageと背景色を指定。

さらに各テンプレートに以下を記述。

<SCRIPT LANGUAGE="JavaScript">

<!-- Begin
function getCSS()
{
datetoday = new Date();
timenow=datetoday.getTime();
datetoday.setTime(timenow);
thehour = datetoday.getHours();

if (thehour > 20)
display = "styles-site*.css";
else if (thehour > 17)
display = "styles-site*.css";
else if (thehour > 14)
display = "styles-site*.css";
else if (thehour > 11)
display = "styles-site*.css";
else if (thehour > 7)
display = "styles-site*.css";
else if (thehour > 4)
display = "styles-site*.css";
else if (thehour > 1)
display = "styles-site*.css";
else
display = "styles-site*.css";

var css = '<'; css+='link rel="stylesheet" href=' + display + ' ¥/'; css+='>';

document.write(css);
// End -->
}

</script>

<script language="javascript">getCSS();</script>

<noscript>
<link rel="stylesheet" href="styles-site.css" type="text/css">
</noscript>

赤字は背景画像を変更した任意のスタイルシート名(それぞれ別の名前)

まだ15時以降の画像が表示されたことがないので正常に動くか不安だし、スタイルシートを1つで表示できないか模索中だけど、とりあえず様子見…


追記

ただでさえ重いこのブログが更に重くなってしまったので、現在はプロフィールページのみCSSを適用中です。

プロフィールページ