WEST MiRa(1,739 Byte)
JavaScript(1,601 Byte)

■ JavaScript - サンプル集(257種類) - 画像
   - 日付によって変わる画像

設定した日付の場合、指定した画像が表示されるスクリプトです。
例えばお正月にはお正月用画像を表示させる、クリスマスにはクリスマス画像を表示させる、 と言った使い道があります。

サンプルでは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'].src=MyData[i]; break; }
		}

//-->
</script>

</head>

<body onLoad="DayPic();">

<img src="4.gif" name="mypic" width="50" height="50" border="0" alt="サンプル画像">

</body></html>


[ 解説 ]

まず、設定した期日以外の時に表示する画像を設定します。
下から2行目にある、BODY内にある画像タグ部分をそのまま編集してください。
画像ファイル名だけでなく、サイズなども調節してください。

次に、肝心の期日を設定します。

設定するデータは、
画像を表示する月
画像を表示する日
画像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つを書き替えて下さい。

もしデータを減らしたい場合は、データを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';
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';


反対に、データを増やす場合は削除する場合と逆でデータを増やしていきます。

ただし、この時注意点が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';
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';

(補足)

使用する画像ですが、サイズが大きいものではなく、小さめのものを使用してください。
サイズが大きい場合は読み込みに時間が掛かる為、表示されるまで時間が掛かってしまいます。


バナー、リンクについて  ,   利用規約  ,   ヘルプ

Copyright (C) 1998-2007 WEST MiRa. All rights reserved.