- ベストアンサー
マウスオーバーで文字にアンダーライン＋ポップアップ表示
マウス通過時に、文字がピンク色に変わり、その文字にアンダーラインが引かれ、その文字の下にポップアップ表示で解説を入れたいのです。ポップアップ表示が文字の真下にきて、表示される文字サイズを調整する方法を教えて下さい。今作ろうとしてるのは、He plays tennis.という英文の意味を表示するというものです。 あと、文字数が多くなった時、簡潔にプログラムを書く方法があれば教えてほしいのですが・・。よろしくお願い致します
- nishi007
- お礼率100% (2/2)
- JavaScript
- 回答数2
- ありがとう数3
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
ポップアップを表示する事が補助ではなく目的ならばテンポの遅れは気になりますね。（titleのポップアップが微妙に遅れるのはブラウザ側の気遣いだと思います。） これはブラウザまかせの事なので仕方ない(Javascriptでポップアップするしかない)ことかと。 以下、少しでも簡潔になるようにしてみました。 <html> <head> <title></title> <style type="text/css"> span { /* テキストの修飾 */ font-weight:bold; /* 文字の太さ */ font-size:150%; /* 文字の大きさ */ } #tips { /* ポップアップの修飾 */ position:absolute; display:none; font-weight:bold; /* 文字の太さ */ font-size:150%; /* 文字の大きさ */ border:1px solid #00FF40;/* Tip表示するボーダーの太さと色：緑 */ padding:1px; /* Tip表示する枠の詰め込み具合 */ background-color:#FF0000; /* Tip表示する文字背景：赤 */ } span.textHover { /* マウスオーバーした時のテキストの修飾 */ color:#ff1493; text-decoration:underline; } </style> <script type="text/javascript"> function showTips(O) { O.className='textHover'; Tips = document.getElementById('tips'); Tips.style.display='block'; Tips.style.top = (O.offsetTop+30)+'px';// '30' この数値で位置を調整(縦) Tips.style.left = (O.offsetLeft+16)+'px';// '16' この数値で位置を調整(横) Tips.appendChild(document.createTextNode(O.title)); O.title = ''; } function hideTips(O) { O.className=''; Tips = document.getElementById('tips'); Tips.style.display=''; O.title = Tips.firstChild.nodeValue; Tips.removeChild(Tips.firstChild); } window.onload = function() { var allSpan = document.getElementsByTagName('span'); for(var i=0;i<allSpan.length;i++){ var O = allSpan[i]; if(O.title != '') { O.onmouseover = function(){showTips(this)}; O.onmouseout = function(){hideTips(this)}; } } Tips = document.createElement('div'); Tips.id="tips"; document.body.appendChild(Tips,document.body.firstChild); } </script> </head> <body> <p> <span title="彼は">He</span> <span title="する">plays</span> <span title="テニスを">tennis</span> <span title="毎日。">everyday.</span> </p> </body> </html>
その他の回答 (1)
- steel_gray
- ベストアンサー率66% (1052/1578)
質問の答えとは若干ずれますが。 > マウス通過時に、文字がピンク色に変わり、その文字にアンダーラインが引かれ CSSでhoverの設定をするだけです。 ただし、最近のブラウザの中ではIEだけがhoverをリンクにしか設定できないのでJavascriptを使う必要があります。 > その文字の下にポップアップ表示で解説を入れたいのです。 Javascriptでやる方法もありますが多くのブラウザではtitle属性を付けておけばブラウザがポップアップしてくれます。表示位置などブラウザまかせになってしまいますが、元々機能としてあるのに似たようなものをJavascriptで作るのも無駄な気がします。 以上を踏まえて下記は「自分がやるなら」のサンプル。参考までに。 今の状態を希望通りに改造したいのであれば、まずは現状がどのようななっているか、HTMLやjavascriptを補足で書いておけば回答しやすくなると思います。 <html> <head> <title></title> <style type="text/css"> .textNormal { color:#009; } .textNormal:hover { color:pink; text-decoration:underline; } .textHover { color:pink; text-decoration:underline; } </style> <!--[if IE]> <script type="text/javascript"> window.onload = function() { var allSpan = document.getElementsByTagName('span'); for(var i=0;i<allSpan.length;i++){ var O = allSpan[i]; if(O.className.match('textNormal')) { O.onmouseover = function(){this.className = this.className.replace('textNormal','textHover')}; O.onmouseout = function(){this.className = this.className.replace('textHover','textNormal')}; } } } </script> <![endif]--> </head> <body> <p>ＸＸＸ<span title="He plays tennis." class="textNormal">彼はテニスをします。</span>ＸＸＸ</p> <p>ＸＸＸ<span title="she also plays tennis." class="textNormal">彼女もテニスをします。</span>ＸＸＸ</p> </body> </html>
お礼
すばやい回答ありがとうございます。 とても参考になりました。 ただ、title属性ではワンテンポ遅れて表示されるのが気になります。 何か参考意見があれば、お教えいただきたい。
関連するQ&A
- マウスオーバーでポップアップ画像を出したい
サーチして沢山のサイトを見たのですが、どーーーーーーーしてもわからないので質問させてください。 サイトにある画像Aにマウスオーバーすると画像Bというのがポップアップで表示されるようにしたいのです。 どうやらjavascriptの方法とCSSの方法があるような感じなのですが、どーーーーーーーしてもわからないのです。。。 具体的にJavascriptでこう書いて入れてhtmlでこう書くんだよ、 とか CSSにこれを追加してhtmlにはこう書くんだよ とわかりやすく教えていただけると助かります。 どうぞよろしくお願いいたします。
- 締切済み
- HTML
- マウスカーソルについてくるポップアップを消したい
ブラウジングの際、マウスカーソルの動きを止めると前にクリックしたリンク先のタイトルや内容がポップアップされ困っています。 カーソルのすぐ下に、白い背景に黒字で表示されます。 動かすと消えますが、ポップアップで関係のない長いタイトルや文章がたびたび表示されてストレスです。 また、サイトにタグで組み込まれているポップアップを表示することもできず、ずっと同じ内容が出てきます。 関係ないポップアップの表示は表示させず、サイトに組み込まれているポップアップのみを表示するようにしたいです。 ブラウザはFireFox 3.0.11を使用しています。 解決方法をご存じの方、よろしくお願いします。
- 締切済み
- ブラウザ
- 画像中のある座標でマウスオーバー時にポップアップテキスト
画像の中の任意座標にマウスをもっていった時に、マウスより少し上の位置に説明文等のテキストをポップアップ表示させ、マウスアウトでポップアップ表示を消すのに何か良い方法はありませんか？ 画像はテーブルで分割していない一枚のイメージで”画像の中のある場所”はランダムです。 表示イメージはこんな感じ ●：画像中の任意の座標 -------------------------------- ｜ ● ｜ ｜ ココに説明文をポップアップ表示 ｜ ●＜-（マウス） ｜ ｜ ● ｜ ｜ ● ｜ --------------------------------
- ベストアンサー
- JavaScript
- マウスカーソルを乗せるとポップアップする方法？
メールで、件名のところにカーソルをのせると 件名がポップアップするのと、しないのがありのですが、 どういう方法なのでしょうか？ 又、ホームページで、画像部分にカーソルをあてると、 ファイル名かなにか文字がポップアップするのですが、 これも方法はあるのでしょうか？ よろしくお願いします。
- ベストアンサー
- その他（メールサービス・ソフト）
- ポップアップ表示を消したい
Windows7です。 タスクバーに表示されるボタンにカーソルをあてると、画像のようにポップアップが 表示されます。 この表示を消す方法はありますでしょうか？ いろいろと調べてみましたが、どれを試しても消えません。 （Aeroは無効にしているはずなんですが） よろしくお願いします。
- ベストアンサー
- Windows 7
- gooブログ 文字下にアンダーライン
今、ブログで新しい記事を書いたのですが、その時FONTでサイズにしたら文字の下にアンダーラインが入りました。 そのほかのところではFONTを使って書いてもアンダーラインはでませんでしたが何故か一番最後のところだけ出ます。 ランキングもやっているのでいちいちリンク等貼るのが面倒なので他記事からコピーして貼ってますがソレにもアンダーラインがついていました。他記事にはついてないのに.... 何か間違えて文字でも入れて知らない間にアンダーラインが入るようにしてしまったかと思い見比べましたが同じでした。 アンダーラインを消す方法ってありますか？ それともあきらめるしかないですか？ 教えてくださいお願いしますm(__)m
- ベストアンサー
- ブログ
- 【Windows 7】ポップアップを非表示にしたい
【Windows 7】ポップアップを非表示にしたい OS：Windows 7 Pro 32bit タスクバー上のプログラムにポインターを乗せると表示される「ポップアップのようなもの（※画像の赤い四角）」を非表示にしたいのですが可能でしょうか？ 下部スライドバーを操作する時など、とても邪魔になっています。
- ベストアンサー
- Windows 7
- ポップアップによるメッセージ表示
毎日特定の時間になったら自作のメッセージ(確認事項など)が ポップアップで表示される方法はないでしょうか？ 実はmacで作業をしていると他の用事を忘れてしまうことが多く、 ポップアップで表示(警告)できたらと思いました。 先程フリーソフトを探しましたが、何時何分表示という時刻指定のものが無く 「×分後に表示」のものしか見つかりませんでした。 フリーソフトに無ければAutomator、AppleScriptでの実行方法を教えていただけましたら光栄です。 (使用時だけ表示されたら良いので、スリープとシャットダウン状態は考慮されなくて構いません) OSは10.4.9です。よろしくお願い致します。
- ベストアンサー
- Mac
- ポップアップ ブロックできない
winxp he sp2, ie6 ie6で、ポップアップ ブロック設定済み：http://www.dukascopy.com/ フイルターレベル：中 q: http://chartpark.com/ を開くと、ポップアップ ブロックを設定しているにも拘らず、ポップアップします。 ie6の設定で解決する方法ありませんか。
- ベストアンサー
- ブラウザ
お礼
steel_grayさんの献身的な回答に本当に感謝申し上げます。 まさに私のやりたかったことが、記述されていました。 簡潔に記述する方法を教えて下さり、今とても感激しています。 一旦これで締め切りたいと思います。