• ベストアンサー

onMOUTHOVERで画像に説明文(50文字くらい)を表示させるには?

onMOUTHOVERでtable内の画像(7枚)にそれぞれ説明文(約50文字)を表示したいのですが、ソースの書き方が分かりません。よろしくご教授お願いいたします。

質問者が選んだベストアンサー

  • ベストアンサー
  • grape16
  • ベストアンサー率55% (52/93)
回答No.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>

barrios
質問者

お礼

有難うございます。 知人のHPなので今すぐは確かめられません。 実際にソースを書いてみないと分かりませんが 上手くいきそうな気がします。 丁寧な解説有難うございます。 助かりました。

全文を見る
すると、全ての回答が全文表示されます。

その他の回答 (1)

  • steel_gray
  • ベストアンサー率66% (1052/1578)
回答No.1

説明文(約50文字)はどこに表示されることを希望していますか?

barrios
質問者

補足

有難うございます。 画像が一番右に縦一列でありますのでそれぞれその左に出るような形にしたいのですが小窓を開くようなタイプでもいいのですが

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • オンマウスで画像と説明文を表示する方法

    画像ではなく文字のリンク先にオンマウスで画像と説明文を 表示したいと思っておりますが、タグが分からず困っておりますので教えていただければ光栄です。宜しくお願いいたします。

  • オンマウスすると、画像と説明が表示される

    <img src="" alt="AAA"> という画像にポインタを合わせると、 「AAA」という文字が現れますが、こういう感じで文字にポインタを合わせたら、 そこに画像と説明文を表示したいと思っています。 具体的には <a href="">Aさんブログ</a> この「Aさんブログ」の部分にポインタを合わせると、クリックする前に大まかなAさんブログの画像と 説明文が表示される・・・という感じです。 わかりにくくて申し訳ありませんが、よろしくお願いします。

  • オンマウス時に出てくる説明文の文字を変えたい

    画像やリンクの上にマウスカーソルを持って行ってオンマウス状態になった時 説明文を表示させることが可能ですよね。 <A HREF=></A>の構文のなかで リンクの場合 title= 画像の場合 title= 又は alt= を使って簡単に表示出来るのは良いのですが、この際に、 表示される説明文の文字は、フォント変更出来ないのでしょうか? フォント変更が無理なら ただ単に、文字サイズのみ、細字/太字のみ でも変えられると嬉しいのですが。 よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • 画像と文字が重なって表示される。

    画像と文字が重なって表示される。 こんにちは。 今、会社でHPの更新プロジェクトにアサインされています。 ただ、HTMLは初めて扱います。 本題ですが、 【 ●ホームへ戻る 】 上記をすべてのページの右下に表示しているのですが、 ほぼすべてのページでは画像と文字が隣り合って表示されているのですが、 1つのページだけは画像と文字が重なってしまいます。 IEの"表示"→"ソース"でひらいてみても、記述内容は同じなのですが、 表示が違います。 これはどういった原因が考えられるのでしょうか。

    • ベストアンサー
    • HTML
  • オークションの説明文コーディネート?

    オークションを出品する際、説明文が凄く綺麗な方いらっしゃいますよね(カラー文字や画像付き)?あれは、どうやって作成しているのでしょうか?詳しく説明しているサイトや使用ソフト等あればご教授お願いします。

  • onclickで説明文、画像を同時に表示したい

    クリックすると、説明文(リンクを含む)、画像を同時に表示させることができるjavascriptを知りたいです。 参考になるホームページや、javascriptを教えてもらえれば嬉しいです。 よろしくお願いします。

  • 画像にカーソルを載せると文字(説明が表示される方法)

    お願いします。 リンク文字にカーソルを載せると説明が現れるのは下記のような感じでしょうが <span title="マウスのカーソルが重ねると表示される文字">ここだよ</span> これを画像表示の上にカーソルをさすと説明が現れるのはどうすればよろしいのでしょう?

  • 画像マウスオーバーで説明文を表示したい。

    ウェブ制作の納期がせまっているにも関わらず、知識不足で 技術的に対応できません。コーディング方法を教えて頂けま すでしょうか。 ------------------------------------- | | | 空間 | | | ------------------------------------- [会社概要] [English Instructor] [中国語講座] 1 2 3 1つの空間と3つの画像がある。 ページ読み込み時は「空間」に5行の企業メッセージが表示。 *背景はブルー、文字色はホワイト [会社概要]画像をマウスオーバーすると「空間」に3行の会社概要文が表示。 マウスをはずすと5行の企業メッセージに戻る。 *背景はブルー文字色はホワイト [English Instructor]画像をマウスオーバーすると「空間」に3行の英語文が表示。 マウスをはずすと5行の企業メッセージに戻る。 URL01(仮)にリンク。 *背景はブルー、文字色はホワイト [中国語講座]画像をマウスオーバーすると「空間」に3行の英語文が表示。 マウスをはずすと5行の企業メッセージに戻る。 URL02(仮)にリンク。 *背景はブルー、文字色はホワイト

  • 画像を切り替えながら、説明文をその下に表示したい

    画像を切り替えるのにJava Scriptで <body> <div align="center"> <img id="mypic" src="./jpg/1.jpeg" height="600px"><br> <input type="button" value="戻る" onclick="go_back()"> <input type="button" value="進む" onclick="go_forward()"> </div> <script> var pics_src = new Array("jpg/1.jpeg","jpg/2.jpeg","jpg/3.jpeg"); var num = 0; function go_forward(){ if (num == 2) { num = 0; } else { num ++; } document.getElementById("mypic").src=pics_src[num]; } function go_back(){ if (num == 0) { num = 2; } else { num --; } document.getElementById("mypic").src=pics_src[num]; } </script> </body> としようと思っています。 同時に、この画像の説明文(全角で20文字くらい)を画像の下、または中に表示させたいと思っています。 画像にPaintで描きこむことを考えましたが、画像数が数百あり、現実的でありません。 頭の中では1.text,2.twext,3.textというファイルを作り、その中に説明文20字程度を記入、それをhtmlで表示できればと思っていますが、どうにも進みません。 教えてください。

  • 簡単な説明表示

    よくアイコン(画像)などにカーソルを置き しばらくするとちょっとした説明が表示される物が ありますよね。画像の場合だと <IMG src="画像のURL" url="説明">でしたっけ? それを文字に置き換えてやりたいのです。 文字のところに触れると出るようにしたいのです。 例で言えば・・・ イラストサイトで「ひまわりと少年」という所に カーソルを置くと「男の子描きました」と出る。 で、その「ひまわりと少年」の部分をクリックすると そのイラストのページにいける・・・と。 こんな感じにしたいのですが出来ますか? 説明下手ですいません。ビルダーで製作しているので タグのことはまだまだ初心者ランクです(泣) それともう1つ。この説明の文は改行することは 可能でしょうか?宜しく御願いします。

    • ベストアンサー
    • HTML