複数の画像(それぞれにリンクつき)をリロードごとに「順番に」切り替える方法を教えてください。
ランダムに切り替える方法は探せたのですが「順番に」切り替える方法がわかりません。
よろしくおねがいいたします。
http://nifberry.727.net/test/hatena187.htm
実際にサンプルを書いてみましたが、こんな感じでよいと思います
<html>
<head>
<title>Cookie TEST</title>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<script language="JavaScript">
<!--
var keep,xval;
//リンク先のURL(http:// を頭につけてもよい)
var lnk=new Array('//d.hatena.ne.jp/','//q.hatena.ne.jp/','//a.hatena.ne.jp/','//g.hatena.ne.jp/');
//リンクのイメージ(http:// を頭につけたフルパスでもOK)
var img=new
Array('/naver/naver117/naver117a.gif','/naver/naver117/naver117b.gif','/naver/naver117/naver117c.gif','/naver/naver117/na
ver117d.gif');
//リンクのイメージの解説
var alt=new Array('LINK1','LINK2','LINK3','LINK4');
var maxlink=img.length;
function InitCookie(){
//Cookieの読み出し
val=new Array();
val= document.cookie.split("; ");
valbase="hatena187="; // Cookieの変数名
len=valbase.length;
keep=0;
for(i=0;val[i];i++){
if (val[i].substr(0,len) == valbase){
keep = 1 * val[i].substr(len,val[i].length);
break;
}
}
//読み出し値の修正
if(!keep)keep=0;
xval=keep;
keep=(keep+1)%maxlink;
//クッキーの書き込み処理
exp=new Date();
//クッキーは1週間有効)
exp.setTime(exp.getTime()+24*3600*1000*7);
document.cookie = valbase + keep + "; expires=" + exp.toGMTString();
}
// -->
</script>
</head>
<body bgcolor="#ffffff">
<form>
<script language="JavaScript">
<!--
InitCookie();
//ここで実際の描画処理
document.write('<A HREF="'+ lnk[xval] +'"><IMG SRC="'+img[xval]+'" ALT="'+alt[xval]+'"></a>');
//-->
</script>
</body>
</html>
例えば、この場合は4つのリンクと画像がロードするたびに変わり4つ目までいったら最初に戻ります
keep = (keep +1 ) % maxlink;
最初に戻る処理はここでやっています
Cookieを使えばできます。
Cookieに書き込む数字をリロードごとに一つずつ増やしていき、それを%演算子でも使ってやるとできます。
自力でCookieを扱うのは結構めんどうですので
http://www.shiojiri.ne.jp/%7eopenspc//js/index.html
のようなライブラリを使うと簡単ですよ。
ありがとうございます。
ですが上記のURLを拝見してもどうすればよいか分かりませんでした。もうすこしじっくり見てみますが・・・素人なのですみません。
あと、最後の画像の次はまた1枚目の画像に戻るようにしたいのです。
http://nifberry.727.net/test/hatena187.htm
実際にサンプルを書いてみましたが、こんな感じでよいと思います
<html>
<head>
<title>Cookie TEST</title>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<script language="JavaScript">
<!--
var keep,xval;
//リンク先のURL(http:// を頭につけてもよい)
var lnk=new Array('//d.hatena.ne.jp/','//q.hatena.ne.jp/','//a.hatena.ne.jp/','//g.hatena.ne.jp/');
//リンクのイメージ(http:// を頭につけたフルパスでもOK)
var img=new
Array('/naver/naver117/naver117a.gif','/naver/naver117/naver117b.gif','/naver/naver117/naver117c.gif','/naver/naver117/na
ver117d.gif');
//リンクのイメージの解説
var alt=new Array('LINK1','LINK2','LINK3','LINK4');
var maxlink=img.length;
function InitCookie(){
//Cookieの読み出し
val=new Array();
val= document.cookie.split("; ");
valbase="hatena187="; // Cookieの変数名
len=valbase.length;
keep=0;
for(i=0;val[i];i++){
if (val[i].substr(0,len) == valbase){
keep = 1 * val[i].substr(len,val[i].length);
break;
}
}
//読み出し値の修正
if(!keep)keep=0;
xval=keep;
keep=(keep+1)%maxlink;
//クッキーの書き込み処理
exp=new Date();
//クッキーは1週間有効)
exp.setTime(exp.getTime()+24*3600*1000*7);
document.cookie = valbase + keep + "; expires=" + exp.toGMTString();
}
// -->
</script>
</head>
<body bgcolor="#ffffff">
<form>
<script language="JavaScript">
<!--
InitCookie();
//ここで実際の描画処理
document.write('<A HREF="'+ lnk[xval] +'"><IMG SRC="'+img[xval]+'" ALT="'+alt[xval]+'"></a>');
//-->
</script>
</body>
</html>
例えば、この場合は4つのリンクと画像がロードするたびに変わり4つ目までいったら最初に戻ります
keep = (keep +1 ) % maxlink;
最初に戻る処理はここでやっています
ありがとうございます。
ソースを書いていただいてとても助かりました!
ありがとうございます。
ソースを書いていただいてとても助かりました!