タグ切り替えのJavaScriptについて

質問

タグを切り替えるJavaScriptと
http://archiva.jp/web/javascript/tab-menu.html （参考サイト）
ロールオーバーのJavaScript
http://css-happylife.com/template/14/ (参考サイト)
この２つを組み合わせようと思ったのですが、どうにもうまくいきません。

今記述しているままではロールオーバーで画像が切り替わりますが、選択しているタグが元の画像に戻ってしまいます。
詳しく説明すると、タグ切り替えのサンプルページでは、Page３を押すと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

naokita · ベストアンサー

#2です（お礼拝見済み）
各リストの画像が個別の３枚でしたね・・・見逃していました。
色々な方法がありますが、背景画像を各個別表示するのはどうでしょう？

<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

ORUKA1951

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

naokita

※ 現在の記述だとブラウザによって崩れないのかなぁ？・・・

まあ、置いといて、
とりあえず、現在のソースを一旦捨てて、
タグを切り替える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は独学なのでいつも勉強させていただいています。

私の説明不足でしたが、画像はメニューのそれぞれ３枚、別の画像を使用しています。
当初、これを考えていて
#tab li.present a {background:url(該当項目の変更画像.gif);}
この部分を
#tab li.present a {background-position:0 -20px;}
このようにしてマウスオーバーで切り替えようと思ったのですが、元の画像が３枚とも別の画像なのでどうにもならず困っていました。
始めに３枚別の画像を使用すると説明してなくてすみませんでした。

タグのJSを使用していなかったらページ毎のcssを使うことで解消できたのですが、同ページ内なので全くできません。

もう少し考えてみて無理そうなら、JSの使用をやめてページ毎に分けて制作してみます。

回答していただいてありがとうございました。

回答No.1

ORUKA1951

ロールオーバーはスタイルシートで行えばよい。
まあ、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>
・・かな?

お礼

ORUKA1951さんいつも回答していただきありがとうございます。
返事が遅くなってしまって本当にすみませんでした。

試してみたのですが、メニューのnavが２つとも出てきてしまい、うまくいきませんでした。
でもORUKA1951さんの言う通りロールオーバーはcssでやった方がいいですね。
１つのことに捕われすぎていました。

回答していただいてありがとうございます。

補足

すみませんでした。自分の記述ミスでした。
メニューが２つ出てしまう現象は回避されました。

ORUKA1951さんの言う通り各セクション毎に "nav" を囲み、画像を_off_onで切り替えるJavaScriptで、画像を切り替えることができました。
（※メニューの上に置きたかったパンクズもこれで置く事ができます）
しかし、各セクションの中に入れる事によってか、１度クリックするとクリックが効かなくなり他のページへ移動できません。

画像を外して
<span>section</span>
<span>section2</span>
<span>section3</span>
とフォントで表現しても同じでした。

ここからはJavaScriptの問題になってくるのでしょうか？
それともcssで解決できるのでしょうか。

もう少しがんばってみます。

回答ありがとうございました。