- 締切済み
文字を移動させその位置を表示したい
複数のプログラムを拝借し組み合わせたのですが、以下3点の内容にしたく質問しました。宜しくお願いいたします。 （１）文字「このオブジェクトが移動します」を移動させその位置を表示したいのですが、マウスの位置が表示されています。 （２）文字「このオブジェクトが移動します」に合わせクリックすると反転表示になりますが反転表示にならないようにしたいです。 （３）動作するのですがエラーが表示されます。エラーの原因は何でしょうか？ <HTML> <HEAD> <STYLE type="text/css"> </STYLE> <SCRIPT language="JavaScript"> <!-- var target; var isDrag=0; function document_onmousedown(){ isDrag=1; target=event.srcElement;} function document_onmousemove(){ if( isDrag ){ target.style.top=event.clientY-8; target.style.left=event.clientX-8;} } function document_onmouseup(){ isDrag=0; sample.style.top=text1.style.top; sample.style.left=text1.style.left; } document.onmouseup = fOnmousemove; function fOnmousemove() { sClientX.value = event.clientX; sClientY.value = event.clientY; } //--> </SCRIPT> </HEAD> <BODY onmousemove="document_onmousemove()" onmousedown= "document_onmousedown()" onmouseup="document_onmouseup()"> <DIV style="position:relative" id=sample> このオブジェクトが移動します </DIV> <DIV id="test" id=text1 style="position:absolute;font-size:24px; cursor:hand"> </DIV> <SCRIPT language="JavaScript"> </SCRIPT> clientX=<input type="text" id="sClientX"><br> clientY=<input type="text" id="sClientY"><br> </BODY> </HTML>
- JavaScript
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- みずの（@mizuno3）
- ベストアンサー率73% (192/263)
とりあえず拝借したページを良く見て、どの部分のプログラムがどのように動くのかを調べるのがいいんじゃないかな？と思いました。 簡単なソースだと思うので、それぞれの場所でalertなどを使って、どのような値が入っているのかを調べるといいと思います。 >（１）文字「このオブジェクトが移動します」を移動させその位置を表示したいのですが、マウスの位置が表示されています。 event.clientXはイベント発生時のマウス座標を取っています。 オブジェクトの位置を知りたい場合は object.style.leftやobject.style.topなどになります。（positionがabsoluteの場合） positionがrelativeになっているので、親のオブジェクトの位置も取得する必要があると思いますので、簡単にposition:absoluteに変えてしまった方がいいんじゃないかと思います。 >（２）文字「このオブジェクトが移動します」に合わせクリックすると反転表示になりますが反転表示にならないようにしたいです。 反転表示になりませんでした。(IE7) >（３）動作するのですがエラーが表示されます。エラーの原因は何でしょうか 20行目のsampleというobjectが未定義というエラーだと思います。 sampleは document.getElementById('sample')などとしてObjectを正しく取得した方がいいと思います。 IE6とかだと動く気がします。
関連するQ&A
- 「nullまたはオブジェクトではありません」というエラーが出ます。
こんにちは、IE7、VISTAで試しています。 エラーもなく動いたのですが、 sClientXとsClientYの値をフォームメールでデータ送信したくて clientX=<input type="text" id=sClientX><br> clientY=<input type="text" id=sClientY><br> という部分を<form>内に入れると 「sClientXはnullまたはオブジェクトではありません」 というエラーが出ます。 エラーの原因はなんでしょうか？ <HTML> <HEAD> <SCRIPT language="JavaScript"> <!-- var sample; var sClientX; var sClientY; var target; var isDrag=0; function document_onmousedown(){ isDrag=1; target=event.srcElement;} function document_onmousemove(){ if( isDrag ){ target.style.top=event.clientY-8; target.style.left=event.clientX-8;} } function document_onmouseup(){ isDrag=0; sClientX.value = document.getElementById('sample').style.left; sClientY.value = document.getElementById('sample').style.top; } document.onmouseup = fOnmousemove; function fOnmousemove() { } //--> </SCRIPT> </HEAD> <BODY onmousemove="document_onmousemove()" onmousedown= "document_onmousedown()" onmouseup="document_onmouseup()"> <DIV style="position:absolute" id=sample> このオブジェクトが移動します </DIV> <DIV id=text1 style="position:absolute;font-size:24px; cursor:hand"> </DIV> <form> clientX=<input type="text" id=sClientX><br> clientY=<input type="text" id=sClientY><br> </form> </BODY> </HTML>
- ベストアンサー
- JavaScript
- 画像をドラッグ＆ドロップで移動したい
画像をドラッグ＆ドロップで移動したいのですが、 DIV内でテキスト文だと移動できるのですが、画像だけだと移動できません（テキスト文と画像を入れるとテキスト文と一緒に画像が移動しますが、テキスト文なしの画像だけで移動させたいです。） 何故、画像だけでドラッグ＆ドロップで移動させることができないのでしょうか？画像だけで移動させるにはどうしたらいいでしょうか？ 宜しくお願いいたします。 IE7です。 <HTML> <HEAD><TITLE>画像をドラッグ＆ドロップで移動したい</TITLE> </HEAD> <SCRIPT language="JavaScript"> var target; var isDrag=0; function document_onmousedown(){ isDrag=1; target=event.srcElement;} function document_onmousemove(){ if( isDrag ){ target.style.top=event.clientY; target.style.left=event.clientX;} } function document_onmouseup(){ isDrag=0; //alert(text1.style.top); //alert(event.srcElement); } </SCRIPT> <BODY onmousemove="document_onmousemove()" onmousedown= "document_onmousedown()" onmouseup="document_onmouseup()"> <DIV style="position:absolute;font-size:24px;cursor:hand; "> <img src="画像.gif"> </DIV> <BR> <BR></BODY></html>
- ベストアンサー
- JavaScript
- 移動できる顔文字とマウスポインタとのズレが生じる
顔文字をマウスポインタで移動できるようにしたのですが、 画面上では問題ないのですが画面下の方に移動させると顔文字とマウスポイントの位置が重ならず距離が生じてしまいます。マウスポイントと顔文字が重なって移動するようにするにはどうすればいいでしょうか？ 宜しくお願いいたします。 <HTML> <HEAD><TITLE>オブジェクトをドラッグ＆ドロップで移動したい</TITLE> </HEAD> <SCRIPT language="JavaScript"> var target; var isDrag=0; function document_onmousedown(){ isDrag=1; target=event.srcElement;} function document_onmousemove(){ if( isDrag ){ target.style.top=event.clientY-8; target.style.left=event.clientX-8;} } function document_onmouseup(){ isDrag=0; } </SCRIPT> <BODY onmousemove="document_onmousemove()" onmousedown= "document_onmousedown()" onmouseup="document_onmouseup()"> <DIV id=text1 style="position:absolute;font-size:24px; cursor:hand"> (^ ^; </DIV> <BR> <BR> <BR> <BR>a <BR>a <BR>a <BR>a <BR>a <BR>a <BR>a <BR>a <BR>a <BR>a <BR>a <BR>a <BR>a <BR>a <BR>a <BR>a <BR>a <BR>a <BR>a <BR>a <BR>a <BR>a <BR>a <BR>a <BR>a <BR>a <BR>a <BR>a <BR>a <BR>a <BR>a <BR>a <BR>a <BR>a <BR>a <BR>a <BR>a <BR>a <BR>a <BR>a <BR>a <BR>a <BR>a <BR>a <BR>a <BR>a <BR>a <BR>a </body> </HTML>
- ベストアンサー
- JavaScript
- メニュー3つとも個々にドロップして移動したいのですが
メニュー3つとも個々にドロップして移動したいのですが、どのように すれば良いのでしょうか。 お願いします。 <html> <head> <title>ドラッグして画像を移動する</title> <script type="text/javascript"><!-- //2つ適応 window.onload=function(){ flag = false; offx = 80; offy = 100; document.getElementById("menu1").onmousedown= function dragOn(){ flag = true;} window.document.onmousemove = dragImg; window.document.onmouseup = dragOff; function dragOff(){ flag = false; } function dragImg(){ if (!flag) return; document.getElementById("menu1").style.top = event.y-offx; document.getElementById("menu1").style.left = event.x-offy; return 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> </body> </html>
- ベストアンサー
- JavaScript
- addEventListnerについて
最近、Javascriptを用いたイベントドリブンな表現をしているサイトが目立ちます。これについて、どのように実装しているのか自分なりに調べてみたところ、多くのプログラマーのBlogの記事に「addEventListner」という単語が見られました。これについては、イベントを登録するための関数である、ということは把握しているのですが、これを使う理由は何でしょうか？普通に var target = document.getElementById("target"); target.onmousemove = function(){}; target.onmousedown = function(){}; target.onmouseup = function(){}; で良いと思うのですが。
- ベストアンサー
- JavaScript
- 【Javaxcript CSS】擬似フレームサイズをマウスで変更したい
擬似フレームのサイズをマウスで変更したいです。 以前「CSSで指定したwidthをマウスで変更したい」 （http://oshiete1.goo.ne.jp/qa3849904.html） で質問し、頂いたズバリ回答（以下）で実現できるのですが、使っているとマウスが時々くっついてしまいます。 これは、しょうがない問題と諦めていたのですが、なんとかならないものでしょうか？ <html> <head> <style type="text/css"> #f1 { float:left; width:20%; overflow: auto; background-color : #ffd2ff; } #f2 { float:right; width:80%; background-color : #e0fef8; } #space { float:left; width:5px; background-color : #ffffff; cursor:E-resize; } </style> </head> <body> <script> window.onload = function(){ var Drag = 0, i = function(id){ return document.getElementById(id) }; i('space').onmousedown = function(){ Drag = 1; } document.onmouseup = function(){ Drag = 0; } document.onmousemove = function(e){ if(!Drag){ return false; } var ev = window.event || e; var W = document.body.offsetWidth || document.documentElement.offsetWidth; var L = parseInt( ev.clientX/W *100, 10); var R = 100 - L; if(L >1 && R > 1){ i('f1').style.width = L + '%'; i('f2').style.width = R + '%'; } } } </script> <div id="f1">f1</div> <div id="f2"> <div id="space"> </div> f2</div> </body> </html>
- ベストアンサー
- 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
- Ajaxを使いonMouseoverで説明表示をする
以下の場合、opentext を直接開けば普通に開くのですが、 getPage で開くとエラーになってしまいます。 いろいろ試した結果 event.clientX がある場合エラーになるようです。 エラーがなく表示できるようになりませんでしょうか。 （文字数制限のためDIVタグ省略） function opentext(settxt){ divid="tiptext"; if(document.all){ d_div=document.all(divid); rx = event.clientX + document.body.scrollLeft +set_x; //rx = 100; ry = event.clientY + document.body.scrollTop +set_y; //ry = 100; }else{ d_div=document.getElementById(divid); rx = NNX + set_x; ry = NNY + set_y; } if(settxt){ d_div.style.display="block"; d_div.style.left = rx +"px"; d_div.style.top = ry +"px"; d_div.innerHTML = settxt; }else{ d_div.style.display="none"; d_div.innerHTML = ""; } } function MouseXY(NNevent){ NNX = NNevent.pageX; NNY = NNevent.pageY; } window.onmousemove = MouseXY;/* himajin.moo.jp */ function getPage(pageURL) { xmlhttp = createXMLHttp(); if (xmlhttp) { xmlhttp.onreadystatechange = setPageData; xmlhttp.open('GET', pageURL); xmlhttp.send(null); }else{ alert("XMLHttpRequest失敗"); } } function setPageData() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { //alert("XMLHttpRequest成功"); opentext([xmlhttp.responseText]); } } // XMLHttpsオブジェクト作成 function createXMLHttp() { try { return new ActiveXObject ("Microsoft.XMLHTTP"); }catch(e){ try { return new XMLHttpRequest(); }catch(e) { return null; } } return null; }
- ベストアンサー
- JavaScript
- ブロック要素の横スクロールバーのカスタマイズ（画像）
既に質問を書きましたがつまづいているので書き直します。 ブロック要素の横スクロールバーを画像にしたいです。 http://www.apple.com/jp/mac/ の上のメニューみたいに横にスライドし、スクロールバーを画像にしたいのです。 ボタンをクリックして任意の位置に飛ぶスライドはすでにすでにできています。 スクロールバーを動かすと、ブロック要素のなかをスクロールすることができましたが、以下の方法がわかりません。 1. スクロールバーを中央揃えの幅の決まったエリア内だけを移動させたい。 （スクロールバーをクリックするとウィンドウの一番左にいってからマウスストーカーしはじめ、かつ、またウィンドウをクリックしないとマウスストーカーが終了しない。） 2. スライドバー以外のスライドエリアをクリックするとそこにスライドバーがスライドインするようにしたい。 3. アンカーに飛ばすボタンをクリックし任意の位置にスライドする際、スライドバーも同期させたい。 現在の記述は以下の通りです。 <script language="JavaScript"> var timeout; var x = 0; var step = 5; var icoX = 0; // アイコンの位置 var mouX = 0; // マウスの位置 function down(){ if (x < 0){x=0;} var e=document.getElementById("scrollarea"); if(e.scrollLeft<e.scrollWidth-e.offsetWidth){ sbar.style.pixelLeft=x; e.scrollLeft = x; x = x + step; timeout=setTimeout("down()",2); } } function up(){ if (x >=0 ){ document.getElementById("scrollarea").scrollLeft = x; sbar.style.pixelLeft=x; x = x - step; } timeout=setTimeout("up()",2); } document.onmousemove = onMouseMove; function onMouseMove(e) { mouX = event.clientX; } function onTimer() { icoX += (icoX < mouX) ? 1 : -1; sbar.style.left = icoX + "px"; document.getElementById("scrollarea").scrollLeft = sbar.style.pixelLeft; timeout=setTimeout("onTimer()",2); } function stop1(){ clearTimeout(timeout); } document.onmouseup=stop1; </script> //bodyタグの中のスライドを実装したい部分 <div id="my-glider"> <div class="scroller" style="height: 188px; width:864px;overflow:hidden;" id="scrollarea"> //ここに内容がはいります。長いので省略します。 <table width="860" height="16" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="16"><img src="images/left.gif" width="16" height="16" onMouseDown="up()"></td> <td width="828" bgcolor="#666666"><div id="sbar" style="position:absolute;margin-top:-8px;"><img src="images/hscrollerdex.png" width="100" height="15" onMouseDown="onTimer()" onMouseUp="stop1();"></div></td> <td width="16"><img src="images/right.gif" width="16" height="16" onMouseDown="down()"></td> </tr> </table> </div> </div> javascript初心者です・・・。 アドバイスよろしくおねがいします。
- 締切済み
- JavaScript
- 他のサイトでは動くのに、gooでは動かない、なぜ？？
マウスストーカーですが、他のサイトでは動きます（確認済み）が ウェブのgooのmainに貼り付けたら動きません、何故ですか？ なお、ソースファイルは本より取り込みました。 -----[SRCE]----- <SCRIPT language='JavaScript'> str_x=0; str_y=-100; pn=1; var numb=35; for(i=0; i<=numb; i++) { document.write('<SPAN ID=MS'+i+' CLASS=stalker STYLE=position:absolute;left:-100;top:-100px;><IMG SRC=http://userimage.gaiax.com/***/**/**.gif></SPAN>'); } function Imagemove(){str_x=document.body.scrollLeft+window.event.clientX; str_y=document.body.scrollTop+window.event.clientY; } document.onmousemove=Imagemove; function stalker(){document.all['MS'+pn].style.top=str_y+10; document.all['MS'+pn].style.left=str_x+10;pn=pn%numb+1; setTimeout('stalker()'); } window.onload=stalker </SCRIPT> -----[EOF]----- よろしくお願いいたします。 公開されますから、ＵＲＬの１部のディレクトリーと ファイル名は**に置き換えています。
- ベストアンサー
- JavaScript
お礼
ご回答ありがとうございます。（２）は解決しましたが、（１）（３） は力不足でわかりませんでした。試しに（１）（３）みたいにしましたが、問題解決に至らずどうすればいいのかよくわからないです。 （１） sClientX.value = event.clientX; sClientY.value = event.clientY; ↓ sClientX.value = text1.style.top; sClientY.value = text1.style.left; （２） position:absoluteにしたことで反転表示はなくなりました。 （３） var sample=document.getElementById('sample')