ロールオーバーの上にテキストを表示するには？

質問

JavaScriptでロールオーバーを設置したのですが、その画像の上にテキストで説明を表示するにはどうしたらよいのか教えていただけるでしょうか。（テキストはマウスと関係なく常時表示）

よろしくお願いします。

回答No.4

Seravy

<a href="index.html"><img src="image/home.jpg" border="0"onMouseover="this.src='image/home-ro.jpg'"onMouseout="this.src='image/home.jpg'" alt="Home"></a>

画像タグに文字を表示させようとなさっているので不可能なのです。
最初に私が書いたソースのように、

<div>テキスト</div>

このような空間の背景画像として画像を指定してあげれば良いのです。
（divや箇条書き、定義など）

このHPは参考になるでしょう。
http://www.stylish-style.com/csstec/basic/l-rollover6.html

お礼

再度のご回答ありがとうございます。
ちょっと試してみます。

回答No.3

noname#39970

>画像を背景にテキストを表示したい
「画像を背景に」「テキストを」表示？
それならその文字のある場所の背景画像として指定すれば良いよ
つまりhover内では background:url("BG.jpg") のようにしておいて通常の場合はtransparentか何かにしておいたら良いと思う。

http://www.google.co.jp/search?hl=ja&lr=lang_ja&q=javascript%20%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB%E3%81%AE%E6%93%8D%E4%BD%9C

補足

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

No.2で補足しましたように、hoverをもちいての方法は行っていたのですが、画像の切り替えが少しぎこちないので、JavaScriptで行い先読みで対応しようと思いました。
しかしテキストは載せられないので困っています。
それはできないのでしょうね。

回答No.2

noname#39970

例

<img src="sample.jpg">
↓
<img src="sample.jpg" title="説明">

ただし文字数が多いと(ブラウザによって次数が違う)省略される
どうしてもというなら「ツールチップ」で探したら出てくると思う

補足

回答ありがとうございます。
私の説明不足でした。

マウスを乗せたときに説明が出るというものではなく、
ロールオーバーの画像を背景にテキストを表示したいと思っています。

当初はCSSで、a:hoverを用いて行っていました。
しかし画像の大きさのせいか、
ロールオーバーの画像切り替えが微妙にぎこちないので、
JavaScriptで行い画像の先読みをさせて解決しようと思いました。

しかしテキストを上に重ねる方法がわかりませんでした。

このような感じなのですが、よろしければご教授いただけるでしょうか。

回答No.1

Seravy

ソースがないとなんにも言えません。

もとのオブジェクトにテキストを入れておけば良いのでは。

汚い書き方ですが、、

orig = "url('abc.gif')";
over = "url('def.gif')";
としておいて、

<div style="background-image:url('abc.gif');
width=160px;
height:90px;"
onmouseover="this.style.backgroundImage=over"
onmouseout="this.style.backgroundImage=orig">
テキスト
</div>

な感じですかね。

補足

回答ありがとうございます。
ソースを載せ忘れていました。失礼しました。
下記のようなロールオーバーがあります。
この上にマウスに関係なく、通常のテキストを表示したいと思っております

<a href="index.html"><img src="image/home.jpg" border="0"onMouseover="this.src='image/home-ro.jpg'"onMouseout="this.src='image/home.jpg'" alt="Home"></a>