マウスオーバーで文字にアンダーライン＋ポップアップ表示

解決済

質問者：nishi007
質問日時：2005/09/10 15:55
回答数：2件

マウス通過時に、文字がピンク色に変わり、その文字にアンダーラインが引かれ、その文字の下にポップアップ表示で解説を入れたいのです。ポップアップ表示が文字の真下にきて、表示される文字サイズを調整する方法を教えて下さい。今作ろうとしてるのは、He plays tennis.という英文の意味を表示するというものです。
あと、文字数が多くなった時、簡潔にプログラムを書く方法があれば教えてほしいのですが・・。よろしくお願い致します

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： steel_gray
回答日時：2005/09/10 23:06

ポップアップを表示する事が補助ではなく目的ならばテンポの遅れは気になりますね。

（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>

- 0
- 件

通報する

この回答へのお礼

steel_grayさんの献身的な回答に本当に感謝申し上げます。
まさに私のやりたかったことが、記述されていました。
簡潔に記述する方法を教えて下さり、今とても感激しています。
一旦これで締め切りたいと思います。

通報する

お礼日時：2005/09/11 00:46

No.1

回答者： steel_gray
回答日時：2005/09/10 17:38

質問の答えとは若干ずれますが。

> マウス通過時に、文字がピンク色に変わり、その文字にアンダーラインが引かれ
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>

</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>