CSS マウスオーバーでテキストの上に画像を表示させるには？

CSS で hover を使い、マウスオーバーするとリンクのテキストの上に画像を持ってくる（テキストが見えない状態にする）方法というのはありますか？
background-image を使うとテキストが見えてしまいます・・

マウスオーバーで　画像１→画像２　と表示させる方法はこちらの他の回答で見つけたのですが、テキスト→画像　と表示させる方法は見つかりませんでした。
よろしくお願いいたします。

No.3 ベストアンサー 回答者： partita 回答日時： 2005/12/21 20:31

それ、私が答えたやつですね。

a {
display:block;
font-size:12px;
width:100px;
height:20px;
background:url(aaa.gif);
}
a:hover {
background:url(bbb.gif);
text-indent:-9999px;
}

hoverのとき、テキストが画面外に飛んで、bbb.gifに変わります。リンクは残っているから大丈夫です。
ちなみに、heightとwidthはテキストまたは画像サイズに合わせてください。
ただし、テキスト量と画像サイズに差があるときには使えないかも・・・。

No.4 回答者： partita 回答日時： 2005/12/21 20:40

＃３修正

background:url(aaa.gif);をはずしてください

No.2 回答者： Chronos198 回答日時： 2005/12/21 14:00

CSSだとちと分からないですが、JavaScriptでしたら。

<span id="id_txt" style="display:inline;" onMouseOver="txt2img()">テキスト文字</span>
<img src="hoge.png" id="id_img" style="display:none;" onMouseOut="img2txt()">
<br>

<script language="JavaScript">
function txt2img()
{
id_img.style.display="inline";
id_txt.style.display="none";
}
function img2txt()
{
id_img.style.display="none";
id_txt.style.display="inline";
}
</script>

やることはシンプルで、
テキスト文字へのonMouseOver()でテキストのdisplayをnoneに、画像のdisplayをinlineに、
画像へのonMouseOut()でテキストのdisplayをinlineに、画像のdisplayをnoneに、それぞれ切り替えています。

No.1 回答者： ron3 回答日時： 2005/12/21 12:55

回答じゃなくてすみません。

すみません、
画像１→画像２　を「CSS」でやるという回答の質問No
教えていただけませんか？

この回答への補足

当方は試していませんが、こちらですね。
http://okwave.jp/kotaeru.php3?q=1781726

補足日時：2005/12/21 13:10