文字を移動させその位置を表示したい

解決済

質問者：flas222
質問日時：2007/09/23 05:14
回答数：1件

複数のプログラムを拝借し組み合わせたのですが、以下3点の内容にしたく質問しました。宜しくお願いいたします。

（１）文字「このオブジェクトが移動します」を移動させその位置を表示したいのですが、マウスの位置が表示されています。
（２）文字「このオブジェクトが移動します」に合わせクリックすると反転表示になりますが反転表示にならないようにしたいです。
（３）動作するのですがエラーが表示されます。エラーの原因は何でしょうか？

<HTML>
<HEAD>
<STYLE type="text/css">

</STYLE>
<SCRIPT language="JavaScript">

</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>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： mizuno3
回答日時：2007/09/24 22:08

とりあえず拝借したページを良く見て、どの部分のプログラムがどのように動くのかを調べるのがいいんじゃないかな？と思いました。

簡単なソースだと思うので、それぞれの場所で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とかだと動く気がします。

- 0
- 件

通報する

この回答へのお礼

ご回答ありがとうございます。（２）は解決しましたが、（１）（３）
は力不足でわかりませんでした。試しに（１）（３）みたいにしましたが、問題解決に至らずどうすればいいのかよくわからないです。
（１）
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')

通報する

お礼日時：2007/09/26 17:39

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！