スタイルシート?でポップアップを表示させる方法を探しています。


「人力検索」の質問入力フィールドの上にある、
「なんでも探してみますのできいて下さい。?」の「?」の部分をクリックしたら、
操作説明のポップアップが出て、もう1度クリックしたらそれが閉じます。
スタイルシートで実現していると思いますが、これを私も実装したいです。
実装方法をご存知の方教えてください。また解説されているサイトの情報でも構いません。
すみませんが、よろしくお願い致します。

回答の条件
  • 1人5回まで
  • 登録:2006/08/28 22:27:21
  • 終了:2006/09/04 22:30:04

回答(3件)

id:akkk No.1

akkk回答回数395ベストアンサー獲得回数62006/08/28 23:00:54

ポイント27pt

http://www.hajimeteno.ne.jp/dhtml/dist/js14.html

スタイルシートではなく、JavaScriptです。

id:zero4

JavaScriptでしたか σ(^_^;)

とにかく試してみます(ちょっと難しそう…)ありがとうございます。結果を報告します。

2006/08/28 23:08:00
id:llusall No.2

llusall回答回数505ベストアンサー獲得回数612006/08/28 23:19:19

ポイント27pt

スタイルシートとJavaScriptを使用しています。


簡単に抜き出したサンプルです。

以下、内容を適当なhtmlファイルにして開いてみてください。

<html>

<head>

<script type="text/javascript" src="http://q.hatena.ne.jp/js/prototype.js"></script>

<script type="text/javascript" src="http://q.hatena.ne.jp/js/tooltip.0.2.js"></script>

<link rel="stylesheet" type="text/css" href="http://q.hatena.ne.jp/css/question.css">

</head>

<body>

なんでも探してみますのできいて下さい。

<a href="#" id="input-question">クリック</a>

<div class="tooltip for-input-question" style="display:none">

知りたいことをここに入力してください(最大500文字まで)。</div>


</body>

</html>


スタイルシートとして、question.cssを使用しています。

ポップアップの表示非表示は、tooltip.0.2.js(JavaScript)で主に行っているようです。

  特に、Event.observe(window, 'load', Tooltip.initialize, false);

  により、イベントを割り当てているようです。


実装方法

prototype.js

tooltip.0.2.js

question.css

の3つを、ブラウザのアドレスバーへアドレスを入力するなどして、ゲットし、

html ファイルと同じフォルダに配置します。

そうすれば、以下のように記述できます。

<script type="text/javascript" src="prototype.js"></script>

<script type="text/javascript" src="tooltip.0.2.js"></script>

<link rel="stylesheet" type="text/css" href="question.css">

以上、参考になりますでしょうか?

id:zero4

(;゚Д゚)おぉうお コピペしたらできた!

早速、ファイルをダウンロードしてから、今作っているHTMLに組み込んでみます。

ありがとうございます!!!

2006/08/28 23:28:04
id:llusall No.3

llusall回答回数505ベストアンサー獲得回数612006/08/28 23:24:26

ポイント26pt

再回答すみません。

タグが崩れてしまいました。


<html>

<head>

<script type="text/javascript" src="http://q.hatena.ne.jp/js/prototype.js"></script>

<script type="text/javascript" src="http://q.hatena.ne.jp/js/tooltip.0.2.js"></script>

<link rel="stylesheet" type="text/css" href="http://q.hatena.ne.jp/css/question.css">

</head>

<body>

なんでも探してみますのできいて下さい。

<a href="#" id="input-question">クリック</a>

<div class="tooltip for-input-question" style="display:none">

知りたいことをここに入力してください(最大500文字まで)。</div>


</body>

</html>

id:zero4

(;゚Д゚)?? 違いが分かりませんが とりあえずありがとう!

2006/08/28 23:31:36

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません