タイトルの通りなのですが、実現できず困っております。
どなたかお力を貸していただけないでしょうか。
具体的には、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ベストアンサー
- 回答日時:
力不足カモ、ですが・・・。
小さな画像を上横に並べ、マウスオンすると背景画像が切り替わる。
これで良いなら以下
●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で横に並べる、とか、背景の位置調整などを設定して下さい。
有難う御座います。
教えていただいたソースを試してみたのですが、リンクの画像が別ページで表示される動きしか確認が出来ませんでした。
設定の仕方が間違っているのでしょうか?
また、これはクリック時にマウスオーバー画像に固定されますでしょうか?
宜しくお願いします。
No.2
- 回答日時:
こんにちは
どのような方法で実装なさっているのかが不明なので、具体的なスクリプト等を示せませんが・・・
想像するところ、タブをクリックした際のコンテンツの切替はスクリプトでなさっているものと推測します。
ですので、そのスクリプト内で、該当するタブ(=イベントが発生した要素)に特定のクラス設定(例えばactiveとかactive_tabとか)をするようにしておけばよろしいかと思います。
その上で、CSSを
#tab1:hover, #tab1.active { ~~ }
のようにしておけば、hover時及びクラス設定のある時の表示はこちらに従うことになりますので。
No.3
- 回答日時:
あっ、済みません
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 などが1意に出来なくて他と競合する場合はscriptのその箇所に#contentを付加して下さい。
(#content ul li imgの様に)
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- AJAX 自作の地図をグーグルマップのようにしたい 3 2022/11/15 11:53
- HTML・CSS 下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない 1 2022/04/16 21:31
- HTML・CSS CSSでサイトの背景に画像を組み込みたいのですが反映されません 2 2022/11/22 16:21
- HTML・CSS トリミングで表示した画像をクリックで元どおりにしたい 3 2022/12/16 18:49
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- HTML・CSS (Javascript)印刷するファイルに応じて印刷プレビュー画面で用紙を自動的に切り替えたい!! 2 2022/04/11 12:04
- HTML・CSS 差し込み画像にをcssで大きさ指定したい 1 2022/11/23 23:14
- その他(パソコン・スマホ・電化製品) アンドロイドスマホの画面にクリックするとJPG写真が開くショートカットを作りたいのですが、方法をおし 3 2023/08/27 10:01
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
スライドショーの画像にリンク...
-
Slick.jsのオプションrtlについて
-
エンドロールを枠の中で表示す...
-
MAX関数を使ってからLEFT JOIN...
-
c++std::string型をTCHARに変換...
-
htmlの記述で link rel=styles...
-
JQueryで画像の上で文字を動かす
-
ロールオーバー効果にならない。
-
jspでcssが読み込めない
-
スライダーを実装した場合、ペ...
-
離れた場所にマウスオーバーで...
-
フォントサイズの変更
-
変数内容をHTML内で表示する方法
-
javascriptでURLにマウスオーバー
-
1行で左寄せと右寄せと中央揃え...
-
document.getElementById( ).st...
-
連番画像「次へ」「前へ」で、...
-
文字を固定したいのですが…
-
戻ってきた時ツリーメニューが...
-
eclipseでcssを使うためには?
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Slick.jsのオプションrtlについて
-
【jQuery】2分割レイアウトで、...
-
アコーディオンメニューが開い...
-
横並びの画像を3枚時間差でフェ...
-
html5に変えるとスライドショー...
-
キャラクターがぴょこんと飛び...
-
jsでグリッドデザインのサムネ...
-
Javaスクリプトで画像を縦にス...
-
複数の要素へ appendchild でき...
-
CSSでマウスオーバーした画像を...
-
【iOS及びAndroid】リンク画像...
-
スライドショー「Skitter」をカ...
-
Dreamweaver上とデバイスプレビ...
-
同一ページ内の複数のタグに同...
-
スライド機能について
-
チェックボックスと画像切替の連動
-
jqueryのプラグインslickの画像...
-
Javascriptを使用したスライド...
-
bxSliderのランダム表示について
-
Firefoxとクロームでフェードイ...
おすすめ情報