HTMLで画像上にカーソル座標を表示するプログラムを作成しましたが、改良方法を教えてください
- 初心者なので教えてください。HTMLで初めてプログラム作成しました。画像上のカーソル座標を表示するプログラムを作りましたが、改良方法を教えてほしいです。
- また、画像上の特定の場所にカーソルを持っていくと人物の名前が表示されるようにしたいです。具体的には、画像上の特定の位置（(200, 200)の近く）で人物の名前が表示されるようにしたいです。
- 分からないことが多いので、教えていただけると嬉しいです。よろしくお願いします。
- ベストアンサー
初心者なのですが教えてください。
ＨＴＭＬで初めてプログラムを作ってみました。 ある画像があり、カーソルを動かすとｘ、ｙ座標を表示させる プログラムを作りました。 今回これを改良したいのです。 画像の中に、人の絵がありまして、その人のところに カーソルを持っていくと画面にその人の名前が表示されるようにしたいです。 たとえばｘ、ｙの座標、共に（２００、２００）の所に その人物の中心があるとすれば、その前後±５０ぐらいの範囲で この名前が表示されるようにしたいです。 まだまだ未熟で分からないことだらけなので、どなたか分かる方 ご指導ください。ヨロシクお願いします。 <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>
- goku716
- お礼率6% (13/210)
- HTML
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
プログラム自体はJavaScriptで書かれていますのでHTMLではないです。 HTMLの中でJavaScriptが動いています。 JavaScriptのカテゴリに質問をしなおしたほうが 回答が付きやすくなると思います。
関連するQ&A
- 初心者なのですが教えてください。
ＨＴＭＬの中に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>
- ベストアンサー
- JavaScript
- 文字がマウスカーソルを追従するスクリプト
いつもお世話になっております。 以下のサンプルスクリプトでinnerText・style.left・style.topと書いてあるところがあるのですが、これはどういう意味なのでしょうか？ どなたかわかる方、教えてください。 お願いします。 <HTML> <HEAD> <TITLE>マウスポインタ座標表示</TITLE> <STYLE TYPE="text/css"> <!-- #msxy { position:absolute; top:0px; left:0px; width:48px; color:black; background-color:yellow; font-size:7pt; border-width:1px; border-size:1px; border-style:solid; } --></STYLE> <SCRIPT Language="JavaScript"> <!-- function displayMouseXY(evt) { var X = Y = 0; if (document.all) { X = event.x; Y = event.y; document.all["msxy"].innerText = X+","+Y; document.all["msxy"].style.left= X + 8; document.all["msxy"].style.top = Y + 16; } if (document.layers) { X = evt.x; Y = evt.y; with(document.layers["msxy"]) { document.open(); document.write("<SMALL>"+X+","+Y+"</SMALL>"); document.close(); left = X + 8; top = Y + 16; bgColor = "yellow"; } } } if (document.all) document.onmousemove = displayMouseXY; if (document.layers) { window.onmousemove = displayMouseXY; window.captureEvents(Event.MOUSEMOVE); } // --> </SCRIPT> </HEAD> <BODY BGCOLOR="white"> マウスポインタ座標表示<BR> <DIV ID="msxy"></DIV> </BODY> </HTML>
- ベストアンサー
- JavaScript
- 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>
- 締切済み
- 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
- オブジェクトがありません
オブジェクトがありませんとエラーが出てしまいます。 operaやNetscapeは動くようなのですがIEは動きません。 document.getElementById(target).style.top = y-offx+"px"; の部分でエラーがでるようなのですが。 出さないためにどうすれば良いかが、分かりません。 よろしくお願いします。 <html> <head> <title>ドラッグして移動する</title> <script type="text/javascript"><!-- if(window.addEventListener)window.addEventListener("load",loadScript,false); if(window.attachEvent)window.attachEvent("onload",loadScript); //関数ロード function loadScript(){ ///ドラッグ用ロード flag=false; Menu=new Array("menu1","menu2","menu3"); for(i=0;i<Menu.length;i++){ XMenu=window.document.getElementById(Menu[i]) if(XMenu.addEventListener)XMenu.addEventListener("mousedown",dragOn,false); if(XMenu.attachEvent)XMenu.attachEvent("onmousedown",dragOn); } } //ドラッグ関数 function dragOn(){ flag=true; target=this.id; ///移動 if(window.document.addEventListener)window.document.addEventListener("mousemove",dragMove,false); if(window.document.attachEvent)window.document.attachEvent("onmousemove",dragMove); ///終了 if(window.document.addEventListener)window.document.addEventListener("mouseup",dragOff,false); if(window.document.attachEvent)window.document.attachEvent("onmouseup",dragOff); } function dragMove(evt){ if (!flag) return; if (window.createPopup){ x = event.x + document.body.scrollLeft; y = event.y + document.body.scrollTop; }else{ x = evt.pageX; y = evt.pageY; } offx = 60; offy = 75; document.getElementById(target).style.top = y-offx+"px"; document.getElementById(target).style.left = x-offy+"px"; return false; } function dragOff(){flag=false;} // --></script></head> <body> <!-- 各メニューで自分自身をドラッグ開始するように，関数を呼ぶ --> <div id="menu1" style="background-color:red; position:absolute; width:120px;height:150px;" >メニュー1</div> <div id="menu2" style="background-color:green; position:absolute;top:200px;width:120px;height:150px;" >メニュー2</div> <div id="menu3" style="background-color:blue; position:absolute;top:400px;width:120px;height:150px;">メニュー3</div> <div id="menu4" style="background-color:yellow; position:absolute;top:200px; left:200px;width:120px;height:150px;">メニュー4</div> </body> </html>
- ベストアンサー
- JavaScript
- colorboxの直接呼び出し方法について
通常、このような感じでjqueryのcolorboxを使ってますが、 （問題なく動きます。） <script type='text/javascript' src='js/jquery.js'></script> <script type='text/javascript' src='js/jquery.colorbox.js'></script> <script> $(document).ready(function(){ $('.colorbox').colorbox({iframe:true, innerWidth:700, innerHeight:430}); }); </script> <li><a href='test2.html' class='colorbox'>test2</a></li> 質問ですが、ipadである場所をクリックしたときに、動作する部分に、動くスクリプト内でカラーボックスを使って表示するところの書き方がわかりません。 <script> document.addEventListener('touchstart',catchTouch, false); function catchTouch(event) { cX =event.touches[0].clientX; cY =event.touches[0].clientY; if(10 <= cX && cX <= 170 && 10 <= cY && cY <= 40){pageScroll('fragment-1');} else if (10 <= cX && cX <= 170 && 650 <= cY && cY <= 680){window.open('order4.html','colorbox');} else if (10 <= cX && cX <= 170 && 690 <= cY && cY <= 720){location.href='call.html';} else if (10 <= cX && cX <= 170 && 690 <= cY && cY <= 720){？？？？？？？？;} } </script> ？？？？？？？？のところに何かを記述して、 <li><a href='test2.html' class='colorbox'>test2</a></li> これの動作と同じ事を実現するにはどのようにしたらよいのでしょうか？
- 締切済み
- JavaScript
- インラインフレーム内の変数を親ページから呼び出す
インラインフレーム内のマウス位置を↓のjavascriptコードで取得しているのですが、親ページのjavascriptの関数で使用したいです。どのようにインラインフレーム内の変数を親ページから呼び出して、利用すればよいのでしょうか？ var x, y; window.addEventListener("DOMContentLoaded", function(){ window.document.onmousemove = function(e){ x = getMousePosition(e).x; } },false); function getMousePosition(e) { var obj = new Object(); if(e) { obj.x = e.pageX; obj.y = e.pageY; } else { obj.x = event.x + document.body.scrollLeft; obj.y = event.y + document.body.scrollTop; } return obj; }
- 締切済み
- 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
- javascriptの条件文
スマホにタッチした時の値を取得するスクリプトです。 よくわからないまま作成してますが、ご勘弁下さい。 <script type="text/javascript"> window.document.addEventListener("touchstart", function(event){ event.preventDefault(); var result = document.getElementById("result"); result.innerHTML = "clientX:"+ event.touches[0].clientX+ "<br>" + "clientY:"+ event.touches[0].clientY; }, true); window.document.addEventListener("touchmove", function(event){ event.preventDefault(); var result = document.getElementById("result"); result.innerHTML = "clientX:"+ event.touches[0].clientX+ "<br>" + "clientY:"+ event.touches[0].clientY; }, true); window.document.addEventListener("touchend", function(event){ event.preventDefault(); var result = document.getElementById("result"); result.innerHTML = ""; }, true); ここまでは正常。 値を取得した、Yを下記のようにしたのですが、 500以上になってもロケーションが実行されません。 間違いなく構文が間違っているのですが、数時間格闘したのですが、わからないので すみませんが、教えて頂けると有難いです。 num = event.touches[0].clientY; if (num >= "500") { location.href = "https://www.google.co.jp/"; } </script>
- ベストアンサー
- JavaScript
- Ｊavascriptの質問です。
Ｊavascriptの質問です。 昨日からjavascriptを始めた初心者なのですが、すみませんが、以下のコードの不具合の訂正をお願いしたいのです。自分なりにあれこれやっては見ましたが、結論が見出せません。 昨日は、id="BOX" の部分を、windowをリサイズしたときに、縦横常に中央に表示させるといったものです。 問題点： (1)windowをリサイズたときに、動かない点 (2)ＤＯＣＴＹＰＥ宣言すると、まったく機能しない。（ＤＯＣＴＹＯＥ宣言とJAVASCRIPTの対応が理解できていないので。。とりあえず、ＤＯＣＴＹＰＥ宣言無しでも機能すればいいかな？と思っております。ＩＥ８とfirefox3での表示を目指しています。） 恐れ入りますがよろしくお願いいたします。 ■ＨＴＭＬ <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無題ドキュメント</title> <link href="css/test1.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> <!-- function changeStyle(y,x) { /*変数トレース*/ document.write("関数CALL\n"); document.write(y+"/"); document.write(x); /*CSSの書き換え（ＣＳＳ）を書き換えると位置をへんこうできるものと思っています。*/ document.getElementById("box").style.marginTop = y; document.getElementById("box").style.marginLeft = x; } // --> </script> <script type="text/javascript"> <!-- function relocate() { window.focus(); /*firefoxのwindowサイズとboxの大きさによりマージンを計算*/ if( 0 != window.innerHeight && window.innerHeight > 960){ y=((window.innerHeight - 960)/2); }else{y=0;} /*ＩＥのwindowサイズとboxの大きさによりマージンを計算*/ if( 0 != window.innerWidth && window.innerHeight >1100){ x=((window.innerWidth - 1100)/2); }else{x=0;} /**/ if( 0 != document.body.clientHeight && document.body.clientHeight > 960){ y=((document.body.clientHeight - 960)/2); }else{y=0;} if(0 != document.body.clientWidth && document.body.clientWidth > 1100){ x=((document.body.clientWidth - 1100)/2); }else{x=0;} /*CSSの変更*/ changeStyle(y,x); } //--> </script> </head> <body onResize="relocate()"> <!-- イベントハンドラセット（リサイズ時にＣＳＳ変更）こちらが問題のようです。 --> <div id="box">123456</div> <!-- 目的のボックス--> <script type="text/javascript"> <!-- /*オンロード時に１度ＣＳＳを変更する。もちらは動作します。*/ relocate(); // --> </script> </body> </html> ■ＣＳＳ @charset "utf-8"; /* CSS Document */ *{ margin: 0px; padding: 0px; } #box { background-color: #FF3300; height: 960px; width: 1100px; border: 100px none #999999; margin-top:0px; margin-left:0px; } よろしくお願いします。
- ベストアンサー
- ホームページ作成ソフト
