- ベストアンサー
マウスでポイントすると説明を表示
ＨＰを作り中なのですが、よく他のホームページなどでマウスをクリックしなくてもその場所へ持っていくだけでヘルプみたいに説明を表示できるようなページがあります。私もそれを作ってみたいのですが、私が持っている参考本には全然のっていません。もし知っている方がいらっしゃればやり方・できればサンプルなどを教えていただけたらうれしいです。簡単な感じでかまわないので教えてください。お願いします。
- JavaScript
- 回答数5
- ありがとう数6
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
いちおうJavaScriptで・・こんなの参考にして下さい。 <HTML> <HEAD> <SCRIPT><!-- function show(object) { if (document.layers && document.layers[object] != null) document.layers[object].visibility = 'visible'; else if (document.all) document.all[object].style.visibility = 'visible'; } function hide(object) { if (document.layers && document.layers[object] != null) document.layers[object].visibility = 'hidden'; else if (document.all) document.all[object].style.visibility = 'hidden'; } //--></SCRIPT> <STYLE><!-- .myStyle { position: absolute; visibility:hidden; top:150; left:300; } //--></STYLE> </HEAD> <BODY> <A HREF="#" onMouseover="show('myLayer1')" onMouseout="hide('myLayer1')">ここにマウス</A> <DIV ID="myLayer1" CLASS="myStyle"> <H1> Hello!!</H1> </DIV> </BODY> </HTML>
その他の回答 (4)
- IndigoChild
- ベストアンサー率50% (5/10)
<span title="マウスのカーソルが重ねると表示される文字">ここだよ</span>
- 0011Allen
- ベストアンサー率56% (108/192)
>ふきだしみたいな感じで説明文を出すのは可能なのでしょうか？ その場合はまたチョット違って画像を使います。 例として Fukidashi.gif -->吹き出しのコメントの画像 Space.gif -->吹き出しと同じサイズのブランクの透過Gif を用意して、こんなふうに。 <HTML> <HEAD> <TITLE></TITLE> <BODY> <IMG SRC="Space.gif" NAME="fukidashi"> <A HREF="#" onmouseOver="document.fukidashi.src='Fukidashi.gif'" onmouseOut="document.fukidashi.src='Space.gif'">ここにマウス</A> </BODY> </HTML>
- Kamo-Kamo
- ベストアンサー率46% (29/62)
一番手抜きなところで、リンクを作る際の＜a＞タグにtitle指定をするという 手があります。#1の方の回答のリンクタグ版といった感じでしょうか。 (なお、下のサンプルはタグ禁止対策として2バイト文字「＜」で囲んでいます) ＜a href=sample.htm title="サンプルページに飛びますよ"＞さんぷる＜/a＞ こうするとマウスオーバーで指定した文字列が出ますよ。
お礼
貴重なご意見ありがとうございます。 大変参考になりました。
補足
もしわかればでいいのですが、説明を見やすいサイズ（大きいサイズ）で表記したいのですが、いい方法はないでしょうか？
- jein
- ベストアンサー率49% (2799/5705)
画像ならオプションでALTを指定するとマウスオーバー時に ポップアップで文字表示ができます。
お礼
早いレスありがとうございます。画像ではなく文字の場合はないでしょうか？ 参考になりました。
お礼
ありがとうございます。かなり参考になりました。 これでなんとなくわかったような気がします。 例えば、ふきだしみたいな感じで説明文を出すのは可能なのでしょうか？