タグ切り替えの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;
}
お礼
yambejpさん JavaScriptで要素の幅を調べる方法を発見しました． すみませんでした．
補足
yambejpさん 回答ありがとうございます． 質問がわるくてすみません． liは完全にwindowサイズではないはずです． firefoxのadd-onのfirebugようにliの横幅をしっかりと調べられるプログラムがあれば，教えていただきたいです． プログラムは書くことはできますので，大丈夫です．