- ベストアンサー
マウスオーバーで文字にアンダーライン＋ポップアップ表示
マウス通過時に、文字がピンク色に変わり、その文字にアンダーラインが引かれ、その文字の下にポップアップ表示で解説を入れたいのです。ポップアップ表示が文字の真下にきて、表示される文字サイズを調整する方法を教えて下さい。今作ろうとしてるのは、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属性ではワンテンポ遅れて表示されるのが気になります。 何か参考意見があれば、お教えいただきたい。
お礼
steel_grayさんの献身的な回答に本当に感謝申し上げます。 まさに私のやりたかったことが、記述されていました。 簡潔に記述する方法を教えて下さり、今とても感激しています。 一旦これで締め切りたいと思います。