CSSでマウスオーバーした画像をクリックで固定

タイトルの通りなのですが、実現できず困っております。
どなたかお力を貸していただけないでしょうか。

具体的には、CSSで作ったボックスが3つあり、これがタブの役割をしています。
一番左のタブをクリックするとその下に「あいうえお」次のタブで「かきくけこ」…
↓

■□□
=====================
あいうえお

□■□
=====================
かきくけこ

といった感じで、その場で表示内容を切り替えています。
この部分は上手く設定が出来たのですが、問題はタブの部分です。

このタブはCSSで背景画像をボタン風に見せて、マウスオーバー時に背景画像を差し替えて画像が変更するように設定しているのですが、マウスをタブから放してしまうと、当然マウスオーバー前の画像に戻ってしまいます。CSSでは以下の通りです。

#tab1 {
background:url(./hoge.png) no-repeat;
width:100px;
height:20px;
}
#tab1:hover {
background:url(./hoge_over.png) no-repeat;
}
#tab2 {
……………

これをマウスオーバー時も#tab1:hoverで指定した画像に切り替わり、かつクリックをした場合、次の別の画像をクリックするまで画像を保持したいのです…。

調べてみたところ、普通に画像で実現されている例はあったのですが、CSSで表示した領域の背景画像を保持させる方法というのが見つからず、とても困っております。

これは、jacascriptになるのでしょうか？
どなたかお詳しい方いらっしゃいましたら、実現する為のアドバイスをいただけないでしょうか。

どうぞ宜しくお願いします。m(_ _)m

No.1 ベストアンサー 回答者： t_fumiaki 回答日時： 2016/01/18 18:33

力不足カモ、ですが・・・。

小さな画像を上横に並べ、マウスオンすると背景画像が切り替わる。
これで良いなら以下
●html部分
<ul>
<li><a href="背景画像1"><img src="小さなlist画像1" /></a></li>
<li><a href="背景画像2"><img src="小さなlist画像2" /></a></li>
<li><a href="背景画像3"><img src="小さなlist画像3" /></a></li>
</ul>

●java部分
$(function(){
$('ul li img').fadeTo(0,0.4);
$('ul li img').hover(function(){
$(this).fadeTo(300,1.0);
},
function(){
$(this).fadeTo(300,0.4);
})
$('ul li a').click(function(){
return false;
});
$('ul li a').mouseover(function(){
var bglink = $(this).attr("href");
$("div#content")
.css("background-image","url("+bglink+")");
});
});

骨子だけなので、cssで小さな画像をlistで横に並べる、とか、背景の位置調整などを設定して下さい。

この回答へのお礼

有難う御座います。

教えていただいたソースを試してみたのですが、リンクの画像が別ページで表示される動きしか確認が出来ませんでした。
設定の仕方が間違っているのでしょうか？

また、これはクリック時にマウスオーバー画像に固定されますでしょうか？
宜しくお願いします。

お礼日時：2016/01/19 08:57

No.2 回答者： fujillin 回答日時： 2016/01/19 10:35

こんにちは

どのような方法で実装なさっているのかが不明なので、具体的なスクリプト等を示せませんが・・・

想像するところ、タブをクリックした際のコンテンツの切替はスクリプトでなさっているものと推測します。
ですので、そのスクリプト内で、該当するタブ（=イベントが発生した要素）に特定のクラス設定（例えばactiveとかactive_tabとか）をするようにしておけばよろしいかと思います。

その上で、CSSを
　#tab1:hover, #tab1.active { ～～ }
のようにしておけば、hover時及びクラス設定のある時の表示はこちらに従うことになりますので。

No.3 回答者： t_fumiaki 回答日時： 2016/01/19 14:36

あっ、済みません

t_fumiaki　です。
ULをDIVで囲うのをコピーし忘れました。

<div id="content">　←忘れた！！重要
<ul>
<li><a href="11.gif"><img src="1.gif" alt="背景1" /></a></li>
<li><a href="12.gif"><img src="2.gif" alt="背景2" /></a></li>
<li><a href="13.gif"><img src="3.gif" alt="背景3" /></a></li>
<li><a href="14.gif"><img src="4.gif" alt="背景4" /></a></li>
</ul>
</div>　←忘れた！！

動作確認済みの処理です。
マウスオン画像で固定されます。
ul li img　などが１意に出来なくて他と競合する場合はscriptのその箇所に#contentを付加して下さい。
（#content ul li imgの様に）