javascriptのリンク画像の上にテキストを表示

[新着] Webテンプレートを仮オープンしました



0   名前: kiwi : 2007/10/01(月) 01:06  ID:Jk2/LQDb sub-Ax
javascriptでリンク画像を設置したのですが、その上にテキストで説明を表示するにはどうしたらよいのでしょうか?

1   名前: 元帥 : 2007/10/01(月) 01:06  [URL]  ID:4f1lQZml sub-bK
> javascriptでリンク画像を設置した
先ずはこのソースを提示。

簡単なもので良いならtitle属性があります。
(簡単というか、メジャーなブラウザは文章を表示してくれます。)
http://www.tagindex.com/html_tag/attribute/title.html

2   名前: kiwi : 2007/10/01(月) 01:06  ID:Jk2/LQDb sub-Ax
回答ありがとうございます。
説明不足で失礼しました。

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

このような感じでロールオーバーを設置しています。
これを背景にテキストを上に表示したいと思っています。

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

3   名前: 元帥 : 2007/10/01(月) 01:06  [URL]  ID:KnBoGzyw sub-bK
a要素の子要素として、テキストを記述。
そのテキストのスタイル指定にて、positionをabsoluteとする。

http://www.tagindex.com/stylesheet/box/position.html
http://www.tagindex.com/stylesheet/box/top_right_bottom_left.html

一覧へ戻る