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

解決済

質問者：kamaboko7
質問日時：2008/10/24 14:01
回答数：2件

タブ画像を切り替えるようなことをJavaで行うにはどうすればよいでしょうか？

下記のようなAのタブとBのタブが２つあるとして、最初のページアクセスではAのタブがオンになっています。
画像はAとBそれぞれにオン・オフがあり、4つの画像を使用します。

＿＿[ A-オン]＿[B-オフ]＿＿　←デフォルト

ここでB-オフの画像をクリックすると、

＿＿[ A-オフ]＿[B-オン]＿＿　←こうなる

という風にオンクリックで切り替えることができるようにしたいと考えています。
もちろん、逆にBからAに切り替えることもできるようにしたいです。
（オンになっている方のタブをクリックしてもそのまま画像は変わらない）

そして、切り替えた状態をクッキーに保存し、再度アクセスした時も切り替わったままになっていると嬉しいです。
このタブ（まったく同じもの）を複数のページの同じ箇所に設置したいのですが、
ページ１で切り替えた後、ページ２にアクセスしたとして、ページ２でも切り替わった状態で表示されると完璧です。
このようなことが可能でしょうか？どなたかご教授いただけると幸いです。よろしくお願いします。

通報する

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

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： _pipi_
回答日時：2008/10/25 09:36

<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>

この回答への補足

とても具体的で詳細なご回答くださり本当にありがとうございます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