• ベストアンサー

マウスでポイントすると説明を表示

HPを作り中なのですが、よく他のホームページなどでマウスをクリックしなくてもその場所へ持っていくだけでヘルプみたいに説明を表示できるようなページがあります。私もそれを作ってみたいのですが、私が持っている参考本には全然のっていません。もし知っている方がいらっしゃればやり方・できればサンプルなどを教えていただけたらうれしいです。簡単な感じでかまわないので教えてください。お願いします。

質問者が選んだベストアンサー

  • ベストアンサー
  • 0011Allen
  • ベストアンサー率56% (108/192)
回答No.3

いちおう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>

noname#3176
質問者

お礼

ありがとうございます。かなり参考になりました。 これでなんとなくわかったような気がします。 例えば、ふきだしみたいな感じで説明文を出すのは可能なのでしょうか?

その他の回答 (4)

回答No.5

<span title="マウスのカーソルが重ねると表示される文字">ここだよ</span>

  • 0011Allen
  • ベストアンサー率56% (108/192)
回答No.4

>ふきだしみたいな感じで説明文を出すのは可能なのでしょうか? その場合はまたチョット違って画像を使います。 例として 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)
回答No.2

一番手抜きなところで、リンクを作る際の<a>タグにtitle指定をするという 手があります。#1の方の回答のリンクタグ版といった感じでしょうか。 (なお、下のサンプルはタグ禁止対策として2バイト文字「<」で囲んでいます) <a href=sample.htm title="サンプルページに飛びますよ">さんぷる</a> こうするとマウスオーバーで指定した文字列が出ますよ。

noname#3176
質問者

お礼

貴重なご意見ありがとうございます。 大変参考になりました。

noname#3176
質問者

補足

もしわかればでいいのですが、説明を見やすいサイズ(大きいサイズ)で表記したいのですが、いい方法はないでしょうか?

  • jein
  • ベストアンサー率49% (2799/5705)
回答No.1

画像ならオプションでALTを指定するとマウスオーバー時に ポップアップで文字表示ができます。

参考URL:
http://www.kanzaki.com/docs/html/htminfo-alt.html
noname#3176
質問者

お礼

早いレスありがとうございます。画像ではなく文字の場合はないでしょうか? 参考になりました。

関連するQ&A

専門家に質問してみよう