Posts: 3,368
Threads: 195
Joined: Jan 2003
I can't change the top/left position. It's driving me bonkers. Javascript just sucks so much. Sigh. Help....
Code: <html>
<head>
<script type="text/javascript">
function showstuff(theid)
{
x=event.clientX
y=event.clientY
document.getElementById(theid).style.left = x;
document.getElementById(theid).style.top = y;
}
</script>
</head>
<body>
<div height=500 width=500 left=0 right=0 onmouseover="showstuff('scr1')">
<img src="scroll1.gif" alt="scr1" id="scr1">
</div>
</body>
</html>
Peace cannot be obtained without war. Why? If there is already peace, it is unnecessary for war. If there is no peace, there is already war."
Visit www.neobasic.net to see rubbish in all its finest.
Posts: 2,404
Threads: 153
Joined: Jan 2005
Not bad, but you had HTML errors too:
Code: <html>
<head>
<script type="text/javascript">
var x
var y
function getmouse(event){
x=event.clientX
y=event.clientY
document.getElementById("coords").innerHTML = x +" "+y
}
function showstuff(theid){
document.getElementById(theid).style.left = x
document.getElementById(theid).style.top = y
t=setTimeout("showstuff('scr1')", 50)
}
</script>
</head>
<body onmousemove="getmouse(event)">
<p id="coords"></p>
<div style="position:absolute; left:0; top:0;" alt="scr1" id="scr1" onmouseover="showstuff('scr1')">
<img src="scroll1.gif" />
</div>
</body>
</html>
One, you need to get the mouse coords everytime it moves, just makes it smoother from my experiences with it.. Thus you see I have a func that gets called everytime the move moves in the body.. You also need to pass the event too.. =)
Another thing was, you had: left=0 right=0 ... that needed to be:
Code: <div style="position:absolute; left:0; top:0;"
Also, last one, you need a time out, that way, if the mouse fall off the image (moving to fast, etc) the image stays w/ the mouse and doesn't stop..
My example also shows the mouse coords, so you can sortof see what it's doing.. 
EDIT: Forgot to note, you needed the id in the DIV, not the IMG.. unless you wanted the image to move inside the DIV, which would take position:relative I think, and the style to be applied to the image..  .... Not sure which you was going for..
Enjoy!
Kevin ( x.t.r.GRAPHICS)
![[Image: 11895-r.png]](http://fileanchor.com/11895-r.png)
Posts: 3,368
Threads: 195
Joined: Jan 2003
Thanks!
I love you.
:wow:
Peace cannot be obtained without war. Why? If there is already peace, it is unnecessary for war. If there is no peace, there is already war."
Visit www.neobasic.net to see rubbish in all its finest.
Posts: 2,404
Threads: 153
Joined: Jan 2005
hahaha, welcome! :winkwink:
JS can drive ya nutz at times, but it works well when you figure it out.. :wtnod: ..
Also, if you dev w/ Firefox, it has a error console for it.. makes debugging it faster.. =)
Tools> JavaScript Console
:mrgreen: Good luck with learning JS..
Kevin ( x.t.r.GRAPHICS)
Posts: 719
Threads: 42
Joined: Oct 2005
IE has one too, if you use IE.
\__/)
(='.'=) Copy bunny into your signature to
(")_(") help him gain world domination.
Posts: 3,368
Threads: 195
Joined: Jan 2003
Ok..
How do I have it "unstick" when I release the mouse button? I also would like the "focus" to be on the image. The div is something I added because I thought I'd need it.
Also 2:
document.getElementById('scr1').left + document.getElementById('scr1').style.width
One is in integers, one has a "px" ending (pixels?).. How can I add them together?
Peace cannot be obtained without war. Why? If there is already peace, it is unnecessary for war. If there is no peace, there is already war."
Visit www.neobasic.net to see rubbish in all its finest.
Posts: 1,439
Threads: 15
Joined: Apr 2003
Posts: 2,404
Threads: 153
Joined: Jan 2005
Quote:Ok..
How do I have it "unstick" when I release the mouse button? I also would like the "focus" to be on the image. The div is something I added because I thought I'd need it.
Also 2:
document.getElementById('scr1').left + document.getElementById('scr1').style.width
One is in integers, one has a "px" ending (pixels?).. How can I add them together?
1: You can write the stuff to the image, but to make it so you can click and hold, you need to set the image in the background of a DIV, so it doesn't think you are drag copying the image.... And to get it to unstick from the mouse, you need a function on mouseup to kill the timer loop....
Also, to make width an integer, you simply:
Code: parseInt(document.getElementById('scr1').style.width)
New example, you have to change the image, and reset DIV's width/height for it:
Code: <html>
<head>
<script type="text/javascript">
var t
var x
var y
function getmouse(event){
x=event.clientX
y=event.clientY
document.getElementById("coords").innerHTML = x +" "+y+" "+parseInt(document.getElementById("scr1").style.width)
}
function showstuff(theid){
document.getElementById(theid).style.left = x - (parseInt(document.getElementById("scr1").style.width)/2)
document.getElementById(theid).style.top = y - (parseInt(document.getElementById("scr1").style.height)/2)
t=setTimeout("showstuff('scr1')", 50)
}
function unstick(){
clearTimeout(t)
}
</script>
</head>
<body onmousemove="getmouse(event)">
<p id="coords"></p>
<div style="background: url('apache_pb22.gif'); width:259; height:32; position:absolute; left:100; top:0;" alt="scr1" id="scr1" onmousedown="showstuff('scr1')" onmouseup="unstick()"></div>
</body>
</html>
Kevin ( x.t.r.GRAPHICS)
Posts: 3,368
Threads: 195
Joined: Jan 2003
It doesn't seem to work...
Peace cannot be obtained without war. Why? If there is already peace, it is unnecessary for war. If there is no peace, there is already war."
Visit www.neobasic.net to see rubbish in all its finest.
Posts: 780
Threads: 49
Joined: Dec 2001
Drag 'n drop?
Download a Javascript framework like script.aculo.us, moo.fx, Rico or just work with Prototype and save yourself the trouble of writing something from scratch.
And Javascript is awesome.
And innerHTML is about 4 or 5 times faster than compliant DOM. Which is horrible to use.
|
