【CSS】マウスオーバー効果有りメニューで現在いる場所によって一部画像変更したい

最近ホームページを作り始めた者です。
現在メニューを画像に変更しようとこちら
http://www.iam-strangeman.com/blogs/2006/07/css_ …
を参考にメニューを作っています。このページと同じ効果は得られたのですが、
たとえば、現在TOPにいるならTOPを常にmouseover時と同じように
表示させたりするにはどうすれば良いのでしょうか。
CSSファイルを複数作ってページによってファイルを変えるようなことはしたくありません。

読み取られるページによって一部スクリプトを変更させたり、
上から良いように画像を載せたりする方法などはあるのでしょうか。
その他でも良い方法があればどうか宜しくお願いします。

No.2 回答者： Vitamin4 回答日時： 2009/04/21 00:23

私のやり方ですが、画像は一枚じゃなくボタンごとの

画像で作ってます。
Y軸だけをどのボタンも同じだけ動かせばいいからです。
(これだと-32px)
---------html----------
<div id="menu">
<ul>
<li class="IN1"><a href="#"><span>AAAA</span></a></li>
<li><a href="#" class="btn2"><span>BBBB</span></a></li>
<li><a href="#" class="btn3"><span>CCCC</span></a></li>
<li><a href="#" class="btn4"><span>DDDD</span></a></li>
<li><a href="#" class="btn5"><span>EEEE</span></a></li>
</ul>
</div>

---------css-------------
#menu ul{
list-style:none;
}

#menu li{
display:block;
float:left;
height:32px;/*ボタンの大きさ*/
width:140px;/*ボタンの大きさ*/
}

#menu a{
text-decoration:none;
color:#fff;
width:140px;/*ボタンの大きさ*/
height:32px;/*ボタンの大きさ*/
display:block;
}
#menu a:hover{
background-position:0px -32px;
}

#menu span{
display:block;
overflow:hidden;
text-indent:-5000px;
}

#menu .btn1{background:url(images/btn_01.jpg) no-repeat;}
#menu .btn2{background:url(images/btn_02.jpg) no-repeat;}
#menu .btn3{background:url(images/btn_03.jpg) no-repeat;}
#menu .btn4{background:url(images/btn_04.jpg) no-repeat;}
#menu .btn5{background:url(images/btn_05.jpg) no-repeat;}

#menu .IN1{background:url(images/btn_01.jpg) no-repeat left -32px;}
#menu .IN2{background:url(images/btn_02.jpg) no-repeat left -32px;}
#menu .IN3{background:url(images/btn_03.jpg) no-repeat left -32px;}
#menu .IN4{background:url(images/btn_04.jpg) no-repeat left -32px;}
#menu .IN5{background:url(images/btn_05.jpg) no-repeat left -32px;}

あとはhoverを固定にしたいmenuにclassのINを変えるだけ。
上記のhtmlはAAAA用で、例えばBBBBのページなら
<li><a href="#" class="btn1"><span>AAAA</span></a></li>
<li class="IN2><a href="#"><span>BBBB</span></a></li>
ってな具合に。

No.1 回答者： naokita 回答日時： 2009/04/18 12:34

1.TOPのheadに書く。

<style type="text/css">
<!--
#header li#nav01 a:link{ background: url(images/csshover.png) 0 -30px;
}
-->
</style>

-------------------------------------------------
透過メニューだっらの話だけど、
単に透過マスクを a:hover や a:link に指定する方がかなり簡単。