- ベストアンサー
初心者なのですが教えてください。
ＨＴＭＬの中に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>
- goku716
- お礼率6% (13/210)
- JavaScript
- 回答数2
- ありがとう数0
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
<html> <body> <script language="JavaScript"> function p(){ var x=event.x-$('im').offsetLeft; var y=event.y-$('im').offsetTop; $('x').value= x; $('y').value= y; if(150<x && x<250 && 150<y && y<250){ $('n').value = $('im').alt='だれ？'; } else { $('n').value = $('im').alt=''; } } function $(o){return document.getElementById(o)} </script> <img src="画像.jpg" width="600" height="400" id="im" onMouseMove="p()"><br> <input type="text" id="x"><input type="text" id="y"><input type="text" id="n"><br> </body> </html>
その他の回答 (1)
- 15mm
- ベストアンサー率65% (65/100)
画像がどんなものかもわからないし、serv.htmlがどういう役割を果たしているのかわからないのですが、 とりあえずやろうとしていることは理解しました（たぶん）。 ですが、人数はどのくらいなのでしょうか。 あまりに多いようですと、条件分岐が異常に多くなるので、 動作が重くなり見るに耐えないものが出来上がってしまうかもしれません。 （下手すると一人につき４回の条件分岐です） ですので、私ならjavascriptで座標を取らずにＨＴＭＬのクリッカブルマップを使用します。 <map id="map"> <area shape="rect" coords="（ここは自分で＾＾；）" href="#" onmouseover="（名前を表示する関数）" onmouseou="名前の表示を消す関数" /> <!--人数によりareaを追加--> </map> よくわからなければクリッカブルマップについて調べてみてください。
