firefoxではcssで画像をプリロードができません

質問

リンクの貼られた画像に触れると画像が変化させようと
以下のコードを使ってみました。
IE、Operaではできたのですがfirefoxではもともと表示されてるはずの画像も触れたときに表示される画像も表示されません。
何かやり方があるのでしょうか？

■html
<p class="xxx"><a href="#">sample</a></p>

■css
p.xxx{
background:url("img01/a_img.gif") no-repeat;
}
p.xxx a{
display:block;
width:200px;
height:50px;
background:url("img01/b_img.gif");
text-indent:-9999px;
}
p.xxx a:hover{
background:none;
}

回答No.1

CHI-512 · ベストアンサー

こんにちは。
もしかして、a_img.gifをマウスオーバーでb_img.gifに変化させたい！という質問でしょうか？
でしたら、

<p class="xxx"><a href="#"><span>sample</span></a></p>

p.xxx {
background: url("img01/a_img.gif") no-repeat;
}
p.xxx a {
display: block;
width: 200px;
height: 50px;
}
p.xxx a:hover,
p.xxx a:active {
background: url("img01/b_img.gif");
}
p.xxx span {
display: none;
}

かな・・。
あとは、backgroundの属性 no-repeat や top center などを正しく指定します。
また、text-indent:-9999px;を使用しているあたりを見ると、
sampleという文字を表示させたくないのですよね？
でしたら、上記のように文字を<span>で囲み、display: none;で非表示にすれば問題ないかと。
ただ、display:none;に関しては、SEOスパムだと嫌う方も多いので好き好きです。
参考になれば、幸いです。

お礼

こんにちは。そしてありがとうございます。

教えていただいた通りに書き直したら
思ってたように出来ました。
display:none;がSEOスパムだと考えてる人もいるというのも
今回知ることができて勉強になりました。
あと、言葉足らずの部分まで理解していただき感謝です。