1150695324 javascriptで、マウスカーソル近くに小さな四角内に文字が書かれた情報ウィンドウを出したいのですが、どのような処理をすればいいのか、分かる人がいましたら教えてください。


作りたいプログラムの
イメージ画像を添付します。

お願いしますm(_ _)m

回答の条件
  • 1人5回まで
  • 登録:2006/06/19 14:35:26
  • 終了:2006/06/26 14:40:03

回答(8件)

id:kimizu No.1

kimizu回答回数726ベストアンサー獲得回数212006/06/19 14:41:41

ポイント17pt

ブラウザ上で何かの上にマウスを乗っけたら、情報ウィンドウを

出して、文字を表示させたい、ということでしょうか。

まず、JavaScriptでは制御不可能です。


単純に、画像の上にマウスが乗っかったときに文字を表示したい

のであれば、イメージタグのALTを使用すると表現出来ます。

見たなぁ!!

こんな感じです。

http://www.kanzaki.com/docs/html/htminfo-alt.html

id:hiyarihatto

実際は、GoogleMapでマーカにマウスがあるときに四角を表示したいんですね。

↓のサイトで四角枠線をマウスが乗ると、

ALTのような情報が表示されるのですが、

この処理が分かる人がいたら教えてください

http://www.wikimapia.org/#y=38897611&x=-77036677&z=18&l=0&m=...

2006/06/19 14:54:44
id:int80h No.2

int80h回答回数359ベストアンサー獲得回数252006/06/19 14:48:43

id:hiyarihatto

面白いですね。

今度じっくり見てみようと思います。

2006/06/21 01:37:17
id:llusall No.3

llusall回答回数505ベストアンサー獲得回数612006/06/19 16:06:45

ポイント16pt

ツールチップの表示ですね。

単純に「title属性」を使用したらいかがでしょうか?

http://www.seo-equation.com/html/html/title.html




サンプル

<html>

<body>

<input type="button" value="ボタン" title="ボタン" >

<br>

<div title="四角" style="position:relative;width:200;height:50;background:'pink';border:1pt solid blue;" ></div>

</body>

</html>

id:hiyarihatto

レスありがとうございます。

title属性はこの質問をして知りました。

title属性が使えない状態で四角いウィンドウが出したいです。

2006/06/19 16:48:12
id:Kenju No.4

Kenju回答回数30ベストアンサー獲得回数22006/06/19 16:22:22

ポイント16pt

完全に同じではないでしょうが、こんなんで同じようなことができます。

		<script type="text/javascript">
		<!--
		function helpOn(helpText)
		{
		  var helpTag = document.getElementById("helpTag");
		
		  helpTag.replaceChild(document.createTextNode(helpText), helpTag.firstChild);
		  helpTag.style.display = "inline";
		  helpTag.style.posLeft = event.clientX;
		  helpTag.style.posTop = event.clientY;
		}
		
		function helpOff()
		{
		  var helpTag = document.getElementById("helpTag");
		
		  helpTag.style.display = "none";
		}
		
		function helpMove()
		{
		  var helpTag = document.getElementById("helpTag");
		
		  helpTag.style.posLeft = event.clientX + 12;
		  helpTag.style.posTop = event.clientY + 20;
		}
		// -->
		</script>
		
		<img src="blank.gif" style="height:100px; width:100px; border:solid 1px #000000;" onmouseover="this.style.borderColor='#FFFF00'; helpOn('あいうえお');" onmousemove="helpMove();" onmouseout="this.style.borderColor='#000000'; helpOff();">
		<span id="helpTag" style="display:none; border:solid 1px #000000; background-color:#ffffdd; position:absolute; font-size:90%;">
</span> <pre>
id:hiyarihatto

ソースありがとうございます!!

IEでは実現しました!!

調べてみると、eventオブジェクトはブラウザ依存する(firefoxではeventオブジェクトはエラー)みたいですね。

マウスストーカーのjavascriptではブラウザ依存に対応しているソースを見つけたのですが・・・

↓各ブラウザに対応したマウスストーカー

http://www.bsc-j.com/~moritake/oboegaki/h_js_smp078.html

このソースで、

document.onmousemove = mouseMove;

というプログラムがあるのですが、このプログラムの意味が分かる人がいたら教えて下さい。

マウスが動いたらmouseMoveの関数を実行するという意味のような気がします。

でも関数なのにmouseMove(e)のようになっていないのはなぜ?

firefoxで動かすと下のmouseMove関数はelseになるのですが、eってどこからきてるのですかね?

分かる人がいましたら教えてください。

function mouseMove(e) {

if ( bwType == 1 ) {

mousePosX = document.body.scrollLeft + event.clientX;

mousePosY = document.body.scrollTop + event.clientY;

moveObj();

return ( false );

} else {

mousePosX = e.pageX;

mousePosY = e.pageY;

moveObj();

return ( false );

}

}

