ウォッチ
ウィンドウを開いたら、マウス位置をリアルタイムで取得し、ウィンドウ上に表示ということをしたいのですが、まったくわかりません。
function mousecursor(evt){ //関数の定義
X = event.x; //イベント発生場所のX座標取得
Y = event.y; //イベント発生場所のY座標取得
window.status = X + "," + Y;} //ステータスバーに表示
document.onmousemove = mousecursor; //マウスカーソルが動いたら、関数を呼び出す。（bodyタグで呼び出しも可）
というようなソースを手に入れたのでやってみたら、できることはできたんですが、なんとなくしか意味がわかってません。
HTMLやPerl、VBAなどはできるんですが、どうしてもJavaScriptがあんまり理解できないんです…。
リアルタイムで取得し、表示、ということではなくても、自分の任意したように出力させたいんです。
（たとえばどこかをクリックしたらアラート表示など）
よろしくお願いします。
No.2ベストアンサー
- 回答日時：
No.1で提示して下さっているURLでの例はクリッカブルマップでの例ですね。
<body>にonmousemoveを指定する事で、
そのページのどこの座標でも取得できるようになります。
w-intyさんはJavaScriptが理解できていないと仰っているので少し詳しく書いてみますね。
リアルタイムで取得、表示はonmousemove(マウスが動いたら)イベントで、
クリックで取得、表示はonclick(クリックされたら)イベントで
関数(function XXXXと書かれているもの)を呼び出します。
以下のソースをテキストにそのまま貼り付けて、htmlで開いてみて下さい。
―ソースここから―――――――――――――――――――――――――
<html>
<head>
<script language="JavaScript"><!--
function check(mx,my)
{
document.myFORM.Result.value = mx+","+my;
}
function checkClk(mx,my)
{
alert(mx+","+my);
}
// --></script>
</head>
<body onMousemove="check(event.offsetX,event.offsetY)"
onClick="checkClk(event.offsetX,event.offsetY)">
<form name="myFORM">
x,y:<input type="text" name="Result">
</form>
</body>
</html>
―ソースここまで―――――――――――――――――――――――――
w-intyさんの提示なさっているソースでは
onmousemoveイベントが発生した際に関数を呼び出し、
関数内でonmousemoveイベントが発生した座標を取得してそのまま表示させています。
私の提示したソースでは
onmousemoveイベントが発生した際に関数を呼び出すまでは同じなのですが、
onmousemoveイベントが発生した座標を引数にして呼び出して、
その座標を表示させています。
また、onclickイベントが発生した際にもまたイベントが発生した座標を引数にして呼び出し、
その座標をアラートウィンドウで表示しています。
説明が不足しているようでしたら補足説明しますので遠慮なく仰って下さい。
この回答への補足
function hyouji(img){
gazou = img + '.gif';
window.alert(gazou);
}
<IMG SRC=01.gif NAME=img01 onMouseOver="hyouji('01')">
としてみたらきちんとアラーと表示されました。
では次はテキストボックス…と思い、
function hyouji(img){
gazou = img + '.gif';
document.myFORM.imgname.value = gazou;
}
function hyoujimodosu(img){
document.myFORM.imgname.value = "";
}
<IMG SRC=01.gif NAME=img01 onMouseOver="hyouji('01')" onMouseOut="hyoujimodosu('01')">
とするときちんと表示・削除されました。
表示はきちんとされていますが、これで間違いはないでしょうか？
私の考え方はあってるでしょうか？？
-
-
- 0
- 件
-
回答ありがとうございます。
教えていただいたものをいろいろ自分なりに実行しながらいろいろ考えてみました。
人が書いたものを理解することはどうやらできるようになったみたいですが、
いざ自分がやりたいことをやろうとするとかけない状態のようです。
プログラムの根本的なことはわかってるので、
分岐などは意外と簡単に理解できるんですが、
イベントがイマイチ…。
さらに追加なのですが、ページ上にある画像の上をマウスが通過したらその画像名を取得する、
というのはどのようにしたらいいのでしょうか？
いろいろ錯誤してみましたが無理でした（＞＜）
No.6
- 回答日時：
>「画像にマウスオーバーしたら、その下に任意のテーブル
>（細かいところはスタイルシートで指定）を表示」
>ということがやりたいんです。
IEとNetscape6以降に対応させるのであれば、次のようなソースでいけると思います。
<html>
<head>
<STYLE TYPE="text/css">
<!--
#document_hoge { position:absolute;top:100;left:100;
width:250;height:40;clip:rect(0,250,40,0) }
//-->
</STYLE>
<script language="JavaScript">
<!--
IE = (document.all) ? 1 : 0;/* IEかどうかの判定 */
NN6 = (document.getElementById) ? 1 : 0;/* Netscape6以降かどうかの判定 */
if (NN6) {/* Netscape用の処理 */
document.images["01"].onmouseover = function temp(){sendName(this.name)};
document.images["01"].onmouseout = function temp(){Modoru(this.name)};
document.images["02"].onmouseover = function temp(){sendName(this.name)};
document.images["02"].onmouseout = function temp(){Modoru(this.name)};
}
function sendName(name){
source = '<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=Shift_JIS">';
source += '<SPAN STYLE="font:10pt Osaka,Arial">';
source += name;
source += '</SPAN>';
if (IE) {
document.all("document_hoge").innerHTML = source; /* IE用の処理 */
}
else if(NN6) {
document.getElementById("document_hoge").innerHTML = source; /* Netscape用の処理 */
}
}
function Modoru(name){
source = "";
if (IE) {
document.all("document_hoge").innerHTML = source; /* IE用の処理 */
}
else if (NN6) {
document.getElementById("document_hoge").innerHTML = source; /* Netscape用の処理 */
}
}
// -->
</script>
</head>
<body>
<img src="01.gif" NAME='01' onMouseOver="sendName(this.name)" onMouseOut="Modoru(this.name)">
<img src="02.gif" NAME='02' onMouseOver="sendName(this.name)" onMouseOut="Modoru(this.name)">
<span ID="document_hoge"></span>
</body>
</html>
あらかじめ「<span ID="document_hoge"></span>」というレイヤを埋め込んでおいて
sourceという文字列変数にHTMLソースを入れ、
document_hogeレイヤに書き込む、という方法です。
IE専用にするならもっと簡単にできますが、
Netscapeは「<img src="01.gif" NAME='01' onMouseOver=...」では
マウスオーバーのイベントをトラップできないので、
イメージオブジェクトごとに↓こういう記述が必要になります。
「document.images["01"].onmouseover = function temp(){sendName(this.name)};」
マウスイベントについては参考URLがわかりやすいかもしれません。
参考URL：http://page.freett.com/elledia/tips/mouse/mouse_ …
-
-
- 0
- 件
-
No.5
- 回答日時：
任意の文字列を表示、というのは
inputフォームに表示させればいいならまだしも、
普通のテキストとして表示させるとなるとブラウザの互換性を考えたり等色々煩雑ですので
ブラウザ互換は気にせず、今回ザッと３パターン用意しました。
―ソース１ここから―――――――――――――――――――――――――
<html>
<head><title>innerText版</title></head>
<body>
<table border="0"><tr>
<td><img src="large.jpg" onMouseOver="dspLarge.innerText='hoge1'" onMouseOut="dspLarge.innerText=''"></td>
<td><img src="small.jpg" onMouseOver="dspSmall.innerText='hoge2'" onMouseOut="dspSmall.innerText=''"></td>
</tr>
<tr>
<td><span id="dspLarge"></span></td>
<td><span id="dspSmall"></span></td>
</tr></table>
</body>
</html>
―ソース１ここまで―――――――――――――――――――――――――
―ソース２ここから―――――――――――――――――――――――――
<html>
<head><title>visibility版</title></head>
<body>
<table border="0"><tr>
<td><img src="large.jpg" onMouseOver="dspLarge.style.visibility='visible'"
onMouseOut="dspLarge.style.visibility='hidden'"></td>
<td><img src="small.jpg" onMouseOver="dspSmall.style.visibility='visible'"
onMouseOut="dspSmall.style.visibility='hidden'"></td>
</tr>
<tr>
<td><span id="dspLarge" style="visibility:hidden;">hoge1</span></td>
<td><span id="dspSmall" style="visibility:hidden;">hoge2</span></td>
</tr></table>
</body>
</html>
―ソース２ここまで―――――――――――――――――――――――――
―ソース３ここから―――――――――――――――――――――――――
<html>
<head>
<title>inputフォーム版</title>
<script language="javascript"><!--
function dspText(flag, message)
{
switch(flag)
{
case '1':
hogeForm.dspLarge.value = message;
break;
case '2':
hogeForm.dspSmall.value = message;
break;
}
}
//--></script>
</head>
<body>
<form name="hogeForm">
<table border="0"><tr>
<td><img src="large.jpg" onMouseOver="dspText('1', 'hoge1')"
onMouseOut="dspText('1', '')">
</td>
<td><img src="small.jpg" onMouseOver="dspText('2', 'hoge2')"
onMouseOut="dspText('2', '')"></td>
</tr>
<tr>
<td><input type="text" name="dspLarge"></td>
<td><input type="text" name="dspSmall"></td>
</tr></table>
</form>
</body>
</html>
―ソース３ここまで―――――――――――――――――――――――――
ソース１で使用しているinnerTextはネスケに対応しているか分かりません。
私の記憶している限りでは、IE4～は動作するようです。
ソース２で使用しているvisibilityは
一応両方に対応していますが、ネスケは確か6あたりからしか対応していなかったかと。
上記２つはブラウザ互換を考えるとあまり現実的ではないので
ソース３が無難ですかね。
それと、w-intyさんはご自分のやりたい事の方向性が見えてきたと
仰っていましたが、具体的にはどういう事がしたいのでしょう。
もう少しハッキリとした目標があるならばこちらとしても
的を得た答えを
お返しできるかと思うのですが…。
-
-
- 0
- 件
-
回答ありがとうございます。
やりたいことというのは、「画像にマウスオーバーしたら、その下に任意のテーブル（細かいところはスタイルシートで指定）を表示」ということがやりたいんです。
教えていただいたものだと文字表示＆テキストボックスですよね。
ただの
document.write("－
とやるとページが移動したようになってしまって、ソースが変わってしまうじゃないですか…ここでひっかかってるんです。
教えていただいたソースの一番目に使ってある
innerTextを使えばうまくいくんでしょうか？
自分なりのちょっと試してみたいと思います。
No.4
- 回答日時：
画像名：x座標, y座標
での座標とはページ上の座標、という事で話を進めます。
―ソースここから―――――――――――――――――――――――――
<html>
<head>
<script language="JavaScript"><!--
var imageName = "No file";
function check(mx,my)
{
document.myFORM.Result.value = mx+","+my;
}
function checkClk(mx,my)
{
alert(imageName + ":" + mx + "," + my);
imageName = "No file";
}
function sendName(name)
{
imageName = name;
}
// --></script>
</head>
<body onMousemove="check(event.offsetX,event.offsetY)" onClick="checkClk(event.offsetX,event.offsetY)">
<form name="myFORM">
x,y:<input type="text" name="Result">
<img src="large.jpg" onClick="sendName(this.src)">
</form>
</body>
</html>
―ソースここまで―――――――――――――――――――――――――
前の私のソースに少し手を加えただけのもので、
追加した項目は、画像・画像名保持の変数・その変数を画像名で置き換える関数 の３つです。
このソースでの動作は実際に見て頂く方が早いと思います。
さて、実際にどのようにして表示させているかというと
画像の上でクリックされた場合は
<img>タグで指定したonclick属性に記述した関数が呼び出され、
画像名保持のための変数を置き換えます。
次に<body>で指定したonclick属性に記述した関数が呼び出され、
『画像名：x座標, y座標』
のようなアラートウィンドウが開きます。
では画像の上以外でクリックされた場合は…というと、
画像名は取得できませんので、アラートウィンドウを出した直後に
画像名保持の変数を"No file"としておきます。
これは変数を宣言する際にも入れてあります。
これで一応
『画像名＋ページ内での座標』の出力は可能です。
ただ少しゴリ押し感が否めないので、全てのブラウザで同じ動作をするかは
全然自信ないです。
この回答への補足
現在のコードは
<head>
<script language="JavaScript">
：
：
functin sendName(name){
----
----
switch(imageName){
case '01':
document.write("---
break;
}
}
function Modoru(name){
imageName = name;
document.write("---
}
</script>
<BODY>
:
:
<img src="01.gif" NAME='01' onMouseOver="sendName(this.name)" onMouseOut="Modoru(this.name)">
というようになっています。
でもマウスオーバーした時点でsendName()の中を実行中なんで、その下のModoru()は、ソースには記述されていない状態になるわけですよね？
これをどうにかしたいのですが。。。
-
-
- 0
- 件
-
回答ありがとうございます。
無事に今現在自分がやりたいことがちょっとずつできてきました。
そこでさらに壁にぶつかったので教えてください。
[画像１] [画像２]
と並んでいて、画像１・２それぞれにマウスオーバーすると、その下に任意の文字列を出すようにしています。
ここまではうまくいったのですが、マウスアウトしたらその文字列を表示させない、というところがうまくいきません。
ヒントでもいいので教えてください。
No.3
- 回答日時：
考え方、あってると思いますよ。
他の方法としていくつか例を挙げてみます。
（１）
function hyouji(img){
gazou = img + '.gif';
document.myFORM.imgname.value = gazou;
}
<IMG SRC="01.gif" NAME="01" onMouseOver="hyouji(this.name)">
「this.name」は自分自身の「NAME=～」で指定されている文字列です。
こうすると
<IMG SRC="01.gif" NAME="01" onMouseOver="hyouji(this.name)">
<IMG SRC="02.gif" NAME="02" onMouseOver="hyouji(this.name)">
というふうに記述できて、「onMouseOver=～」の部分は修正しなくていいので楽ですね。
（２）
function hyouji(src){
gazou = src.substring(src.lastIndexOf("/") + 1);
document.myFORM.imgname.value = gazou;
}
<IMG SRC="01.gif" NAME="画像の名前" onMouseOver="hyouji(this.src)">
というふうにもできます。
「this.src」は「SRC=～」で指定されたファイルの場所を示す文字列です。
直接「SRC=～」で指定したファイル名を見るので、
「NAME=～」に何を指定しても関係なくなりますので、
<IMG SRC="01.gif" NAME="画像１" onMouseOver="hyouji(this.src)">
<IMG SRC="02.gif" NAME="画像２" onMouseOver="hyouji(this.src)">
というふうに記述できて間違いが少なくなりそうですね。
（３）
function hyouji(imgObj){
srcfile = img.src;
imgname = img.name;
gazou = srcfile.substring(srcfile.lastIndexOf("/") + 1);
document.myFORM.imgname.value = gazou;
}
<IMG SRC="01.gif" NAME="画像１" onMouseOver="hyouji(this)">
基本的に（２）と同じなのですが、
「this」は<～>で記述されたオブジェクトそのものを示します。
これのメリットは「imgname = img.name」のようにすれば、
画像の名前も別に取得できることです。
参考URL：http://tohoho.wakusei.ne.jp/www.htm
-
-
- 0
- 件
-
回答ありがとうございます。
私も「hyouji('01')」とかだと毎回かえるの面倒だな…と正直思っていたので、この方法は便利ですね。
早速、あまり今のやり方に慣れる前にこっちを覚えちゃおうと思ってます。
さらにさらに追加なのですが、
今は、「座標」と「画像名」を別々に取得していますよね？
これを同時に表示、ということはできないのでしょうか？
テキストボックスに
画像名：x座標,y座標
のように。。。
いろいろ調べてみたのですが、つまづいてしまって先へ進めません！！
どうぞよろしくお願いします。
No.1
- 回答日時：
-
-
- 0
- 件
-
回答ありがとうございます。
今はまだほとんどわかってない状態なのでいろいろ見ることで覚えたりひらめいたりすることもありますので、
今まで見ていないものを見て参考になりました。
ありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！
似たような質問が見つかりました
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- その他（プログラミング・Web制作） pythonで、tkinterとpillowの組み合わせ 2 2022/08/16 17:42
- PHP if(preg_match("/[^0-9]/",$gu_d)){意味を教えてください。 1 2022/05/06 05:37
- JavaScript ソースコードのいじる場所が分かりません。 1 2022/12/23 02:06
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- PHP PHPを使って、別サイトの一部を取得して表示したいのです。。 1 2023/01/18 21:45
- JavaScript WordPressのコンタクトフォーム７にて送信者の位置情報を送らせたい 2 2022/09/14 23:28
- 日本株 楽天RSS2での移動平均の取得について 1 2022/07/28 21:48
- JavaScript javaScriptで画面に値を入れるには 1 2022/08/14 12:27
- Visual Basic（VBA） 動かなくなってしまった古いVBAを動くようにしたい 8 2022/09/20 13:57
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
javascriptで画像の移動
-
【jQuery】tableループ内のIDの...
-
idの振り直しについて
-
クリックで指定のテーブルの背...
-
selectのonChangeが動作しません
-
クリックごとに文字色が交互に...
-
<JavaScript>tableタグを入力不...
-
javascriptでスロットマシン
-
正規表現で複数マッチ条件で悩...
-
ボタン2回押しを無効にしたい
-
<form action="#">の意味とは？
-
<td>の中のonClick="location" で
-
JavaScriptにて動的に配列を作...
-
背景色を変えて未入力チェック...
-
【jsp/Java】チェックボックス...
-
selectを変更不可にしたい
-
selectを使った計算
-
セレクトメニューで選択された...
-
テキストフィールドに入力した...
-
フォームから入力すると、入力...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
<JavaScript>tableタグを入力不...
-
画面表示とともに、テーブルの...
-
selectのonChangeが動作しません
-
テーブルの行数を可変長にした...
-
テキストエリアに入力した改行...
-
【jQuery】tableループ内のIDの...
-
idの振り直しについて
-
プルダウンメニューを表の中に...
-
javascriptで画像をテーブルに...
-
javascriptで<table>背景色の取得
-
どこに挿入？
-
javascriptでクリックするごと...
-
jquery にて、アラートダイアロ...
-
Javascriptでテーブルタグの座...
-
動的なcheckboxのcheckedについて
-
javascriptで画像の移動
-
<iframe>内にHTMLをランダム表...
-
クリックごとに文字色が交互に...
-
javascriptでスロットマシン
-
連動テーブルのクロスハイライト
おすすめ情報
