目次

オブジェクトなJavaScriptの基礎講座

画像の切り替え2(クッキー)

◆ はじめに

もともと一つの画像1があったとして、そこをクリックすると次回から画像2を表示する。 (リンク場合のVLINKみたいなやつです。)

これは、クッキー機能を利用しています。

クッキー機能は、次回アクセスのために、小さいデータをブラウザのクッキーファイルへ記憶させる機能です。 そして、次回アクセス時に記憶させたデータを参照し、任意の処理を行います。

◆ スクリプト

<html>
<body>
<script type="text/javascript">
function eatcookie(name,data,days){                   //引数(COOKIE名、書き込みデータ、期限)
   var cdate=new Date();
   cdate.setTime(cdate.getTime()+1000*60*60*24*days); // 補足、保存日数が負指定で期限切れと等価
   //クッキーフォーマット: 名前=任意の値;exprires=有効日(例、Tue, 25-Jan-2000 15:10:10 GMT)
   document.cookie=name + "=" + data + " ; expires=" + cdate.toGMTString();
}

function cgIMG(){
  eatcookie("cgIMGnm","123", 10);
}
</script>
<p>
一回以下の画像をクリックすると一度メニュー画面移りますが、次回から別画像になります。
</p>
<p>
<script type="text/javascript">
if(document.cookie.substring(0, 11) == "cgIMGnm=123"){
   document.write('<a href="2ndthema.htm" onClick="cgIMG()">' + 
                  '<img  src="../img/V1.gif" name="number1" border="0" ></a>');
}
else{
   document.write('<a href="2ndthema.htm" onClick="cgIMG()">' +
                  '<img  src="../img/V0.gif" NAME="number1" border="0" ></a>');
}
</script>
</p>
<p>
もとの画像に戻すには「クッキー削除」ボタンをクリックしてから再読み込みして下さい。
</p>
<form>
<p>
<input type=button onclick=eatcookie("cgIMGnm","0",-1) value="クッキー削除">
</p>
</form>
</body>
<html>

◆ スクリプト実行結果

一回以下の画像をクリックすると一度メニュー画面移りますが、次回から別画像になります。

もとの画像に戻すには「クッキー削除」ボタンをクリックしてから再読み込みして下さい。

◆ 補足説明

eatcookie関数の説明

function eatcookie(name,data,days){                   //引数(COOKIE名、書き込みデータ、期限)
   var cdate=new Date();
   cdate.setTime(cdate.getTime()+1000*60*60*24*days); // 補足、保存日数が負指定で期限切れと等価
   //クッキーフォーマット: 名前=任意の値;exprires=有効日(例、Tue, 25-Jan-2000 15:10:10 GMT)
   document.cookie=name + "=" + data + " ; expires=" + cdate.toGMTString();
}

クッキーは以下のようなフォーマットになります。

名前=任意の値;exprires=有効日(グリニッジ時間)

名前はeatcookie関数の引数 name です。
任意の値はeatcookie関数の引数 data です。
expriresはexpriresです。(そのまま)
有効日は現日時をgetTime()でミリ秒で求め、daysは日数ですので、ミリ秒へ変換して現日時へ足しています。
また、toGMTString()でグリニッジ時間にしています。

画像のIMGタグの記述位置

以下をあなたのウェブページの任意の位置に記述して下さい。

<script type="text/javascript">
if(document.cookie.substring(0, 11) == "cgIMGnm=123"){
   document.write('<a href="2ndthema.htm" onClick="cgIMG()">' + 
                  '<img  src="../img/V1.gif" name="number1" border="0" ></a>');
}
else{
   document.write('<a href="2ndthema.htm" onClick="cgIMG()">' +
                  '<img  src="../img/V0.gif" NAME="number1" border="0" ></a>');
}
</script>

もちろん、「2ndthema.htmとV0.gif」は、あなたの環境の対応する「ページのURLと画像ファイル」です。

◆ おわりに

クッキーに関しては、以下のページも参考になると思います。

目次