2006/06/21 01:30:12
id:llusall No.5

llusall回答回数505ベストアンサー獲得回数612006/06/19 18:34:02

ポイント16pt

再回答ですみません。

>title属性が使えない状態で・・・

というのが気になります。

title属性の動作状況を見ると、多くの環境で対応していそうですが。

おそらく、Ajaxを絡めるために、「動的に表示内容を設定したい」と推測します。

以下、サンプルの通り、スクリプトで表示内容も変更できますよ!

思いっきり的外れな推測でしたら、すみません。


<html>

<body>

<input type="button" value="ボタン" title="ボタン" >

<br>

<div id="idRect" title="四角" style="position:relative;width:200;height:50;background:'pink';border:1pt solid blue;" ></div>

<br>

<input type="button" value="内容を変更してみる" onclick="document.all.idRect.title='変更!';" >

</body>

</html>

id:hiyarihatto

コメントありがとうございます。

llusallさんの推測どおり、

Ajaxを絡めて動的表示ということです。

ソースありがとうございます。

今このdivのidRectをどうマウスちかくに配置するかで悩んでいます。

2006/06/21 01:39:37
id:llusall No.6

llusall回答回数505ベストアンサー獲得回数612006/06/21 10:24:15

ポイント16pt

何度もすみません。(汗)

function mouseMove(e)

の回答でなく、恐縮なのですが、firefox 等での動作もお考えのようでしたら、

こちらが参考になると思います。



私の過去回答です。

http://q.hatena.ne.jp/1146495668



ただ、divでツールチップを表現した場合、ウィンドウの端に掛かったときに、

上や左にオフセットして表示させてあげるとグッドですが、ちと面倒になりますね。

id:hiyarihatto

いえいえ、こちらこそ何度も答えてもらってすみません。

http://www.openspc2.org/JavaScript/Ajax/Ajax_study/chapter05...が、各ブラウザに対応したマウスポインタの取得方法みたいですね。

過去回答、参考になりました。

ありがとうございます。

2006/06/22 17:21:07
id:Kenju No.7

Kenju回答回数30ベストアンサー獲得回数22006/06/21 10:39:09

ポイント16pt

eventってIE限定だったのですね、失礼しました。

そして前の回答はspanタグ内にbrタグがあったのですが、送信した時に消えてしまいました。ごめんなさい。

>document.onmousemove = mouseMove;

>マウスが動いたらmouseMoveの関数を実行するという意味のような気がします。

そのとおりで、documentのonmousemoveプロパティにmouseMove関数を代入しています。

document.onmousemove = mouseMove(e);

にするとmouseMoveを実行した結果を代入してしまいますからね。この場合はfalseですか。

FireFox(というかIE以外)ではどうやらイベント実行時にイベントハンドラにeventオブジェクトが第一引数として与えられるようですね。

なので実際にはdocument.onmousemove(event);が実行されていると考えられます。

残念ながらテスト環境がないのでブラウザによる差異を消したスクリプトは提供できません、ごめんなさい。

ちなみにtitleやaltの属性で出てくるヘルプメッセージは万能に近いでしょうが、移動できなかったと思います。

id:hiyarihatto

ソース大変参考にさせていただきました。

ありがとうございますm(_ _)m

document.onmousemove = mouseMove;

という処理で

マウスが動いたときにmouseMove関数にeventオブジェクトが第一引数として与えられるそうですが、

document.onmousemove = mouseMove;

の処理をしないでmouseMove関数にeventオブジェクトを引数に設定する方法ってあるのですか?

もし分かる人がいましたら教えてください。

と引数に何を設定すればいいのでしょうか?

↓mouseMoveの関数

function mouseMove(e) {

if ( bwType == 1 ) {//IE時

mousePosX = document.body.scrollLeft + event.clientX;

mousePosY = document.body.scrollTop + event.clientY;

moveObj();

return ( false );

} else {

mousePosX = e.pageX;

mousePosY = e.pageY;

moveObj();

return ( false );

}

}

まあdocument.onmousemove = mouseMove;

で、マウスカーソルをグローバル変数で保存しとけば出来ますので、

そんなに困っていません。

2006/06/22 17:34:17
id:Kenju No.8

Kenju回答回数30ベストアンサー獲得回数22006/06/22 22:18:48

ポイント16pt

知識としては知っていたのですが、テスト環境がなかったのでどうなんだろうと思ってましたが。

今回やっぱり気になってFireFoxをダウンロードしてきました。

<img src="" onmouseover="mouseMove(event);">

で、ちゃんとeventオブジェクトが渡されました。

IEでもeventオブジェクトが渡されるので、同じくeで扱えます。

まぁ、プロパティもメソッドも違うみたいなのでブラウザ分けはやはり必要ですが。。。

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

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

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

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

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