人生のプチ美学を教えてください！！

cookie.jsを使ってクッキーを利用する方法。

解決済

  • 質問者：00saka
  • 質問日時：
  • 回答数：2件

cookie.jsを使ってクッキーを利用する方法。

現在ジャバスクリプトにて、複数の画像、リンク、位置データがonClickで変わるように設定しています。
違うページに行き戻ると、置き換えられた画像のデータがなくなってしまいます。
cookie.jsを使えばいいと思い、その設定方法をいろいろと調べてみましたがわかりませんでした。
こういう場合は、ジャバスクリプトをどのように記入すれば良いのでしょうか。
よろしくお願いいたします。

<body>
<a href="http://www.a01"> <img name="AAA" id="AAA" src="images/a01.jpg" style="position: absolute; top: 310px; left: 220px; z-index: 45;" border="0" /></a>
<a href="http://www.b01"> <img name="BBB" id="BBB" src="images/b01.jpg" style="position: absolute; top: 227px; left: 363px; z-index: 120;" border="0" /></a>
<a href="http://www.c01"> <img name="CCC" id="CCC" src="images/c01.jpg" style="position: absolute; top: 418px; left: 425px; z-index: 120;" border="0" /></a>
<form>

<input value="" title="clear" style="background: transparent url(images/clear.gif) no-repeat;" onclick="document.AAA.src='images/spacer.gif';document.links[0].href='#';" type="button" />

<div class="AAA"> <a href="#" class="prev_AAA">戻る</a> <a href="#" class="next_AAA">進む</a>
<ul>
<li>
<input value="" title="" style="background: transparent url(images/a01.gif) no-repeat 0pt 0pt; width: 64px; height: 64px; cursor: pointer;
" onclick="document.AAA.style.top= '310px';document.AAA.style.left='220px';document.AAA.src='images/a01.jpg';document.links[0].href='http://www.a01'" type="button" />
</li>
<li>
<input value="" title="" style="background: transparent url(images/a02.gif) no-repeat 0pt 0pt; width: 64px; height: 64px; cursor: pointer;
" onclick="document.AAA.style.top= '310px';document.AAA.style.left='220px';document.AAA.src='images/a02.jpg';document.links[0].href='http://www.a02'" type="button" />
</li>
</ul></div>
………………

</form></body>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (2件)

No.2ベストアンサー

  • 回答者： kuzumiHK
  • 回答日時：

こんな感じでしょうか。



<script src="jquery.js"></script>
<script src="jquery.cookie.js"></script>
<script type="text/javascript">

// クッキーAAAがA
if($.cookie('AAA') == "A"){
$(function(){
$("a#AAA").attr("href","#");
$("a#AAA img").attr("src","images/spacer.gif");
$("a#AAA img").css("border","10px solid #f00");
});
}
// クッキーAAAがB
if($.cookie('AAA') == "B"){
$(function(){
$("a#AAA").attr("href","http://www.a01");
$("a#AAA img").attr("src","images/a01.jpg");
$("a#AAA img").css("border","10px solid #039");
});
}

$(function(){
// input#btnAがクリック
$("input#btnA").click(function() {
$("a#AAA").attr("href","#");
$("a#AAA img").attr("src","images/spacer.gif");
$("a#AAA img").css("border","10px solid #f00");
$.cookie("AAA","A",{expires:30,path:'/'});
});
// input#btnBがクリック
$("input#btnB").click(function() {
$("a#AAA").attr("href","http://www.a01");
$("a#AAA img").attr("src","images/a01.jpg");
$("a#AAA img").css("border","10px solid #039");
$.cookie("AAA","B",{expires:30,path:'/'});
});

});

</script>

<style type="text/css">

img{
border:none;
}

input{
width: 64px;
height: 64px;
cursor: pointer;
}

input#btnA{
background: transparent url(images/clear.gif) no-repeat 0pt 0pt;
}

input#btnB{
background: transparent url(images/a01.gif) no-repeat 0pt 0pt;
}

</style>

<a href="http://www.a01" id="AAA"><img src="images/a01.jpg" /></a>

<div class="AAA"><a href="#" class="prev_AAA">戻る</a><a href="#" class="next_AAA">進む</a></div>

<form>
<input id="btnA" value="" type="button" />
<input id="btnB" value="" type="button" />
</form>
    • good
    • 0
    • 件
通報する
この回答へのお礼

お礼が遅くなってしまい申し訳ありません。
思ってた通りのものが出来そうです。
これを参考にいろいろと試してみたいと思います。
ありがとうございました。

通報する
お礼日時：2010/07/30 04:20

No.1

  • 回答者： yyr446
  • 回答日時：

cookie.jsってjQueryのやつですよね。


どうせjQuery使うなら、抜本的にjQuery使って
きれいに書き換えた方が、後々のためにもよろしいかと...

まずjQueryの基本的な使い方を習得されてはいかがですか？

http://semooh.jp/jquery/
http://api.jquery.com/category/core/

その後cookie.jsの使い方をマスターする

http://plugins.jquery.com/project/Cookie

その前に、HTML、CSS、Javascriptも基本は理解しよう

この回答への補足

説明不足で申し訳ございませんでした。
cookie.jsはjQueryのものになります。

リンク先のサイトも参考にさせていただきます。
もし何か他にも参考になるサンプルなどがありましたらお教えください。

初心者のものでなかなか苦戦しております。
引き続きよろしくお願いします。

補足日時：2010/07/28 20:56
通報する
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報