タブ画像を切り替えてクッキー保存

2008/10/24 14:01

このQ&Aのポイント

Javaを使用して、タブ画像を切り替える方法はありますか？タブにはAとBがあり、4つの画像を使用します。切り替えた状態をクッキーに保存し、複数のページでその状態を保持したいです。
タブ画像を切り替えるためのJavaの方法を教えてください。AとBのタブがあり、4つの画像を使用します。クッキーに切り替えた状態を保存し、複数のページでその状態を保持したいです。
Javaでタブ画像を切り替える方法を教えてください。AとBのタブがあり、4つの画像を使用します。切り替えた状態をクッキーに保存して、複数のページで同じ状態を保持したいです。

kamaboko7
お礼率81% (9/11)

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

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

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

ベストアンサー

noname#84373

2008/10/25 09:36 回答No.1

<html> <head><style>.box {border:1px #000 solid;padding:4px;}</style></head> <body> <p><a href="#" id="a" class="box"></a><a href="#" id="b" class="box"></a></p> <div><img width="200" height="200" id="c"></div> <script> var n=loadCookie('imgNo'); setImage(); document.body.onclick=function(e){ var o=e?e.target:event.srcElement; if(o.id=='a') {n^=2;setImage();} if(o.id=='b') {n^=1;setImage();} } function saveCookie( vn, v, dy ){ if(navigator.cookieEnabled) document.cookie=vn+'='+escape(v)+ ';expires='+new Date((new Date()).getTime()+dy*86400000).toGMTString();} function loadCookie(vn){ var r = '',o = document.cookie.split('; '); for (var i in o){ var c = o[i].split('='); if (c[0]==vn && c[1]!=''){ r = c[1]?unescape(c[1]):'';break; }} return r;} function setImage(){ saveCookie('imgNo',n,10); document.getElementById('a').innerHTML=['A-Off','A-On'][(n&2)>>1]; document.getElementById('b').innerHTML=['B-Off','B-On'][n&1]; document.getElementById('c').src = n+'.jpg'; document.getElementById('c').alt = n+'.jpg';//なくてもよい } </script>

質問者

お礼 2008/10/25 16:58

簡単なことでした＾＾；解決しました。ありがとうございました＾＾

質問者

補足 2008/10/25 11:05

とても具体的で詳細なご回答くださり本当にありがとうございますm(_ _)m 実行してみたところ、動作は全く問題なかったのですが、私が意図する内容と異なっておりました。せっかくこのようなご回答を頂いておいて申し訳ないです。私の説明が下手クソなために本当にごめんなさい。今一度、実現したい内容をご説明させていただきたいと思います。４つの画像というのはタブ画像のことで、タブをクリックした時に下部に表示される画像を切り替えたいのではなく、タブ画像そのものを切り替えたいと考えています。組み合わせは４パターンではなく、２パターンになると思います。さらに詳しく申し上げますと、タブクリックでCSS（文字サイズ）を切り替えたいのです。＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　| small | default |　　　ホームページタイトル　　　　　　　　　　　　　　　　　　　　　　　　　●PAGE1 ●PAGE2 ●PAGE3 ●PAGE4 ￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～このようなページを作り、small or default をクリックしてテキストの文字サイズを任意に変更できるようにしたいのです。タブ部分には、small1.gif,small2.gif,default1.gif,default2.gifの４つのボタン画像を使います。選択されている方のボタン画像の背景色を変えて、どちらが選択されているのか一目で分かるようにしたいので、選択されている状態のタブ画像(1の方)と選択されていない状態のタブ画像(2の方)が２つずつあることになります。最初はdefaultなので、 <img src="small2.gif" alt="文字サイズ：小"><img src="default1.gif" alt="文字サイズ：中"> のような状態になっており、smallをクリックすると、 <img src="small1.gif" alt="文字サイズ：小"><img src="default2.gif" alt="文字サイズ：中"> のような状態に切り替わるスイッチのような見た目にしたいと思っているのです。 CSSの切り替えには専用のjavascriptライブラリ(?)を使い実現することができました。 <a href="#" onclick="setActiveStyleSheet('small'); return false;"><img src="small2.gif" alt="文字サイズ：小"></a> <a href="#" onclick="setActiveStyleSheet('default'); return false;"><img src="default1.gif" alt="文字サイズ：中"></a> このようにするとタブ画像クリックで文字サイズは変わるのですが、当然画像はそのままなので困ります。組み合わせは、small1.gif - default2.gif と　small2.gif - default1.gif しかないことになります。選択されていない方をクリックすると左右の画像を1と2に入れ替えるというか切り替わるというか・・・説明が難しいのですけれど。こちらでご回答くださったものをいじるとできそうな気がしたのでやってみたのですが、 small1.gif - default1.gif のように1と1、2と2の組み合わせにもなってしまったりしてうまくいきませんでした・・・。記述を若干変えるなどして実現できないものでしょうか？無理難題申し訳ありません。クッキー保存はバッチリでしたm(_ _)m

ログインすると、全ての回答が全文表示されます。