スタイルシート 画像の置き換え について

スタイルシート初心者です。
宜しくお願いします。

-----------------------------------------------
<div id="Nav">
<ul>
<li><a href="/nav1/"><img src="/nav1.gif"></a></li>
<li><a href="/nav2/"><img src="/nav2.gif"></a></li>
</ul>
</div>
-----------------------------------------------
上記、nav1.gifとnav2.gifの２枚の画像を、スタイルシートで別の２枚へ差し替えたいのですが、何か方法はありますでしょうか。

#Nav li img{ }

ではダメですよね。
何か上手い指定方法があるのでしょうか。
HTMLは変更不可です。

No.4 回答者： ORUKA1951 回答日時： 2008/12/05 01:51

この例だと、二つしかないので・・とっても・・簡単です。

よく使われる方法を
visibilityプロパティとbackground-imageで・・
上の例だと
div#Nav ul li a img {
visibility: hidden;
}
div#Nav ul li a{
background-image: url(http://cmm001.goo.ne.jp/img/sn/sn_50.gif);
}
div#Nav ul li + li a{
background-image: url(http://cmm001.goo.ne.jp/img/logo/goo.gif);
}
二つ以上だと、属性セレクタで区別できますが、IE6.0以前は対応していません。firefox,Operaは可能。
div#Nav ul li a[href=/nav1/]{
background-image: url(http://cmm001.goo.ne.jp/img/sn/sn_50.gif);
}

No.3 回答者： noname#83877 回答日時： 2008/12/04 22:31

素直にimgでやるほうがいいです。

この回答へのお礼

HTMLの変更ができればよいのですが。

ありがとうございます。

お礼日時：2008/12/04 22:53

No.2 回答者： fujillin 回答日時： 2008/12/04 22:14

差し替えるきっかけは何なんでしょうか？

マウスオン、マウスクリックなどの操作時のみの変更でよければ、imgをバックグラウンド化することで可能です。（HTML変更不可とは書いてあるけど）

もしも可能性があるならば、
「CSS　ロールオーバー」あたりで検索してください。

それ以外のきっかけで、まともに差し替えるとなると、No1様のおっしゃる通り難しいです。

この回答へのお礼

HTMLは変更不可のサイトなのですが、デザインがイマイチなので何とか変更してみたいと考えておりました。

やはり難しいようですね。

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

お礼日時：2008/12/04 22:52

No.1 回答者： yambejp 回答日時： 2008/12/04 21:53

イメージタグのsrcをいじらなくてはいけないなら、

javascriptの仕事でしょうね。
背景画像として処理するならcssでもなんとかできそうですが・・・

この回答へのお礼

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

残念ながらjavascript使用不可のサイトなので、なんとかcssで出来ないものかと悩んでおります。

何か良い方策がありましたら教えて頂けると嬉しいです。

お礼日時：2008/12/04 21:59