- ベストアンサー
onMOUTHOVERで画像に説明文(５０文字くらい）を表示させるには？
onMOUTHOVERでtable内の画像(７枚）にそれぞれ説明文(約５０文字）を表示したいのですが、ソースの書き方が分かりません。よろしくご教授お願いいたします。
- barrios
- お礼率75% (6/8)
- JavaScript
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
いろいろ方法はあると思いますが，下のように表の中にあらかじめ説明文を書いておいて，onmouseoverされたら表示するのはいかがでしょう。下の例では<img>と<div>の重ね合わせの順番(style.zIndex)を変えるようにしてます。(style.visibilityを"visible"，"hidden"と変えるようにしてもいいですね。) <html> <head> <style><!-- table.photos td { position: relative; } table.photos img { z-index: 3; position: relative; } table.photos div { z-index: 2; position: absolute; bottom: 4px; left: 4px; color: white; filter: DropShadow(color=black,offX=1,offY=1); } --></style> <script type="text/javascript"><!-- function show(e) { e.style.zIndex = "1"; } function hyde(e) { e.style.zIndex = "3"; } //--> </script> </head> <body> <table class="photos"> <tr> <td><img src="image1.jpg" onmouseover="show(this)" onmouseout="hyde(this)" /> <div>image1の説明</div></td> <td><img src="image2.jpg" onmouseover="show(this)" onmouseout="hyde(this)" /> <div>image2の説明</div></td> <td><img src="image3.jpg" onmouseover="show(this)" onmouseout="hyde(this)" /> <div>image3の説明</div></td> </tr> </table> </body> </html>
その他の回答 (1)
- steel_gray
- ベストアンサー率66% (1052/1578)
説明文(約５０文字）はどこに表示されることを希望していますか？
補足
有難うございます。 画像が一番右に縦一列でありますのでそれぞれその左に出るような形にしたいのですが小窓を開くようなタイプでもいいのですが
お礼
有難うございます。 知人のHPなので今すぐは確かめられません。 実際にソースを書いてみないと分かりませんが 上手くいきそうな気がします。 丁寧な解説有難うございます。 助かりました。