人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

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

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

1150695324
●拡大する

●質問者: hiyarihatto
●カテゴリ:インターネット ウェブ制作
✍キーワード:JavaScript イメージ ウィンドウ プログラム マウスカーソル
○ 状態 :終了
└ 回答数 : 8/8件

▽最新の回答へ

1 ● kimizu
●17ポイント

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

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

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


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

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

見たなぁ!!

こんな感じです。

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

◎質問者からの返答

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

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

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

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

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


2 ● int80h
●17ポイント

あれこれポップアップ

http://www.remus.dti.ne.jp/~a-satomi/bunsyorou/ArekorePopup.html

◎質問者からの返答

面白いですね。

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


3 ● llusall
●16ポイント

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

単純に「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>

◎質問者からの返答

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

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

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


4 ● Kenju
●16ポイント

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

<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>
◎質問者からの返答

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

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 );

}

}


5 ● llusall
●16ポイント

再回答ですみません。

>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>

◎質問者からの返答

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

llusallさんの推測どおり、

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

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

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


1-5件表示/8件
4.前の5件|次5件6.
関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