メッセージチップを出す


■Q&A

■Question

コンテンツ説明のスクリプト 2003.4.7.Mon No.1634

初めまして。
質問ですがたまにHPにあるマウスカーソルを合わせると説明が出る、というもののソースを教えて下さい。
お願いします。

■Answer

Re: コンテンツ説明のスクリプト ぴろあき 2003.4.9.Wed No.1643

こないだちょうどそんな感じのスクリプトを(遊びで)作ったんで、おすそわけみたいな。まぁ「コンテンツの説明」に使う程度なら、こんなのでいいと思います。

ただ、JavaScript のような扱いの難しいものを知識もなく使おうというのは、それなりのリスクが伴います。それは「エラーが起きる」なんて狭い話じゃなくて、「あなた自身の評価」までも含まれます。その辺の覚悟を完了の上でどうぞ。


DOM版メッセージチップ

■DOM版:実行結果

カーソルを乗せるとチップを表示

別にリンクでなくても可

非対応ブラウザ・スクリプトがOFFの時の動作例title 属性への対応が必要)


■DOM版:スクリプトの概要

目標にマウスを乗せると、カーソル付近にメッセージが出ます。
セットは <span title="メッセージ">テキストや画像</span> とするだけです。いくらでもセット可能。
onmouseover="" の類いは不要で、HTMLを汚しません。また、JavaScript がOFFでも動きます。動くっていうか、普通のチップが出ます。

<span>必ず一番内側に入れます。中にタグを入れると動きません。たとえば
<span title="メッセージ"><strong>テキスト</strong></span> でなく、
<strong><span title="メッセージ">テキスト</span></strong> としてください。
例外として、<img><br> だけ入れられます。

※ちゅうい※

<span> の中に <img> を入れた場合、alt を指定すると JavaScript がOFFの時に <span>title が無視されます。
かといって <img>alt はHTMLの文法で必須属性になってるので、対処法としては <img>title 属性にも同じメッセージを入れておくくらいしかありません。(JavaScript がONの時は無視されます)

設置方法はソースをご覧ください。


■DOM版:対応ブラウザ

IE5.5以降・Netscape6以降・Opera7以降
動作します。JavaScript がオフの時は普通のチップで同じメッセージが出ます。
IE4・IE5・Opera6 など、title 属性に対応してるブラウザ
動作しませんが、チップで同じメッセージが表示されます。
それ以外
エラーは起きませんが、動作しませんし、チップも出ません。残念ながら対処方法なし。

DHTML版メッセージチップ

■DHTML版:実行結果

カーソルを乗せるとチップを表示

テーブルのセルでもOK このセルでは文字にもセットしてある

■DHTML版:スクリプトの概要

これもまた、目標にマウスを乗せるとメッセージが出るもの。
<タグ onmouseover="tipMsg(event, 'メッセージ')" onmouseout="tipMsg()"> とすれば、ほとんどのタグで有効。(ただし Netscape4 では <a> くらいでしか有効になりません)

指定が重複した場合、一番内側が優先されます。

設置方法はやはりソースの方で。


■DHTML版:対応ブラウザ

IE4以降・Netscape6以降・Opera6以降
普通に動きます。
Netscape4
<a> で、かつ href がある時のみ有効です。
それ以外
エラーもなにも起きません。
JavaScript OFF
さっきのと違い、JavaScript がOFFだといかなるブラウザでもメッセージは表示されません。

■蛇足

こういうのは基本的に「ウザい」系のスクリプトなので、こんなの使うくらいなら普通に
<a href="contents.html" title="コンテンツの説明">
でいいと思うのです。


■ このページについて

このページは、質疑応答掲示板で使用した回答の残骸です。検索エンジンに捕まったりリサイクルしたりすることもあろうので、なんとなく残してあります。広く公開しているページではありませんが、第3者の閲覧を禁止するものでもありません。
恒久的なURIは保証できないものの、よほどのことがない限り削除されることはないでしょう。心配性な人はページの保存をおすすめします。(IEは mht 形式でないと保存できないかも)