設定した日付の場合、指定した画像が表示されるスクリプトです。
例えばお正月にはお正月用画像を表示させる、クリスマスにはクリスマス画像を表示させる、
と言った使い道があります。
サンプルでは1月1日、3月3日、5月5日、12月25日の場合は画像が変わるように設定しています。
マシンの日付を色々と変更して確認してみてください。
・サンプルを見る
・ソースを保存する
（右クリック→「対象をファイルに保存」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
MyMon=new Array();
MyDay=new Array();
MyData=new Array();
//データ1を表示したい月を指定する
MyMon[0]=1;
//データ1を表示したい日を指定する
MyDay[0]=1;
//データ1の画像を指定する
MyData[0]='0.gif';
//データ2を表示したい月を指定する
MyMon[1]=3;
//データ2を表示したい日を指定する
MyDay[1]=3;
//データ2の画像を指定する
MyData[1]='1.gif';
//データ3を表示したい月を指定する
MyMon[2]=5;
//データ3を表示したい日を指定する
MyDay[2]=5;
//データ3の画像を指定する
MyData[2]='2.gif';
//データ4を表示したい月を指定する
MyMon[3]=12;
//データ4を表示したい日を指定する
MyDay[3]=25;
//データ4の画像を指定する
MyData[3]='3.gif';
function DayPic()
{
hiduke=new Date();
tuki=hiduke.getMonth()+1;
kyou=hiduke.getDate();
for(i=0; i < MyMon.length; i++)
if(MyMon[i] == tuki && MyDay[i] == kyou)
{ document.images['mypic'+i].src=MyData[i]; }
}
//-->
</script>
</head>
<body onLoad="DayPic();">
<img src="hatena.gif" name="mypic0" width="50" height="50" border="0" alt="画像">
<img src="hatena.gif" name="mypic1" width="50" height="50" border="0" alt="画像">
<img src="hatena.gif" name="mypic2" width="50" height="50" border="0" alt="画像">
<img src="hatena.gif" name="mypic3" width="50" height="50" border="0" alt="画像">
</body></html>
[ 解説 ]
まず、肝心の期日を設定します。
設定するデータは、
画像を表示する月
画像を表示する日
画像URL
の3つで成り立っています。
サンプルデータを見てみましょう。
MyMon[0]=1;
MyDay[0]=1;
MyData[0]='0.gif';
まず1行目の「MyMon[0]=1;」で画像を表示する月の「1」を指定しています。
次に2行目の「MyDay[0]=1;」で画像を表示する日の「2」を指定しています。
最後に3行目の「MyData[0]='0.gif';」で表示される画像を指定しています。
同じ書式に従って、データは書き替えてください。
必ず月、日、画像URLの3つを書き替えて下さい。
次に、imgタグの変更を行います。
まず、設定した期日以外の時に表示する画像を設定します。
BODY内にある画像タグ部分をそのまま編集してください。
画像ファイル名だけでなく、サイズなども調節してください。
次は、タグの部分を見てください。
<img src="hatena.gif" name="mypic0" width="50" height="50" border="0" alt="画像">
<img src="hatena.gif" name="mypic1" width="50" height="50" border="0" alt="画像">
<img src="hatena.gif" name="mypic2" width="50" height="50" border="0" alt="画像">
<img src="hatena.gif" name="mypic3" width="50" height="50" border="0" alt="画像">
全部同じようなタグですが、1カ所だけ違うところがあるのがおわかりでしょうか？
それぞれ赤い数字の部分だけが、別の数字になっていますね。
この数字は、先ほどの期日や、それに伴う画像URLを編集したデータと連動しています。
例えば、
<img src="hatena.gif" name="mypic0" width="50" height="50" border="0" alt="画像">
用のデータは
MyMon[0]=1;
MyDay[0]=1;
MyData[0]='0.gif';
です。
<img src="hatena.gif" name="mypic1" width="50" height="50" border="0" alt="画像">
用のデータは
MyMon[1]=3;
MyDay[1]=3;
MyData[1]='1.gif';
です。
タグの数字の部分と、データを格納している部分の先頭にある「[」と「]」で挟まれた数字が一致していますね。
このように、両者の数値を統一させる事が大切です。
数字をずらして指定してしまうと、予期していたのとは別の場所に画像が表示されてしまうかも知れません。
もしデータを減らしたい場合は、データを1つ分（すなわち3行）と、対応したタグをまとめて消去します。
例えばサンプルからデータを1つ削除する場合は、以下のようになります。
| 変更前 |
|---|
MyMon[0]=1;
MyDay[0]=1;
MyData[0]='0.gif';
MyMon[1]=3;
MyDay[1]=3;
MyData[1]='1.gif';
MyMon[2]=5;
MyDay[2]=5;
MyData[2]='2.gif';
MyMon[3]=12;
MyDay[3]=25;
MyData[3]='3.gif';
……
<img src="hatena.gif" name="mypic0" width="50" height="50" border="0" alt="画像">
<img src="hatena.gif" name="mypic1" width="50" height="50" border="0" alt="画像">
<img src="hatena.gif" name="mypic2" width="50" height="50" border="0" alt="画像">
<img src="hatena.gif" name="mypic3" width="50" height="50" border="0" alt="画像">
|
| 変更後 |
|---|
MyMon[0]=1;
MyDay[0]=1;
MyData[0]='0.gif';
MyMon[1]=3;
MyDay[1]=3;
MyData[1]='1.gif';
MyMon[2]=5;
MyDay[2]=5;
MyData[2]='2.gif';
……
<img src="hatena.gif" name="mypic0" width="50" height="50" border="0" alt="画像">
<img src="hatena.gif" name="mypic1" width="50" height="50" border="0" alt="画像">
<img src="hatena.gif" name="mypic2" width="50" height="50" border="0" alt="画像">
|
反対に、データを増やす場合は削除する場合と逆でデータを増やしていきます。
ただし、この時注意点が1つあります。
データの先頭部分を見てみますと、数値部分がありますね。
各データのまとまりは、全て同じ数値が入っています。
そして次のデータになると、数値が1つ繰り上がっています。
それと同じ要領で、必ず数値部分を1つずつ増やしていく必要があります。
例えばサンプルにデータを1つ追加すると、以下のようになります。
| 変更前 |
|---|
MyMon[0]=1;
MyDay[0]=1;
MyData[0]='0.gif';
MyMon[1]=3;
MyDay[1]=3;
MyData[1]='1.gif';
MyMon[2]=5;
MyDay[2]=5;
MyData[2]='2.gif';
MyMon[3]=12;
MyDay[3]=25;
MyData[3]='3.gif';
……
<img src="hatena.gif" name="mypic0" width="50" height="50" border="0" alt="画像">
<img src="hatena.gif" name="mypic1" width="50" height="50" border="0" alt="画像">
<img src="hatena.gif" name="mypic2" width="50" height="50" border="0" alt="画像">
<img src="hatena.gif" name="mypic3" width="50" height="50" border="0" alt="画像">
|
| 変更後 |
|---|
MyMon[0]=1;
MyDay[0]=1;
MyData[0]='0.gif';
MyMon[1]=3;
MyDay[1]=3;
MyData[1]='1.gif';
MyMon[2]=5;
MyDay[2]=5;
MyData[2]='2.gif';
MyMon[3]=12;
MyDay[3]=25;
MyData[3]='3.gif';
MyMon[4]=10;
MyDay[4]=1;
MyData[4]='4.gif';
……
<img src="hatena.gif" name="mypic0" width="50" height="50" border="0" alt="画像">
<img src="hatena.gif" name="mypic1" width="50" height="50" border="0" alt="画像">
<img src="hatena.gif" name="mypic2" width="50" height="50" border="0" alt="画像">
<img src="hatena.gif" name="mypic3" width="50" height="50" border="0" alt="画像">
<img src="hatena.gif" name="mypic4" width="50" height="50" border="0" alt="画像">
|
（補足）
使用する画像ですが、サイズが大きいものではなく、小さめのものを使用してください。
サイズが大きい場合は読み込みに時間が掛かる為、表示されるまで時間が掛かってしまいます。
|
