ベストアンサー

cookieによる画像切り替えについて

2014/02/24 18:09

Cookieを使って、「初回訪問時は画像A（リンク付）を表示し、2回目以降は画像B、画像C、画像Dの中からランダムに表示（リンク付）」するという動作を検討しているのですが、具体的な記述がわからず困っています。上記に近いライブラリなどがあれば助かるのですが、都合の良いものが見つからないので、ご存知の方ご教示いただけないでしょうか。（手法はJavascriptでもjQueryでも問題ありません。）

css_daisuki
お礼率100% (2/2)

JavaScript
回答数1
ありがとう数6

みんなの回答 （1）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

hamuty
ベストアンサー率50% (2/4)

2014/02/28 02:53 回答No.1

作ってみました。 jquery.cookie.jsというプラグインを使っているので、それだけダウンロードしてください。 jquery.cookie.jsに関しては http://www.tam-tam.co.jp/tipsnote/javascript/post3109.html 乱数に関しては http://fnya.cocolog-nifty.com/blog/2007/01/javascript_d1ca.html を参考にさせていただきました。 IEとFireFoxでは簡単に動作確認したのですが、とりあえず動いているようです。 chromeではcookieを読むときにundefinedになってしまったのですが、同じような問題にぶつかっている人がいたので、chromeはローカルでは確認できないのかもしれません。 http://stackoverflow.com/questions/8105135/cannot-set-cookies-in-javascript よろしくお願いします。 <html> <head> <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>  <script type="text/javascript" src="./jquery.cookie.js"></script> <script type='text/javascript'> $(document).ready(function() { var imgSrc = ""; var url = ""; if($.cookie("repeat")) { //もし将来的に乱数を増やしたくなったらこの変数を変える。 var randomTo = 3; //1から3の整数をランダムに生成。javascriptは乱数の作り方が複雑。 var num = Math.floor(Math.random()*randomTo+1); if(num == 1) { //画像Bのパス imgSrc = "./b.jpg"; //対応するURL url = "dummyb"; } else if(num == 2) { //画像Cのパス imgSrc = "./c.jpg"; //対応するURL url = "dummyc"; } else { //画像Dのパス imgSrc = "./d.jpg"; //対応するURL url = "dummyd"; } } else { //画像Aのパス imgSrc = "./a.jpg"; //対応するURL url = "dummya"; //cookieの寿命は7日間にしておく。 $.cookie("repeat", 1 , { expires: 7 }); } $("img#sample_img").attr('src',imgSrc); $("a#sample_url").attr('href', url); }); </script> </head> <body> <a id='sample_url' href=''><img id="sample_img" src="" /></a> </body </html>

質問者