cookie.jsを使ってクッキーを利用する方法
- JavaScriptでクッキーを利用する方法についての設定方法を調べています。
- 現在、JavaScriptを使用して画像やリンク、位置データを切り替える設定を行っていますが、ページを移動すると画像のデータがリセットされてしまいます。
- このような場合には、cookie.jsを使用してクッキーを利用することで、データの保持を実現することができます。具体的な設定方法についてはわかりませんので、アドバイスをいただけると助かります。
- ベストアンサー
cookie.jsを使ってクッキーを利用する方法。
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>
- 00saka
- お礼率75% (3/4)
- JavaScript
- 回答数2
- ありがとう数3
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
こんな感じでしょうか。 <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>
その他の回答 (1)
- yyr446
- ベストアンサー率65% (870/1330)
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のものになります。 リンク先のサイトも参考にさせていただきます。 もし何か他にも参考になるサンプルなどがありましたらお教えください。 初心者のものでなかなか苦戦しております。 引き続きよろしくお願いします。
関連するQ&A
- FireFoxで確認するとliがずれます
webページを作成していてリスト部分が下にずれてしまうのに困っています。 添付図のようにIEで見るとちゃんと置きたい位置に収まってくれるのですが、 firefoxでは収まってくれません。 ご教授頂けたら幸いです。 タグ <div id="header"> <h1><a href="index.html"><img src="images/buyoon_syoukai_web_site.jpg" alt="ブヨーン商会WEBSITE" width="180" height="50" /></a></h1> <div id="gNavi"> <ul> <li><a href="information.html"><img src="images/information.jpg" alt="information" width="120" height="50" /></a></li> <li><a href="profile.html"><img src="images/profile.jpg" alt="profile" width="120" height="50" /></a></li> <li><a href="photograph.html"><img src="images/photograph.jpg" alt="photograph" width="120" height="50" /></a></li> <li><a href="bbs.html"><img src="images/bbs.jpg" alt="bbs" width="120" height="50" /></a></li> </ul> </div><!-- /gNavi --> </div> スタイルシート #header { width: 740px; height: 50px; margin: 0px; padding: 0px; } #header h1 { width: 180px; height: 50px; margin-top: 0px; margin-right: px; margin-bottom: 0px; margin-left: 0px; padding: 0px; float: left; position: absolute; } #gNavi { list-style-type: none; width: 560px; height: 50px; margin-top: 0px; margin-right: 0px; margin-left: 220px; margin-bottom: 0px; float: right; position: absolute; } #gNavi li { list-style-type: none; margin: 0px; padding: 0px; float: left; } 素人作成のため乱雑の作成内容で恐縮ですが、 アドバイス頂けると幸いです。
- ベストアンサー
- HTML
- IEとFirefoxの見え方のずれにおけるCSSの解決法（liタグ）
こんにちは、質問させて下さい。 現在 li タグを使って、メニュー（画像）を作っていたのですが、 IEでは表示されるのですが、firefoxだとどうしても左に余白が出てしまいます。 マーカーボックスの指定が消えていないのかな、と素人ながらに思うのですが、それが正しいのか、正しくとも正しくなくとも、ではどう直せばいいのか分かりません。 どうぞご回答お願いいたします。 以下は、そのliに関連するCSSと、ソースです。 ■CSS #div{ width: 458px; float: left; text-align: center; border-top-width: 2px; border-bottom-width: 2px; border-top-style: dotted; border-bottom-style: dotted; border-top-color: #333333; border-bottom-color: #333333; padding-top: 10px; padding-bottom: 10px; margin-bottom: 15px; margin-right: auto; margin-left: auto; padding-left: 10px; } #div ul{ list-style-type:none; display: block; width: 432px; text-align: center; margin: 0px; } #div li { float: left; height: 200px; width: 140px; margin-right: 4px; margin-bottom: 10px; margin-top: 0px; margin-left: 0px; } #div li img{ border:none; ■html <div> <ul> <li><a href="1.html"><img src="image/menu1.jpg" alt="品"></a></li> <li><a href="2.html"><img src="image/menu2.jpg" alt="品"></a></li> <li><a href="3.html"><img src="image/menu3.jpg" alt="品"></a></li> <li><a href="4.html"><img src="image/menu4.jpg" alt="品" /></a></li> <li><a href="5.html"><img src="image/menu5.jpg" alt="品"></a></li> <li><a href="6.html"><img src="image/menu6.jpg" alt="商"></a></li> </ul> </div> 宜しくお願いいたします。
- ベストアンサー
- HTML
- 画像が表示されない。
質問させてもらいます。 jqueryのjCarouselLiteを使ってメニューを作りました。 その際、メニューをクリック等するとコンテンツが表示されるようにしようと思っているのですが、 初期状態を非表示にしたく、コンテンツ部分(AAA)を{ display: none; }にしました。 それでメニュークリックして表示させるまでは良いのですが、 AAAの中身（こちらにもjCarouselLiteのスライドを使用しています）の画像だけが表示されないのです。 jCarouselLiteを使用せず、普通に画像やテキストのみを置いた場合は問題なく動作します。 また、{ display: none; }を入れない場合も（見栄えの問題があるものの）問題なく動作します。 【メニュー部分】 <div class="carousel"> <div class="jCarouselLite"> <ul> <li><a href=""onClick="document.getElementById('AAA').style.display = 'inline';" /> <img src="img/1.jpg" /></a></li> </ul> </div> </div> 【コンテンツ部分】 <div id="AAA"> <div class="carousel2"> <a href="#" class="prev2"><img src="img/left.png" border="0" /></a> <a href="#" class="next2"><img src="img/right.png" border="0" /></a> <div class="jCarouselLite2"> <ul> <li><img src="img/001.jpg" /></li> <li><img src="img/002.jpg" /></li> <li><img src="img/003.jpg" /></li> </ul> </div> </div> </div> 上記のleft.pngなどは表示されるのですが、img/001.jpgなどが表示されません。 <div id="AAA"></div>内<div class="carousel2"></div>内に001.jpgを置いた場合は普通に表示されます。 問題の発生するjCarouselLite2のCSSは以下のとおりです。 .jCarouselLite2 { margin: 5px auto 0px; width: 560px; } .jCarouselLite2 li img, .jCarouselLite2 li p { background-color: #fff; width:500px; height: 333px; margin: 5px; } 説明不足もあるかも知れませんが、ご指摘いただけると幸いです。
- ベストアンサー
- CSS
- 真中にならない
HTML <div align="center"> <ul class="u"> <li><a href="index.html"><img onmouseover="this.src='images/home2.jpg'" onmouseout="this.src='images/home.jpg'" src="images/home.jpg" alt="" border="0" /></a></li> <li>・・・・・ </li> </ul> </div> CSS ul.u { list-style:none; margin: 0px; padding: 0px; } ul.u li{ float: left; list-style:none; display:inline; margin: 0; } これで中央に来ないのですがどうしてでしょうか？ ulではなくtableですと真中にちゃんときます。
- ベストアンサー
- HTML
- spanで指定する方法教えてほしいです。
<span class="top">Home</span> topで指定したのですが、うまく画像が表示されません。 どうすればうまくbackground-colorのimages/btn046_06.gifが表示されるでしょうか？ よろしくお願いします。 htmlの部分 <div id="left_navi"> <ul> <li><a href="#"><span class="top">Home</span></a></li> <li><a href="#"><span>Categories</span></a></li> <li><a href="#"><span>About</span></a></li> <li><a href="#"><span>Portfolio</span></a></li> <li><a href="#"><span>Contact</span></a></li> <li><a href="#"><span>Home</span></a></li> <li><a href="#"><span>Categories</span></a></li> </ul></nav> </div> cssの部分 #left_navi{ width:230px; height:700px; background-color:#e6e6e6; float:left; } #left_navi ul{ list-style-type: none; padding-top: 20px; color:blue; } #left_navi li{ padding-top:20px; } #left_navi a{ text-align: center; display:block; width:100%; height:40px; padding-bottom:9px; padding-top: 11px; padding-left:-50px; padding-right:30px; background-image:url(images/btn046_05.gif); background-repeat:no-repeat; color:gray; } #left_navi a .top{ background-image:url(images/btn046_06.gif); } #left_navi a:hover{ background-image:url(images/btn046_10.gif); color: blue; }
- ベストアンサー
- CSS
- IEでは指定の位置に配置してくれません
添付図のようにしたいのですが、 IEでは右に空白ができてしまい配置したいところに配置できません。 図のFireFox確認時の方が配置したい位置に配置できている正です。 タグ <div id="header"> <h1><a href="index.html"><img src="images/buyoon_syoukai_web_site.jpg" alt="ブヨーン商会WEBSITE" width="180" height="50" /></a></h1> <div id="gNavi"> <ul> <li><a href="information.html"><img src="images/information.jpg" alt="information" width="120" height="50" /></a></li> <li><a href="profile.html"><img src="images/profile.jpg" alt="profile" width="120" height="50" /></a></li> <li><a href="photograph.html"><img src="images/photograph.jpg" alt="photograph" width="120" height="50" /></a></li> <li><a href="bbs.html"><img src="images/bbs.jpg" alt="bbs" width="120" height="50" /></a></li> </ul> </div><!-- /gNavi --> </div> CSS /* レイアウト設定ここから */ #pageBody { width: 740px; margin-top: 0px; margin-right: auto; margin-left: auto; margin-bottom: auto; } #header { width: 740px; height: 50px; margin: 0px; padding: 0px; } #topFlContens { width: 740px; height: 320px; margin: 0px; padding: 0px; } #box { width: 740px; height: 550px; margin-top: 20px; margin-right: 0px; margin-left: 0px; margin-bottom: 0px; padding: 0px; } /* レイアウト設定ここまで */ #header h1 { width: 180px; height: 50px; margin-top: 0px; margin-right: px; margin-bottom: 0px; margin-left: 0px; padding: 0px; float: left; position: absolute; } #gNavi { list-style-type: none; width: 560px; height: 50px; margin-top: 0px; margin-right: 0px; margin-left: 220px; margin-bottom: 0px; float: right; position: absolute; } #gNavi ul { margin: 0px; } #gNavi li { list-style-type: none; margin: 0px; padding: 0px; float: left; } Web初心者のため、アドバイス頂けると幸いです。
- ベストアンサー
- HTML
- 順番にクラスをつけていく方法
順番にクラスを付与していく方法を考えているのですが、 思いつかないのでご教授ください。 下記のようなソースでギャラリーをjqueryで作成しました。 「次へ」「戻る」を押すと画像が左右にスライドする仕組みにしました。 画像にたいしてフェードをかけようと思い、画像を 初期状態でフェード０にしてactiveクラスがついたときに フェードを１００にしようと思いました。 対象の画像をクリックすることでクラスを追加したり 削除したりする方法はわかったのですが、 「次へ」「戻る」ボタンを押すことで画像を切り替えているため、 どのようにしたら順番に画像にクラスをつけることが できるのかがわかりません。 簡単な方法をご存知の方おられましたら よろしくお願いします。 <div id="gallery"> <ul> <li><a href="#"><img src="images/photo1.jpg" alt="" /></a></li> <li><a href="#"><img src="images/photo2.jpg" alt="" /></a></li> <li><a href="#"><img src="images/photo3.jpg" alt="" /></a></li> <li><a href="#"><img src="images/photo4.jpg" alt="" /></a></li> <li><a href="#"><img src="images/photo5.jpg" alt="" /></a></li> <li><a href="#"><img src="images/photo6.jpg" alt="" /></a></li> <li><a href="#"><img src="images/photo7.jpg" alt="" /></a></li> <li><a href="#"><img src="images/photo8.jpg" alt="" /></a></li> </ul> </div> <div class="paging"> <a href="#" class="previous">戻る</a> <a href="#" class="next">次へ</a> </div>
- ベストアンサー
- JavaScript
- firefoxのみテーブルのborderが消える
firefoxのみテーブルの上下のborderの一部が消えてしまいます。 ウィンドウのサイズを変えると消える位置が変わります。 消えないための方法はありますか？ 【CSS】 table.aaa{ width:750px; border-top:1px solid #333; border-bottom:1px solid #333; border-collapse:separate; border-spacing:0; text-align:center; margin-top:30px; } td.bbb, td.ccc{ padding:30px 30px; } td.ccc{ width:100px; background:#000; color:#fff; } ul{ width:750px; margin-left: -23px; overflow:hidden; } ul li { display: inline; width: 200px; margin-left: 30px; float: left; } ul li img { display: block; border: 1px solid #555; } 【HTML】 <table class="aaa"> <tr> <td class="ccc">テスト１</td> <td class="bbb">※※※※※※※※※※</td> </tr> </table> <ul> <li><a href="xxx.html#w1"><img src="sample.jpg" width="200" height="150" ></li> <li><a href="xxx.html#w2"><img src="sample.jpg" width="200" height="150" ></li> <li><a href="xxx.html#w3"><img src="sample.jpg" width="200" height="150" ></li> </ul> <ul> <li><a href="xxx.html#w4"><img src="sample.jpg" width="200" height="150" ></li> </ul> <table～…～</ul>まで10個ほど繰り返す。
- ベストアンサー
- HTML
- 画像を挿入して横並びのメニューリストを作ったのです
が、margin-top,margin-bottom(margin-leftはききます）がききません。何が原因でしょうか？ 以下がソースです。 ～html～ <ul id="menu"> <ul> <li>a href="#"><img src="〇〇.jpg"alt="〇〇" width="167" height"59"/></a></li> <li><a href="#"><img src="△△.jpg"alt="△△" width="167" height"59"/></a></li> 省略 </ul> ～css～ ul#menu {margin-left: 45px} ul#menu li {list-style-type: none; float: left} ul#menu li a {display: block; width: 181px} ul#menuのところに記述しましたが、変化ありませんでした。
- ベストアンサー
- CSS
- javascript src書き換え
javascript 初心者なのですが、質問させてください。 クリックした画像を3.jpgに書き換えるというコードを書いたのですが、うまく動きません。 どこが違間違っているのでしょうか。 /-------------------------------------------------------------/ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>神経衰弱</title> <style type="text/css"> ul { width: 300px; list-style:none; margin: 0; padding: 0; } li { float:left; margin: 0; padding; 0: } img { vertical-align: bottom; } #all { width: 300px; margin: 0px auto 0px; margin-top: 50px; } </style> </head> <body> <div id="all"> <ul> <li><img src="none.jpg" alt="3" width="100px" height="100px" id="c_1" onclick="conce(c_1)" /></li> <li><img src="none.jpg" alt="1" width="100px" height="100px" id="c_2" onclick="conce(c_2)" /></li> <li><img src="none.jpg" alt="4" width="100px" height="100px" id="c_3" onclick="conce(c_3)" /></li> <li><img src="none.jpg" alt="4" width="100px" height="100px" id="c_4" onclick="conce(c_4)" /></li> <li><img src="none_2.jpg" alt="" width="100px" height="100px" id="c_5"/></li> <li><img src="none.jpg" alt="2" width="100px" height="100px" id="c_6" onclick="conce(c_5)" /></li> <li><img src="none.jpg" alt="1" width="100px" height="100px" id="c_7" onclick="conce(c_6)" /></li> <li><img src="none.jpg" alt="2" width="100px" height="100px" id="c_8" onclick="conce(c_7)" /></li> <li><img src="none.jpg" alt="3" width="100px" height="100px" id="c_9" onclick="conce(c_8)" /></li> </ul> </div> <script type="text/javascript"> function conce(aaa){ document.getElementById("aaa").src = "3.jpg"; } </script> </body> </html> /-----------------------------------------------------------------------/ よろしくお願いします。
- ベストアンサー
- JavaScript
お礼
お礼が遅くなってしまい申し訳ありません。 思ってた通りのものが出来そうです。 これを参考にいろいろと試してみたいと思います。 ありがとうございました。