タグを切り替えるJavaScriptと
http://archiva.jp/web/javascript/tab-menu.html (参考サイト)
ロールオーバーのJavaScript
http://css-happylife.com/template/14/ (参考サイト)
この2つを組み合わせようと思ったのですが、どうにもうまくいきません。
今記述しているままではロールオーバーで画像が切り替わりますが、選択しているタグが元の画像に戻ってしまいます。
詳しく説明すると、タグ切り替えのサンプルページでは、Page3を押すとPage3のタグの部分が黒く切り替わっていると思います。しかし、今の記述ではロールオーバーの時しか画像が変わらずマウスを外すと元に戻ってしまいます。
サンプルページではフォントとbackgroud-colorを使用して
#tab li a:hover,
#tab li.present a {
border-color: #333;
color: #000;
}
ここで適用していると思います。
しかし、私は画像を使って切り替えたいのです。
色々試してみたのですが、どうにもうまくいかないため投稿しました。
お力添えよろしくお願いします。
↓現在の記述↓
<!------------html------------>
<ul id="tab">
<li><a href="#page1"><img src="img/about_gnavi_what_off.gif"></a></li>
<li><a href="#page2"><img src="img/about_gnavi_type_off.gif"></a></li>
<li><a href="#page3"><img src="img/about_gnavi_tellme_off.gif"></a></li>
</ul>
<!------------css------------>
ul#tab{
margin:0;
padding:0;
}
ul#tab li{
float:left;
display:inline;
margin:8px 0 0 10px;
}
No.3ベストアンサー
- 回答日時:
#2です(お礼拝見済み)
各リストの画像が個別の3枚でしたね・・・見逃していました。
色々な方法がありますが、背景画像を各個別表示するのはどうでしょう?
<ul id="tab">
<li class="present"><a href="#page1" class="page1">Page_1</a></li>
<li><a href="#page2" class="page2">Page_2</a></li>
<li><a href="#page3" class="page3">Page_3</a></li>
</ul>
#tab li a {text-indent:-9999px;border-color:#333;background-repeat:no-repeat;}
#tab li a.page1 {background-image:url(page1画像);}
#tab li a.page2 {background-image:url(page2画像);}
#tab li a.page3 {background-image:url(page3画像);}
#tab li a:hover,
#tab li.present a {background-image:url(変更画像);}
naokitaさん。回答ありがとうございます。
できました!!!
本当に嬉しいです。
無理かと思ってあきらめていましたが出来ました。
本当にありがとうございました。
No.4
- 回答日時:
No.1です。
確認ですが、リンク先は他のページですか?それともページ内ですか?リンクの擬似クラスと、動的な擬似クラスを使う方法
a:link{background-image:url([画像1];)
a:visited{background-image:url([画像2]);}
a:hover,a:focus{background-image:url([画像3];)
a:active{background-image:url([画像4]);}
の順番で記述する。
他のページの場合は、簡単でナビゲーションリンクをブロックにしてfloatで並べる。その際、class名などでカレントなリンクの背景を変えればよい。
<div class="nav">
<ol>
<li><a href=""></a></li>
<li><a href="" class="current"></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ol>
</div>
よく使われる定番CSS
div.nav ol,div.nav ol li{display:block;list-style:none;margin:0;padding:0;}
div.nav ol li{width:20%;float:left;margin-right:10px;line-height:20px;}
div.nav ol li a:link{
display:block;width:100%;height:100%;
border:solid 1px black;border-bottom-width:0;text-decoration:none;
background-image:url();
}
div.nav ol li a:visited{}
div.nav a:hover,a:focus{background-image:url([画像3];)
div.nav a:active{background-image:url([画像4]);}
同一ページ内へのリンクの場合は、
それより前のブロックをfixedなどで上にかぶせて、しまえばよいでしょう。
ORUKA1951さん。
またまた回答していただいてありがとうございます。
リンク先は使用しているJavaScriptのパネル内(同ページ内)です。
画像はANo.3さんの方法で切り替える事ができました。
パンクズの件は場所を移動してパネルの中で変えることにします。
回答していただいて本当にありがとうございました。
No.2
- 回答日時:
※ 現在の記述だとブラウザによって崩れないのかなぁ?・・・
まあ、置いといて、
とりあえず、現在のソースを一旦捨てて、
タグを切り替えるJavaScriptのサンプルで記述すると、
現在のHTMLは画像なのでテキストとして、
CSSで画像を表示するように変更すると、CSS側の画像が表示されます。
<!-- HTMLで画像を利用しない -->
<ul id="tab">
<li class="present"><a href="#page1">Page_1</a></li>
<li><a href="#page2">Page_2</a></li>
~~~省略
/* CSSを変更する */
#tab li a:hover,
#tab li.present a {
border-color: #333;
color: #000;
}
↑この部分を削除し ↓以下に変更
#tab li a {text-indent:-9999px;border-color: #333;
background:url(該当項目以外の通常表示画像.gif) no-repeat;}
#tab li a:hover,
#tab li.present a {background:url(該当項目の変更画像.gif);}
後は、no-repeatなのか?とか、floatやinline,marginの問題とか、
画像に見合ったliやa枠のCSSを画像用に調整しましょう。
naokitaさんいつも回答ありがとうございます。
返事が遅くなってしまって本当にすみませんでした。
webは独学なのでいつも勉強させていただいています。
私の説明不足でしたが、画像はメニューのそれぞれ3枚、別の画像を使用しています。
当初、これを考えていて
#tab li.present a {background:url(該当項目の変更画像.gif);}
この部分を
#tab li.present a {background-position:0 -20px;}
このようにしてマウスオーバーで切り替えようと思ったのですが、元の画像が3枚とも別の画像なのでどうにもならず困っていました。
始めに3枚別の画像を使用すると説明してなくてすみませんでした。
タグのJSを使用していなかったらページ毎のcssを使うことで解消できたのですが、同ページ内なので全くできません。
もう少し考えてみて無理そうなら、JSの使用をやめてページ毎に分けて制作してみます。
回答していただいてありがとうございました。
No.1
- 回答日時:
ロールオーバーはスタイルシートで行えばよい。
まあ、javascriptを一切使わずにでも行えますので、そのほうが良いかもしれませんね。
<div id="section1">
<h2>SECTION1</h2>
<p>段落</p>
<p>段落</p>
<div class="nav">
<ul>
<li><a href="#section1" class="Now"><span>section</span></a></li>
<li><a href="#section2"><span>section2</span></a></li>
<li><a href="#section3"><span>section3</span></a></li>
</ul>
</div>
</div>
<div id="section2">
<h2>SECTION2</h2>
<p>段落</p>
<p>段落</p>
<div class="nav">
<ul>
<li><a href="#section1"><span>section</span></a></li>
<li><a href="#section2" class="Now"><span>section2</span></a></li>
<li><a href="#section3"><span>section3</span></a></li>
</ul>
</div>
</div>
・・かな?
この回答への補足
すみませんでした。自分の記述ミスでした。
メニューが2つ出てしまう現象は回避されました。
ORUKA1951さんの言う通り各セクション毎に "nav" を囲み、画像を_off_onで切り替えるJavaScriptで、画像を切り替えることができました。
(※メニューの上に置きたかったパンクズもこれで置く事ができます)
しかし、各セクションの中に入れる事によってか、1度クリックするとクリックが効かなくなり他のページへ移動できません。
画像を外して
<span>section</span>
<span>section2</span>
<span>section3</span>
とフォントで表現しても同じでした。
ここからはJavaScriptの問題になってくるのでしょうか?
それともcssで解決できるのでしょうか。
もう少しがんばってみます。
回答ありがとうございました。
ORUKA1951さんいつも回答していただきありがとうございます。
返事が遅くなってしまって本当にすみませんでした。
試してみたのですが、メニューのnavが2つとも出てきてしまい、うまくいきませんでした。
でもORUKA1951さんの言う通りロールオーバーはcssでやった方がいいですね。
1つのことに捕われすぎていました。
回答していただいてありがとうございます。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- HTML・CSS htmltとcssの連携をして画像縮小について 1 2022/11/15 20:32
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
- HTML・CSS FC2カートのテンプレートでの商品表示について 1 2023/03/02 18:05
- Perl RSSにdiv,ul classを付けたいのですがどのようにつけるのかわからないです 2 2022/03/28 01:53
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
複数行にまたがる括弧を表示し...
-
divタグ内のコンテンツが重なっ...
-
ol要素の番号とリスト項目の離...
-
HTMLで組織図を作成する方法
-
リストマーカーをボックス内に...
-
HTMLのdlとul どちらが正しいと...
-
<table>の高さ固定。情報増加時...
-
navの横並びにsnsアイコンを付...
-
ulタグやliタグの中でbrタグ...
-
アコーディオンメニューがかく...
-
「olタグ」内に「hタグ要素」...
-
左メニューをCSSで固定したい
-
<ul><li></li></ul>にするメリ...
-
HTML5のfooterに見出しを付けて...
-
CSS質問:大手サイトを見ると何...
-
レスポンシブWebデザインでリン...
-
横並びのリストで左端がはみ出る
-
li 長さ指定
-
ページを開いているときのリン...
-
3番目のBoxだけずれる
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
リストマーカーをボックス内に...
-
<table>の高さ固定。情報増加時...
-
ulタグやliタグの中でbrタグ...
-
html/cssの、navを2段にする...
-
リストの数字のフォントサイズ...
-
liタグの中に<p>タグやら<dl>を...
-
CSSでつくったメニューのアニメ...
-
htmlの<ol>タグで、数字などを...
-
ページを開いているときのリン...
-
リンク文字同士の間隔を開ける...
-
レスポンシブWebデザインでリン...
-
<ul><li></li></ul>にするメリ...
-
divタグ内のコンテンツが重なっ...
-
HTMLで組織図を作成する方法
-
ulとliで囲った文字の一部を変...
-
HTML5のfooterに見出しを付けて...
-
<ul>~</ul>が二つ続くと間に改...
-
html <ul></ul>の並びで一行空...
-
複数行にまたがる括弧を表示し...
-
画像にリンクを張ると画像がず...
おすすめ情報