困っています！！

質問

ロールオーバー画像の上にテキストを表示させたいのですが，どうしたらよいかわかりません。
どなたか教えていただけないでしょうか。
スタイルシートでも構いません。
（例）下記の場合どうしたらよいのでしょうか

OFFの時の画像：A.jpg
ONの時の画像：B.jpg
テキスト：”テスト”
<div id="test">
<a href="index.html"><img src="A.jpg" border="0"onMouseover="this.src='B.jpg'"onMouseout="this.src='A.jpg'" alt="テスト"></a>
</div>

回答No.1

karigome · ベストアンサー

Aタグに限定するなら、以下のように指定することで、CSSのみで対応可能です。

<style>
a#test2 { width:24px; height:24px; background-image:url(A.gif) }
a#test2:hover { width:24px; height:24px; background-image:url(B.gif) }
</style>
<a href="" id="test2">test</a>

Aタグ以外にも対応したいということであれば、JavaScriptを利用して、以下のように対応可能です。

<script>
function setBackground(target, strUrl) {
target.style.backgroundImage = "url(" + strUrl + ")";
}
</script>
<div id="test"
onMouseOver="setBackground(this, 'B.gif');"
onMouseOut ="setBackground(this, 'A.gif');"
style="width:24px; height:24px; background-image:url(A.gif);">
test
</div>

ただ、このやり方だと、サイズを直接指定しなくてはならないのが、手間といえば手間ですね。

お礼

ご回答ありがとうございます。大変助かりました。
今回はAタグのみでしたのでCSSで行いました。
わからないことがありましたら，またよろしくお願いします。

回答No.2

Hardking

これではどうでしょうか。
<SCRIPT language="JavaScript">
<!--
var imgs = new Array();
imgs[0] = new Image(); imgs[0].src = "A.jpg";
imgs[1] = new Image(); imgs[1].src = "B.jpg";
function chgimg(id, imgname) {
document.images[id].src = imgs[imgname].src;
}
//-->
</SCRIPT>

<div id="test">
<a href="index.html">
<a href="index.html"><img src="A.jpg" name="myimg" border="0"onMouseover="chgimg ('myimg','B.jpg')"onMouseout="chgimg('myimg','A.jpg')" alt="テスト"></a>
スト"></a>
</div>

お礼

ご回答ありがとうございます。
今回はCSSで行ってみました。
今まで「JavaScript」はほとんど使ったことがなかったので，これを機会に勉強してみようと思います。