- 締切済み
Firefoxでマウス座標の取得
クリッカブルマップのマウスオーバー時にdivを表示させようと、以下のようなコードを書きました。 これだとFirefoxに対応していないのですが、どうやったら同じように座標を取得できるのかわかりません。 どなたかご教示をお願いします。 <script type="text/javascript" language="JavaScript"> <!-- function up(text){ document.getElementById('key').innerHTML=text; set.style.posLeft =document.body.scrollLeft+window.event.offsetX+150; set.style.posTop =document.body.scrollLeft+window.event.offsetY+250; document.all('set').style.display="block"; } function del(){ document.all('set').style.display="none"; } //--> </script>
- sanas
- お礼率81% (27/33)
- JavaScript
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
関連するQ&A
- 『オンマウスで説明文を表示』について
http://lll.s21.xrea.com/m/link/38.html こちらのURLのタグを参考にしてやってみたところ、背景が半透明になってしまうのです。 すぐ上やすぐ下に文字が書いてあるので、ごちゃごちゃになって見えなくなってしまいます。 色々いじってみましたが、どうも上手くいきません。 どなたか、何処をどう変更するのか教えて頂けませんか？ お願いします。 使用タグ↓ <SCRIPT language="JavaScript"> <!-- function up(text){ document.getElementById('te').innerHTML=text; set.style.posLeft =document.body.scrollLeft+window.event.clientX+10; set.style.posTop =document.body.scrollTop+window.event.clientY+10; document.all('set').style.display="block";} function kes(){document.all('set').style.display="none";} //--> </SCRIPT> <A HREF="○○.html" onmouseover="up('文章...')"; onMouseout="kes()">テストページ</A> <DIV style="display:none;position:absolute;filter:Alpha(opacity=70);" ID="set"> <TABLE BORDER=1 style="border-style:dotted" BORDERCOLOR="#333333" BGCOLOR="#E0E0E0" cellspacing=1 cellpadding=20> <TR><TD BGCOLOR="#FFE0E0"><SPAN ID="te"></SPAN></TD></TR> </TABLE> </DIV>
- 締切済み
- JavaScript
- つづきです・2
先ほどの質問のプログラムです。 どうぞよろしくお願いいたします。 （＊印はサイトアドレスまたはファイル名です。） <script tupe="text/javascript"> <!-- window.onerror=null function getMouseX(e){ if(document.layers)return e.pageX if(document.all) return document.body.scrollLeft+event.clientX } function getMouseY(e){ if(document.layers)return e.pageY if(document.all) return document.body.scrollLeft+event.clientY } function moveLAYER(layName,x,y){ if(document.layers)document.layers[layName].moveTo(x,y) //NN用 if(document.all)document.all(layName).style.pixelLeft=x //IE用 if(document.all)document.all(layName).style.pixelTop=y //IE用 } function setBGCOLOR(layName,color){ if(document.layers)document.layers[layName].bgColor=color if(document.all)document.all(layName).style.backgroundColor=color } var nn4=!!document.layers var ie4=!!document.all function showHELP(no,e){ var offsetx=1 var offsety=1 moveLAYER('helplay'+no,(getMouseX(e)+offsetx),(getMouseY(e)+offsety)) } function hideHELP(no,e){ moveLAYER('helplay'+no,-100,-3) } //--> </script> <STYLE TYPE="text/css"> <!-- A { font-family:Osaka,Arial;font-size:10pt } .helplay { position:absolute;top:-100;left:-3 <!----> </STYLE> </head> <body bgcolor="#969696" link="#3c3c3c" text="white"> （つづきます） 関連URL：http://oshiete1.goo.ne.jp/kotaeru.php3?q=453166
- 締切済み
- JavaScript
- 初心者なのですが教えてください。
ＨＴＭＬで初めてプログラムを作ってみました。 ある画像があり、カーソルを動かすとｘ、ｙ座標を表示させる プログラムを作りました。 今回これを改良したいのです。 画像の中に、人の絵がありまして、その人のところに カーソルを持っていくと画面にその人の名前が表示されるようにしたいです。 たとえばｘ、ｙの座標、共に（２００、２００）の所に その人物の中心があるとすれば、その前後±５０ぐらいの範囲で この名前が表示されるようにしたいです。 まだまだ未熟で分からないことだらけなので、どなたか分かる方 ご指導ください。ヨロシクお願いします。 <html> <head> <title>情報収集</title> </head> <body> <script type="text/javascript"> window.document.onmousemove = getMouseXY; function getMouseXY(evt){ // x,yとpageX,Y if (window.createPopup){ x = event.x + document.body.scrollLeft; y = event.y + document.body.scrollTop; } else{ x = evt.pageX; y = evt.pageY; } document.getElementById("result1").innerHTML = "(x,y) = "+x + ", "+y; // offsetX,YとlayerX,Y if (document.all){ cx = event.offsetX; cy = event.offsetY; } else{ cx = evt.layerX; cy = evt.layerY; } document.getElementById("result2").innerHTML = "(offsetX,offsetY) = "+cx + ", "+cy; } </script> <IMG src="q600.jpg" name="img1"> <br> <div id="result1"></div> <div id="result2"></div> <script type="text/javascript"> function eve1(e){ window.status="[ 座標位置 ] : "+"( x , y ) = "+"( "+x+" , "+y+" )"; return true; } document.onmousedown = eve1; </script> <script type="text/javascript"> function openWindow1(){ window.open("serv.html","OpenWindow","screenX=20,screenY=50,left=20,top=50,width=160,height=240"); } document.ondblclick=openWindow1(); </script> </body> </html>
- ベストアンサー
- HTML
- javascriptがChromeで機能しません
ご質問させていただきます。 リンクにオンマウスするとカーソルのそばにバナーを表示させるjavascriptをHTMLに組み込みました。 IEでは正常に機能するのですが、Chromeではバナーがカーソルのそばではなくページの一番左上に表示されてしまいます。 どのようにソースを記述すれば改善されるのか、教えていただけないでしょうか。 javascriptに関しては初心者なので、困っております。 何卒宜しくお願い致します。 因みに、javascriptは http://lll.s21.xrea.com/m/link/38.html を参考にして書きました（ここでは、Chromeでオンマウスすると文章が一番右下に表れてしまいます）。 <html> <head> <script type="text/javascript"> <!-- function on(text) { document.getElementById('banner').innerHTML=text; frame.style.posLeft =document.body.scrollLeft+window.event.clientX+10; frame.style.posTop =document.body.scrollTop+window.event.clientY-10; document.all('frame').style.display="block"; } function off() { document.all('frame').style.display="none"; } // --> </script> <div style="border:1px solid #ddd; background:#fff; padding:5; display:none; position:absolute;" id="frame"><span id="banner"></span></div> </head> <body> <a href="サイトアドレス" target="_blank" onmouseover="on('<img src=\'バナーアドレス\'>')"; onmouseout="off()">サイト名</a> </body> </html>
- 締切済み
- JavaScript
- マウスでスクロールした値を取得できない
IE6.02を使っています。 マウスの座標を追いかけるプログラムで、 ブラウザを縦方向にスクロールしてもその座標を取得したいのですが、 なぜかdocument.body.scrollTopが0のままで追いかけてきませんでした。 次のどこがいけないのでしょうか？ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>sample</title> <script type="text/javascript"><!-- document.onmousemove=function(e){ if(document.all){ Myimg.style.pixelLeft=document.body.scrollLeft+event.x+15; Myimg.style.pixelTop=document.body.scrollTop+event.y+15; } else if(document.getElementById){ document.getElementById("Myimg").style.left=e.pageX+15; document.getElementById("Myimg").style.top=e.pageY+15; } } --></script> </head> <body> <span id="Myimg" style="position:absolute"><img src="gazou.gif"></span> a<br>←スクロールバーがでるように改行していく a<br> a<br> a<br> a<br> ・ ・ ・ </body> </html>
- ベストアンサー
- JavaScript
- ＩＥのイベントでのウインドウ位置の取得
以前に、MdNの「リンクにマウスオーバーするとポップアップで説明が表示される」というサンプルの記述がうまく動作しないという質問で、FairefoxやSafariではその回答でうまく動作するようなのですが、ＩＥの動作がまだ駄目なようなのです。 ＩＥのイベントが発生した時のマウス座標の取得は、Javascriptで、 function OnScreenHelp(x,y){ if(document.all) { /* IEでの処理 */ document.getElementById(strID).style.left = event.x + document.body.scrollLeft + 15; document.getElementById(strID).style.top = event.y + document.body.scrollTop + 0; }else{ /* IE以外の処理 */ document.getElementById(strID).style.left = x + 15 + "px"; document.getElementById(strID).style.top = y + 0 + "px"; } } のような記述になっているのですが、関数OnScreenHelp(x,y)のx,yがbodyの本文内で、event.pageX、event.pageYのようにＮＮ系の記述になっているため、ＩＥではこのx,yの値は使えないので上記のような記述になっているようなのです。上記の記述ではうまくポップアップしてくれないので、 event.xやevent.yの所の記述がまずいのかな？と思って、ちょっと調べてみて、window.event.offsetXやwindow.event.offsetYに変更してやってみたのですが、うまくいきません。ここの所の、IEの記述としては、どのように記述したらよいか分かりかねています。ご経験のある方、ご教示願えたらと思います。 よろしくお願い致します。
- 締切済み
- JavaScript
- NN系でマウス座標取得
お世話になります。 javascriptにてマウス座標を取得するファンクションを作成したいと 考えております。 そこで以下のソースでも取得可能だと思うのですが NN系でイベントが走らない場合でもマウス座標を 取得するファンクションを作成したいです。 すごく簡単なのかもしれませんが、ご教授宜しくお願い致します。 function getMouseY(e){ if(document.all) return document.body.scrollTop+event.clientY else if(document.layers||document.getElementById) return e.pageY }
- 締切済み
- JavaScript
- 「リンクにマウスオーバーするとポップアップで説明が表示される」ができません
はじめまして。 Javascriptは初心者でわからないことがありましたので、どなたかお答えいただけないでしょうか？ MdNから出版されている、プロとして恥ずかしくないJavascriptの大原則の中で紹介されている「リンクにマウスオーバーするとポップアップで説明が表示される」を入力したのですが、まったく再現できません。 <link href="css/design.css" rel="stylesheet" type="text/css" media="all"> <style type="text/css" media="all"><!-- .Help{ font-size:x-small; background-color:#eee8aa; color:#6666ff; position:absolute; left:0px; top:0px; padding:3px; border-color:#003399; border:solid; border:1px; } //--></style> <script type="text/javascript"><!-- function OnScreenHelp(x,y){ if(document.all){ document.getElementByld(strID).style.left = event.x + document.body.scrollLeft + 15; document.getElementByld(strID).style.top = event.y + document.body.scrollTop + 0; }else{ document.getElementByld(strID).style.left = x + 15; document.getElementByld(strID).style.top = y + 0; } document.getElementByld(strID).style.display ="; } function OffScreenHelp(){ document.getElementByld(strID).style.display='none'; strlD="; } //--></script> </head> <body> <span class="Help" style="display:none; z-index:1000" id="About">会社概要をご紹介します</span> <span class="Help" style="display:none; z-index:1000" id="products">最新情報を紹介します<img src="img/up.gif"></span> <h1> <a href="index.html" onMouseOver="strID='About'; OnScreenHelp(event.pageX,event.pageY);" onMouseOut="OffScreenHelp()">About</a> </h1> <h1> <a href="index.html" onMouseOver="strID='Products'; OnScreenHelp(event.pageX.event.pageY);" onMouseOut="OffScreenHelp()">Products</a> </h1> </body> この様に記述したのですがどこが間違っているのかわかりません。 仕事で使わなければならず非常に困っています。 宜しくお願いします。
- ベストアンサー
- JavaScript
- オンマウスでボックス表示を中央に表示
この下のスクリプトで画像にカーソルがオンマウスになるとその下に ボックスが表示されるという構造なのですが、色々試したのですが、 ブラウザの解像度、１２８０、１０２８、８００などでもこのオンマウスで表示されるボックスが中央にくるようにしたいのです。 レイアウトを統一するためです。 function up(text){ document.getElementById('te').innerHTML=text; set.style.posLeft =document.body.clientWidth/4; set.style.posTop =document.body.clientHeight; document.all('set').style.display="block";} function kes(){document.all('set').style.display="none";} という構文なのですが、この上のものですと１０２８では中央にくるのですが、自宅のワイドモニターですとずれてしまいます。 となたか、どんなモニターでもどんな解像度でもこのボックスをいつも中央に表示をするスクリプトを教えていただけないでしょうか。。。 自分でも勉強しているのですが、なかなか上手くいかなく困っています。どうか宜しくお願いいたします。
- 締切済み
- JavaScript
- onmousemove
何とか自力で下記まで着ました。 <html> <head> <script type="text/javascript"><!-- myX = 8; myY = 16; function myMove(){ myObj=document.imgb.style; myObj.left = myX + window.event.clientX + document.body.scrollLeft + "px"; myObj.top = myY + window.event.clientY + document.body.scrollTop + "px"; } //--></script> </head> <body> <img src="imgA.gif" onmousemove="myMove()" /> <img src="imgB.gif" name="imgb" style="position:absolute; z-index:1;" /> </body> </html> これを画像 imgA からマウスが外れたら imgB を表示しないようにする方法はありますでしょうか。 ちなみにこのＯＫＷａｖｅのブックマークに追加するあたりのアイコンにマウスをあわせるとなんかでてくきますよね。それと〃ことをやる場合この方向でいいのでしょうか？
- ベストアンサー
- JavaScript
- 印刷しようとしたらできないのでキューを確認したらオフラインで使用するになっていた。オンラインに戻す事ができなかったのでデバイスから一度削除し再設定したがｗｉｎｄｏｗｓがネットワークを介してプリンターと接続できませんと表示した。
- パソコンもしくはスマートフォンのOSはWindows10です。接続は無線LANです。
- Wi-Fiルーターの機種名はバッファローWHR-1166DHP2です。電話回線の種類はケーブルTVです。
お礼
ありがとうございます。 参考URLは拝見していたのですが、具体的に堂使うかというところで頭を抱えていまして…