ドロップダウンメニューで画像を表示→データを保存


メニューから選んでクリックすると画像が表示され、そのファイル名が cookie に保存されます。

次にアクセスした時には、保存してあるファイル名の画像が表示されます。

ソース
<html>
<head>
<title>ドロップダウンメニューで画像を表示→保存</title>
<SCRIPT LANGUAGE="JavaScript">
<!--
function tempCookie(theName__,theValue__)
{
if ((theNmae != null) && (theValue__ != null))
{
document.cookie = theName__ + "="+theValue__;
return true;
}
return false;
}
function setCookie(theName__,theValue__,theDay__)
{
if ((theName__ != null) && (theValue__ != null))
{
var expDay__ = "Wed, 01 Jan 2020 18:56:35 GMT";
if (theDay__ != null)
{
theDay__ = eval(theDay__);
var setDay = new Date();
setDay.setTime(setDay.getTime()+(theDay__*1000*60*60*24));
expDay__ = setDay.toGMTString();
}
document.cookie = theName__ + "="+escape(theValue__)+";expires="+expDay__;
return true;
}
return false;
}
function deleteCookie(theName__)
{
document.cookie = theName__ + "=;expires=Thu,01-Jan-70 00:00:01 GMT";
return true;
}
function getCookie(theName__)
{
theName__ += "=";
theCookie__ = document.cookie+";";
start__ = theCookie__.indexOf(theName__);
if (start__ != -1)
{
end__ = theCookie__.indexOf(";",start__);
return unescape(theCookie__.substring(start__+theName__.length,end__));
}
return false;
}
//-->
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
<!--
function GetImg(){
setImg=unescape(getCookie("setimg"));
document.myIMG.src=setImg ;
if(setImg=="false"){
document.myIMG.src="images/icons1.gif";
}
}
//-->
</SCRIPT>
</head>
<body onload="GetImg()">
<SCRIPT LANGUAGE="JavaScript">
<!--
function chImage(){
imgDay=120;
num=document.F1.S1.selectedIndex;
myimg=document.F1.S1[num].value;
setImg=escape(myimg);
if(myimg!="-"){
document.myIMG.src=myimg;
setCookie("setimg",setImg,imgDay);
}
}
//-->
</SCRIPT>
<img name="myIMG" src="images/icons1.gif" border="0" width="32" height="32">
<br><br>
<FORM method="post" name="F1">
<SELECT onChange="chImage()" name="S1">
<OPTION selected value="-">画像を選んでください</OPTION>
<OPTION value="-">----------</OPTION>
<OPTION value="images/icons1.gif">パンダ</OPTION>
<OPTION value="images/icons2.gif">ペンギン</OPTION>
<OPTION value="images/icons3.gif">ネコ</OPTION>
<OPTION value="images/icons4.gif">ネズミ</OPTION>
<OPTION value="images/icons5.gif">ライオン</OPTION>
<OPTION value="-">----------</OPTION>
</SELECT>
</FORM>
</body>
</html>
JavaScript GarageのTopへ戻る