設定した日付から有効期間内の場合のみ、指定した画像が表示されるスクリプトです。
例えばお正月期間にはお正月用アイコンを表示させる、一定期間だけ画像を表示させる、
と言った使い道があります。
このバージョンでは、それぞれ異なる期間の設定、異なるサイズの画像、
異なる画像ファイルを表示させる事が出来ます。
サンプルでは2月1日から2月15日まで、2月10日から17日まで、2月14日から2月30日まで、
それぞれ画像が表示されるように設定しています。
それ以外の日付では、何も表示されません。
マシンの日付を色々と変更して確認してみてください。
・サンプルを見る
・ソースを保存する
（右クリック→「対象をファイルに保存」or「リンクを名前を付けて保存」して下さい。）
・ソースを見る
・解説を見る
[ ソース ]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<script language="JavaScript">
<!--//Copyright (C) WEST MiRa http://www.west-mira.jp
function DayPic(moji)
{
datas=new Array();
datas=moji.split(",");
hiduke=new Date();
ima=hiduke.getTime();
my=new Date(datas[0]+'/'+datas[1]+'/'+datas[2]).getTime();
if(my < ima && my+(datas[3]*24*60*60*1000) > ima)
document.write('<img src="'+datas[4]+'" width="'+datas[5]+'" height="'+datas[6]+'" border="0" alt="'+datas[7]+'">');
}
//-->
</script>
</head>
<body>
その1(2002/02/01から2002/02/15の間だけ表示)<br>
<script language="JavaScript" type="text/javascript"><!--//
DayPic('2002,2,1,15,0.gif,50,50,画像名は0');
//-->
</script>
<br><br>
その2(2002/02/10から2002/02/17の間だけ表示)<br>
<script language="JavaScript" type="text/javascript"><!--//
DayPic('2002,2,10,7,1.gif,50,50,画像名は1');
//-->
</script>
<br><br>
その3(2002/02/14から2002/02/30の間だけ表示)<br>
<script language="JavaScript" type="text/javascript"><!--//
DayPic('2002,2,14,16,2.gif,50,50,画像名は2');
//-->
</script>
<br><br>
</body></html>
[ 解説 ]
まず、画像を表示させたい場所の、呼び出し部分をご覧下さい。
ボディ内にある
<script language="JavaScript" type="text/javascript"><!--//
DayPic('2002,2,1,15,0.gif,50,50,画像名は0');
//-->
</script>
<script language="JavaScript" type="text/javascript"><!--//
DayPic('2002,2,10,7,1.gif,50,50,画像名は1');
//-->
</script>
<script language="JavaScript" type="text/javascript"><!--//
DayPic('2002,2,14,16,2.gif,50,50,画像名は2');
//-->
</script>
が、それぞれの呼び出し部分です。
（サンプルにある「その1」などは、便宜上くっつけているだけです。）
同じものが3つありますが、それぞれ違う部分がありますね。
これは、どの期間画像を表示させるのか、どの画像を表示させるのか、
それぞれのデータを指定しています。
例えば「その1」では
DayPic('2002,2,1,15,0.gif,50,50,画像名は0');
となっていますが、これは
「2002」が開始日の年
「2」が開始日の月
「1」が開始日の日
「15」が開始日から数えた、表示させる期間
「0.gif」が表示させる画像、
「50」が表示させる画像の横幅
「50」が表示させる画像の高さ
「画像名は0」が表示させる画像のalt
を、それぞれ表しています。
必要に応じて、開始日や期間、画像や画像サイズの情報を書き替えて下さい。
また、もっと呼び出し部分を増やしたい場合は、
同じ形式で増やした後、開始日部分をそれぞれ書き替えて下さい。
例えばサンプルから呼び出し部分を1つ削除する場合は、以下のようになります。
| 変更前 |
|---|
<script language="JavaScript" type="text/javascript"><!--//
DayPic('2002,2,1,15,0.gif,50,50,画像名は0');
//-->
</script>
<script language="JavaScript" type="text/javascript"><!--//
DayPic('2002,2,10,7,1.gif,50,50,画像名は1');
//-->
</script>
<script language="JavaScript" type="text/javascript"><!--//
DayPic('2002,2,14,16,2.gif,50,50,画像名は2');
//-->
</script>
|
| 変更後 |
|---|
<script language="JavaScript" type="text/javascript"><!--//
DayPic('2002,2,1,15,0.gif,50,50,画像名は0');
//-->
</script>
<script language="JavaScript" type="text/javascript"><!--//
DayPic('2002,2,10,7,1.gif,50,50,画像名は1');
//-->
</script>
|
反対に、呼び出し部分を増やす場合は削除する場合と逆で呼び出し部分を増やしていきます。
例えばサンプルにデータを1つ追加すると、以下のようになります。
| 変更前 |
|---|
<script language="JavaScript" type="text/javascript"><!--//
DayPic('2002,2,1,15,0.gif,50,50,画像名は0');
//-->
</script>
<script language="JavaScript" type="text/javascript"><!--//
DayPic('2002,2,10,7,1.gif,50,50,画像名は1');
//-->
</script>
<script language="JavaScript" type="text/javascript"><!--//
DayPic('2002,2,14,16,2.gif,50,50,画像名は2');
//-->
</script>
|
| 変更後 |
|---|
<script language="JavaScript" type="text/javascript"><!--//
DayPic('2002,2,1,15,0.gif,50,50,画像名は0');
//-->
</script>
<script language="JavaScript" type="text/javascript"><!--//
DayPic('2002,2,10,7,1.gif,50,50,画像名は1');
//-->
</script>
<script language="JavaScript" type="text/javascript"><!--//
DayPic('2002,2,14,16,2.gif,50,50,画像名は2');
//-->
</script>
<script language="JavaScript" type="text/javascript"><!--//
DayPic('2002,3,1,10,3.gif,50,50,画像名は3');
//-->
</script>
|
（補足）
使用する画像ですが、サイズが大きいものではなく、小さめのものを使用してください。
サイズが大きい場合は読み込みに時間が掛かる為、表示されるまで時間が掛かってしまいます。
|
