- ベストアンサー
オンマウスで画像と説明文を表示する方法
画像ではなく文字のリンク先にオンマウスで画像と説明文を 表示したいと思っておりますが、タグが分からず困っておりますので教えていただければ光栄です。宜しくお願いいたします。
- zekusu
- お礼率64% (122/190)
- JavaScript
- 回答数3
- ありがとう数5
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
<html> <body> <img src="" id="a1"><hr> <div id="a2"></div><hr> <a href="#" onMouseOver="chg('img0.jpg','なんと、もうしましょうか')">aaaa</a> <a href="#" onMouseOver="chg('img1.jpg','あぁ～入院かぁ～')">bbbb</a> <a href="#" onMouseOver="chg('img2.jpg','気が重いなぁ～')">cccc</a> <script> function chg(i,m){ document.getElementById('a1').src=i; document.getElementById('a2').innerHTML=m; } </script> </body> </html>
その他の回答 (2)
- taaaaaaa
- ベストアンサー率38% (31/80)
CSSのみのツールチップを使っています。 動作も軽いし、設置も楽ですよ。
お礼
ありがとう御座います。 工夫で素人でも複雑なＨＰが作れることが分かりました。 いろいろ勉強させていただきます。今後も宜しくお願いします。
- steel_gray
- ベストアンサー率66% (1052/1578)
マウスの位置に説明(テキストでも画像でも)を表示するサンプル。 <html> <head> <title></title> <style type="text/css"> #description div{ position:absolute; border:dashed thin black; padding:0.1em 0.2em; background-color:white; } </style> <script type="text/javascript"> document.onmouseover=function(e){ if(! e) e=window.event; var s = e.srcElement||e.target; var m=document.getElementById('description').getElementsByTagName('div'); for(var i=0;m[i];i++){ if(s.nodeName=='A' && m[i].title == s.href){ m[i].style.display = ''; m[i].style.left = (e.clientX+5)+'px'; m[i].style.top = (e.clientY+5)+'px'; } else m[i].style.display = 'none'; } } </script> </head> <body> <p> 質問サイトの<a href="http://oshiete.goo.ne.jp/">教えてgoo</a> は<a href="http://okwave.jp/">OKWave</a> のプラットフォームを利用しています。 </p> <div id="description"> <div style="display:none" title="http://oshiete.goo.ne.jp/"> <img src="http://cmm001.goo.ne.jp/img/sn/sn_50.gif"><br> <em>教えてgooの説明文</em> </div> <div style="display:none" title="http://okwave.jp/"> <img src="http://okwave.jp/images/logo_top.gif"><br> <em>OKWaveの説明文</em> </div> </body> </html>
お礼
ご丁寧な対応、誠にありがとう御座います。 今後とも何卒よろしくお願いいたします。
関連するQ&A
- オンマウス時に出てくる説明文の文字を変えたい
画像やリンクの上にマウスカーソルを持って行ってオンマウス状態になった時 説明文を表示させることが可能ですよね。 <A HREF=></A>の構文のなかで リンクの場合 title= 画像の場合 title= 又は alt= を使って簡単に表示出来るのは良いのですが、この際に、 表示される説明文の文字は、フォント変更出来ないのでしょうか？ フォント変更が無理なら ただ単に、文字サイズのみ、細字／太字のみ でも変えられると嬉しいのですが。 よろしくお願いいたします。
- ベストアンサー
- HTML
- オンマウスの説明文が表示されません
オンマウスしても説明文が表示されなくなりました。 数日前までは問題なく表示されていたのですけれど・・・ 最初に気付いたのは、ドリコムRSSのブログリストです。 オンマウスすると、日時と記事タイトルが表示されるはずなんですが 何も出なくなったので、おかしいと思い他のサイトで色々試しましたが やっぱりどこで試しても表示されないようなんです。 どこかおかしい設定をしてしまったんでしょうか？ 自分のPCに保存してある画像ファイルなどの詳細表示もできなくなっていましたが そちらの方はフォルダオプションをいじって解決しました。 インターネット上のポップアップ表示だけが表示されないようです。 どうすれば以前のように表示されるようになりますか？
- ベストアンサー
- Windows XP
- オンマウスで出た説明文の色を変えたい
オンマウスで出た説明文の文字色を変える事は可能なのでしょうか？ <a href="サンプル.html"title="オンマウスで説明">タイトル</a> 今こんな感じです。 どこに何をいれればいいのか教えてください。
- ベストアンサー
- HTML
- テキストにオンマウスで指定箇所に画像を表示
画像またはテキストリンクにオンマウスすると指定の場所にそれぞれのリンクで 指定の画像を表示するようにしたいのですが、色々調べてみたもののよくわかりませんでした。 リンク１にオンマウスして画像が出て、そのリンク１からマウスを放しても 別所に表示された画像はそのままで、次のリンク２にオンマウスすると 次の画像と入れ替わる、というようにしたいのですが・・・説明が下手ですみません＾＾； このようにしたい場合、どのようにしたらいいでしょうか。
- ベストアンサー
- JavaScript
- オンマウスで画像変更、クリックでリンク先に飛ばしたいのです。
オンマウスで画像変更、クリックでリンク先に飛ばしたいのです。 右側にメニューボタン（１～４）があり 各ボタンにオンマウスすると左側に画像を表示、 クリックすると別ページにリンクさせたいのです。 フレームは使っていません。 初心者なので具体的なタグを教えていただくと助かります。
- ベストアンサー
- ホームページ作成ソフト
- 画像のリンクタグで、オンマウスしても色を変えないようにしたい
画像のリンクを作ったのですが、オンマウスすると、リンクの部分の色が変わってしまいます。 オンマウスしても、リンクの部分の色が変わらないタグはどう書けばいいでしょうか
- ベストアンサー
- HTML
- オンマウスで説明文
こんにちは。 今HPを作っているのですが、 リンクの貼られた文字にマウスポインタを合わせると、説明文が表示されるようにしたいのです。 ご存知の方いらっしゃいましたら、ご指導よろしくお願い致します。
- ベストアンサー
- ホームページ作成ソフト
- オンマウスすると、画像と説明が表示される
<img src="" alt="ＡＡＡ"> という画像にポインタを合わせると、 「ＡＡＡ」という文字が現れますが、こういう感じで文字にポインタを合わせたら、 そこに画像と説明文を表示したいと思っています。 具体的には <a href="">Ａさんブログ</a> この「Ａさんブログ」の部分にポインタを合わせると、クリックする前に大まかなＡさんブログの画像と 説明文が表示される・・・という感じです。 わかりにくくて申し訳ありませんが、よろしくお願いします。
- ベストアンサー
- その他（プログラミング・開発）
- オンマウスで画像表示＋表示した画像にリンク
オンマウスで画像表示＋表示した画像にリンク はじめまして。 今サイトを作っています。 ↓このサイトの中央部分に大きな画像とその上に タブが並んでいるのがお分かりになりますでしょうか？（参考サイト） http://www.rakuten.ne.jp/gold/han-world/ タブにふれると大きな画像が変わり、なおかつ大きな画像にもリンクが貼られるというものです。 こういうものとジャバスクリプトで同じ風にしたいです。 （参考サイトはフラッシュで作成されています） タブに触れると大きな画像が変わり、タブにリンクを貼ることはできたのですが 大きな画像にリンクさせるほうほうがよくわかりませんでした。 どこかのタグ素材サイトさんのソースをいじってなんとか触れるようなジャバの超初心者です。 どうぞお力をお貸しください 宜しくお願いいたします！
- ベストアンサー
- JavaScript
- オンマウスで出てる説明文を非表示にしたい
IE6を使用しているのですが、オンマウスでテキストボックスのような枠に入った説明文が出てることがあります。 例えばツールバーのボタンも、今はボタン名を表示していないようにしているのですが、 ここにマウスカーソルを乗せるとそのボタン名が出てきます。 ページ本文でもタイトルやアイコンにカーソルを乗せるとその説明やタイトルが出てきたりします。 おそらく製作された方の親切心からだと思うのですが、時々閲覧に邪魔な事があります。 これを一時的に非表示にする方法はあるのでしょうか？
- 締切済み
- Windows XP
お礼
早々、ありがとう御座います。 勉強になりました。またよろしくお願いいたします。