1枚画像でリンクposition指定。現在のページ表示するには？

質問

いつもおせわになります。
cssで横並びのリンクバーがmap、予約、menuとかあり、
(1)デフォルト(2)カーソルを合わせた時(3)現在のページはココですよ、
の状態を1枚の画像で作り、positionで各ごとの表示ができるよう、下記のように指定をしました。
htmlの方のテキストリンクは表示してません。

デフォルト時の画像と、オンマウスの表示はIE・operaともに可能なのですが
肝心の、(3)のクリックした時（それ以降もずっとそのままで希望）。
がきちんと表示されません。
厳密には・・
IE→一瞬中途半端に表示されるが、次のクリックをすると消える。
opera、firefox→クリックした瞬間のみ一瞬表示。

疑似クラスが
"link", "visited", "hover", "active" などあると思いますが
（記載方法に順番があることは知っています）
もしかしてもしかして・・・・・・・
クリックした現在のページの表示指定は、"active" ではないのでしょうか。
"active"はクリックした瞬間？だけ？それ以降もずっとそのままでいてよ～～
と思うのですがそんな設定はないのでしょうか。
"visited"だと、全部のリンクに訪問すると、全部変化してしまうわけですよね？
いまちょっとやってみましたが、思ったものではないですし・・

自分なりに調べて、楽チンな気もして、
cssで1枚画像でリンク、というのををやってみたかたったのですが
むしろ逆に面倒なことになってしまいました・・・・
これでだめだったら、普通にオンマウスオーバーとかで行うので
なぜ表示できないのか、解決方法があるのか知りたいです・・・

長くなって恐縮です。navbar部分のみですが下記に記述しますので
もしよかったら、ご覧いただけますか？
どなたか、改善方法、アドバイスなどありましたらご教授ください！！

----------------------------------------------------------------------------------------------
◆html◆
----------------------------------------------------------------------------------------------
<ul id="navbar">
<li><a href="#"class="map"><span>地図</span></a></li>
<li><a href="#" class="res"><span>ご予約・貸切</span></a></li>
<li><a href="#" class="manu"><span>メニュー＆料金</span></a></li>
<li><a href="#" class="about"><span>○○について</span></a></li>
</ul></div>
----------------------------------------------------------------------------------------------
◆CSS◆
----------------------------------------------------------------------------------------------
ul#navbar {
position:absolute; /* ▼ここでコンテナの枠起点左からを起点に指定 ▼ */
top: 100px;
left: 300px;
padding: 0px;
　　　width: 476px;
　　　height:50px;
}
ul#navbar li{
　　　　float:left;
　　　　width:119px;
}
ul#navbar a{
display:block;
width:119px;
height:50px;
background-image:url(bar_all.gif);
background-repeat: no-repeat;

}
ul#navbar li a span{
　　　　　display: none;
}

/* デフォルト
-------------------------------------------*/
a.map{
background-position: 0px 0px;/
}

a.res{
background-position: -119px 0px;
}
a.manu{
background-position: -238px 0px;
}
a.about{
background-position: -357px 0px;
}

/* オンマウス
------------------------------------------ */
a:hover.map{
background-position: 0px -50PX;
}
a:hover.res{
background-position: -119px -50px ;
}
a:hover.manu{
background-position: -238px -50px;
}
a:hover.about{
background-position: -357px -50px;
}

/* アクティブ
-------------------------------------------*/
a:active.map{
background-position: 0px -100px;
}
a:active.res{
background-position: -119px -100px;
}
a:active.manu{
background-position: -238px -100px;
}
a:active.about{
background-position: -357px -100px;
}

回答No.2

noname#83877 · ベストアンサー

＞mapとstayの間の「.」はいるんでしょうか。
html側では複数のクラスを指定する際、半角スペースで区切ります。
cssの書き方はまた意味合いが違ってきています。
.mapはmapというクラス名が指定された要素をさします。
なので

a.map

とすると、a要素でmapというクラス名が指定された要素という意味になります。
その要領でmapとstay両方を指定したものを選びたい時は

a.map.stay

とします。こうするとa要素でmapとstayのクラス名が指定された要素という意味になります。
実質的にはa.stay.mapでも良いのですが、管理の面からa.map.stayと指定したサンプルを推奨しました。

ちなみにa.map stayとすると、a要素でmapというクラス名が指定された要素の子要素のstay要素という意味になります。
実際には存在しませんが、あえてHTMLを書いてみると

<a href="#" class="map"><stay>サンプル</stay></a>

こういう感じになります。

補足

再度の回答ありがとうございます！

すばらしい・・詳しい説明で、よく分かりました！
おかげさまで、まだすべて試してないのですが
なんとか思ったように出来そう、と思ったのですが・・・・

opera、firefoxだと大丈夫なのですが
IE（6.0）で見ると、ああ、a.map.stayの部分はa.about.stayの表示になっているのです！！（号泣）

調べたらIEに複数class指定するとバグが、と言う情報もありましたが、そんな難しいことじゃあないような気もしますので
また引き続き調査してみます。
まだ完成では無いのですが、せっかく2回も投稿してくださったので、取り急ぎ補足いたしました！

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

回答No.1

noname#83877

:activeで指定するのはクリックした時のスタイルだけです。
私なら適当なclassを追加して現在地用のスタイルをあてます。

軽く読んだ程度なので間違っているかもしれませんが

a:active.map{
background-position: 0px -100px;
}

というのがページの現在位置を表すためのスタイルなら

a.map.stay {
background-position: 0px -100px;
}
a.res.stay {
background-position: -119px -100px;
}
a.manu.stay {
background-position: -238px -100px;
}
a.about.stay {
background-position: -357px -100px;
}

のような感じにしてhtmlの方はこのスタイルを適用したいボタンに、追加でclassを指定するだけです。
<a href="#"class="map stay"><span>地図</span></a>

画像を1枚でやろうとするとこういう感じになるとは思いますが、ホバー時のちらつきが無くなるので良い試みだと思いますよ。

補足

早速の回答ありがとうございます！！
回答遅くなりすいませんでした。

いただいたこちらの
<a href="#"class="map stay"><span>地図</span></a>は
htmlの中での該当ページの、ところのみに記述しますよね？
そしてcssなんですが、ここの
a.map.stay {
background-position: 0px -100px;
}
mapとstayの間の「.」はいるんでしょうか。

ちょっと試してみたのですがわたしのhtml・cssへの理解が浅く
いつも難しく考えすぎ、いろいろためしてしまい
苦戦しております・・・明日また試してみます！
a:activeはやはりクリックした時のスタイルのみというのは分かったので
よかったです。

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