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

質問

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

-----------------------------------------------
<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

この例だと、二つしかないので・・とっても・・簡単です。よく使われる方法を
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

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

お礼

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

ありがとうございます。

回答No.2

fujillin

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

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

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

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

お礼

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

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

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

回答No.1

yambejp

イメージタグのsrcをいじらなくてはいけないなら、
javascriptの仕事でしょうね。
背景画像として処理するならcssでもなんとかできそうですが・・・

お礼

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

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

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