Click to See Complete Forum and Search --> : Moving an Image in javascript. Plz help
troy1984
10-19-2003, 07:50 AM
Hi there,
I just started programming and am very interested in all the web's got to offer (javascript, html, css etc.). Im making a web page for my father. The page is made in tables. I've got a 'top row', a 'left row' and a 'center row'.
Site looks like this
The top and left "rows" use mouse over buttons for navigation. Now I want that when you click a link (on the mouseover button) that an image goes from a startpoint to the button (move not "appear") So it has got to move across a specified x-as and y-as (..???? right:S) when clicking a button. Does soemone have any script that can do that?? Or can help me out with a little bit of code.?
Thank you in advance....
Greetings,
Troy
Khalid Ali
10-19-2003, 10:40 AM
Whn you click on the button,This is what you will need to do.Get reference to the image,
get its current position,
add or subtract a number from its current value
then set the image location with the new value.
do the above until you get close to the buttons location.
troy1984
10-19-2003, 12:46 PM
Tnks a lot for the fast reply...
But i want the image ( a ball) to slide over there.
I thought of putting the image inside of a <div> and let the layer move from point a to b on OnClick. But I can't figure out how to do that. Thank you in advance.
Greetings,
Troy
BestZest
10-19-2003, 03:35 PM
Try this:
steps = 6 //Higher number: longer time to move
step = 0
function moveTo(x, y) {
targetX = x
targetY = y
xStep = (document.getElementById("ball").style.left - x)/ steps
yStep = (document.getElementById("ball").style.top - y)/ steps
loop = window.setTimeout("move()", 20)
}
function move() {
document.getElementById("ball").style.left += xStep
document.getElementById("ball").style.top += yStep
step++
if(step != steps) {
loop = window.setTimeout("move()", 20)
} else {
step =0
}
}
The div and link should look like this:
<div id="ball" style="..."><img src="ball.gif"></div>
<a href="Javascript: moveTo(200, 300)">Move to 200, 300</a>
If you need me to explain it, just let me know
BestZest
troy1984
10-19-2003, 04:43 PM
Thank you so much for the script. I'll try it right now i'll let you know.
Thanks so much
greetings,
troy
troy1984
10-19-2003, 04:53 PM
I think it is exactly what I'm looking for.
Only when i click the move to 200,300 (<div id="ball" style="..."><img src="ball.gif"></div>
<a href="java script: moveTo(200, 300)">Move to 200, 300</a> ) my browser want's to open a file called java script: moveTo(200, 300).
If you can help me out with this one to it will be great. Ill try to figure it out myself but i'm new with all this but it;s great fun!
Thanks again Zest,
Troy
BestZest
10-21-2003, 01:17 PM
I'm glad I could help, try this:
In the href bit, javascript should be one word, the forums put a space in it for some reason :confused:
BestZest
troy1984
10-22-2003, 01:08 PM
The script doesn't work.
Gives an error on line 20...
Plz help me out 1 more time.
Greetings,
Troy
BestZest
10-23-2003, 12:04 PM
What kind of error is it (eg. syntax)?
Could you post the whole error message please. I didn't test the script before I posted it, so thats why there might be errors
BestZest
troy1984
10-23-2003, 01:39 PM
BestZest:
Thank you for all your help with the scipt I ow you big times. I managed to repgrogram your script (could have never done it without you) to make it work. But there still is one problem... I want the image to move only over the X and Y axis (don't now how you say that in english) i mean in a horizontal and vertical position only and not across the screan if you know what i mean. And if it is possible there is a curve in my lay out (I've uploaded my design on www.trespassersw.nl/scm (I want the ball to slide over the dark blue line)).
The script I'm now using looks like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
</head>
<body>
<div id="ball" style="position:absolute;"><img src="ball.gif"></div>
<a href="javascript: moveit(400, 100)">About</a> <a href="javascript: moveit(500, 100)">news</a> <a href="javascript: moveit(610, 100)">Sitemap</a> <a href="javascript: moveit(720, 100)">Contact</a>
<br> <a href="javascript: moveit(140, 192)">Why ADF</a>
<script language="JavaScript" type="text/javascript">
step = 1;
startX = 100;
startY = 200;
currentX = startX;
currentY = startY;
function initialize()
{
//Start positions
document.getElementById("ball").style.left = startX;
document.getElementById("ball").style.top = startY;
}
function moveit(x, y)
{
if (currentX < x)
{
document.getElementById("ball").style.left = currentX + step;
currentX = currentX + step;
}
if (currentX > x)
{
document.getElementById("ball").style.left = currentX - step;
currentX = currentX - step;
}
//-----
if (currentY < y)
{
document.getElementById("ball").style.top = currentY + step;
currentY = currentY + step;
}
if (currentY > y)
{
document.getElementById("ball").style.top = currentY - step;
currentY = currentY - step;
}
if ( (currentX != x) || (currentY != y)) setTimeout("moveit("+x+","+y+")",1);
}
initialize();
</script>
</body>
</html>
Thank you for all your effort and your time BestZest...
I'm very gratefull. Tnx a lot... again.
Greetings,
Troy
troy1984
10-24-2003, 07:52 PM
PS The curve is not the most inportant thing in the world fot me right now. A friend told me that I must disable the ("Z-axis"??) or something like that. If you can help me with this it would be great. Tnx a milion times,
Troy
BestZest
10-25-2003, 11:41 AM
The curve would be bl*ody hard to program. You would need to either hard code it (typing in all the coords that the ball is moved through) or do it dynamicly which would involve cos and sin functions. A search on google should give you some paths to follow.
Is this what your trying to say about X and Y coords: you don't want the ball to go diagonally across the page, you want it to follow the blue line.
Let me know while I think about it. :rolleyes:
BestZest
troy1984
10-25-2003, 01:21 PM
Hi BestZest...
Yes exactly I don't want the ball to go diagonally across the page! Thats te (most) important thing for me, the curve is an extra, i'll see about that later.
Thanks again for all your time and effort.
Greetings,
Troy
troy1984
10-31-2003, 06:19 AM
Someone plz help me out...
troy1984
10-31-2003, 09:49 AM
Ive postet a script that let's an layer follow the mouse only over the x an y coords. Thats exactly what i want to do with my code. Maybe some one can edit my code with the help of this mousetracker code.
// horizontal and vertical lines to move the ball over
xmin=100;
ymin=100;
// current page
xpage=500;
ypage=100;
maxstep=25;
nstep=10;
stime=10;
x=xpage;
y=ypage;
xmouse=xpage;
ymouse=ypage;
function whatbrowser() {
if(document.layers){
thisbrowser="NN4";
}
if(document.all){
thisbrowser="ie"
}
if(!document.all && document.getElementById){
thisbrowser="NN6";
}
return thisbrowser;
}
function movex(xpos){
if(document.layers){
document.ball.left=xpos;
}
if(document.all){
document.all.ball.style.left=xpos;
}
if(!document.all && document.getElementById){
document.getElementById("ball").style.left=xpos+"px";
}
}
function movey(ypos){
if(document.layers){
document.ball.top=ypos;
}
if(document.all){
document.all.ball.style.top=ypos;
}
if(!document.all && document.getElementById){
document.getElementById("ball").style.top=ypos+"px";
}
}
function moveball(){
dx=Math.round((xmouse-x)/nstep);
dy=Math.round((ymouse-y)/nstep);
if(dx==0) {dx=xmouse-x;}
if(dy==0) {dy=ymouse-y;}
if(dx>maxstep) {dx=maxstep;}
if(dx<-maxstep) {dx=-maxstep;}
if(dy>maxstep) {dy=maxstep;}
if(dy<-maxstep) {dy=-maxstep;}
if (y==ymin && dx!=0) {x=x+dx; movex(x);}
if (x==xmin && dy!=0) {y=y+dy; movey(y);}
id = window.setTimeout("moveball();",stime);
}
function MoveHandler(e){
xm = e.pageX;
ym = e.pageY;
if (xm<0 || ym<0) {
xm=xpage;
ym=ypage;
}
if (xm<xmin) {xm=xmin;}
if (ym<ymin) {ym=ymin;}
xmouse=xm; ymouse=ym;
if (xm>xmin && ym>ymin) {
xmouse=xpage;
ymouse=ypage;
}
return true;
}
function MoveHandlerIE() {
xm = window.event.x + document.body.scrollLeft;
ym = window.event.y + document.body.scrollTop;
if (xm<0 || ym<0) {
xm=xpage;
ym=ypage;
}
if (xm<xmin) {xm=xmin;}
if (ym<ymin) {ym=ymin;}
xmouse=xm; ymouse=ym;
if (xm>xmin && ym>ymin) {
xmouse=xpage;
ymouse=ypage;
}
}
// track mouse movement
if (whatbrowser()=="NN4") {
document.captureEvents(Event.MOUSEMOVE);
document.onMouseMove = MoveHandler;
} else {
document.onmousemove = MoveHandlerIE;
}
// start animation
movex(x);
movey(y);
moveball();
-------------------
Someone plz help me!!
Thank you so much
Do you still need the curve.
Use the sin/cos functions, if you want i can knock up a code for you that'll do this?
demo
troy1984
10-31-2003, 04:57 PM
YEAH !!!
Man if you can do that it would be just GREAT!!!
Thank you so much for helping me!!
Greetings,
Troy
troy1984
11-02-2003, 07:04 AM
That's great man!!
But is it possible to make it work like this:
I want that when i click on a button the image moves to a certain position (under of next to the link).
Thank you 1.000.000 times for saving me man.
Greetings,
Troy
troy1984
11-02-2003, 07:14 AM
Yes... If possible.
Thanks man,
Greetings,
Troy
troy1984
11-02-2003, 09:45 AM
Thank you for all the help,
But this isnt exactly what i ment. I should explain myself better. I'm sorry:
I dont want the bal to move in a cycle (/loop),
I want the ball to start at a certain position (under home) and then if i click on a button (in the top or left) to slide the ball over there (following the blue line).
I'm sorry for not being more specific before and I really appreciate all your help and effort.
Thanks for everything Mr J,
Greetings,
Troy
troy1984
11-02-2003, 09:49 AM
If you take a look at www.trespassersw.nl/scm and you click on one of the links (About news Sitemap Contact
Why ADFt ) I made under the picture of the macnefying glass (don't know the spelling im sorry) (so not the buttons on the top) and click them the ball slides over the top frame. I want this to happen on the left buttons to (following the blue line and going round the curve as you did in the firts example)
Thank you again,
Greetings,
Troy
hi there,
what you are saying is that you want the ball to follow the blue line to the desired place yes and that follows the curve of the corner?
i have written a script that does that, i'll upload it onto a website so i know that it works for you.
regards,
demo
troy1984
11-02-2003, 01:18 PM
Thanks man that would be great.
I cant wait :D
Let me know,
Greetings
Yeh hi,
it will be ready in about half an hour, i am just setting the coordinates etc. i'll post the url for it then.
demo
troy1984
11-02-2003, 01:42 PM
Tnx man Luv' ya!
ok here it is,
follow this url http://curveball.20m.com
tell me if you like it,
cheers,
demo
troy1984
11-02-2003, 02:08 PM
:D:D:D:D::D:D:D:D
Man I'm almost crying right now!!
THATS IT
1.000.000 x Thanks
I ow you big times.
Luv ya!
Troy
its alright
if you need anything else just ask
demo
troy1984
11-03-2003, 08:42 AM
There's only one thing:
If i turn up the steps (to make the ball go faster), it gows slower when it goes around the curve.
Is there something else i need to modify for the speed around the curve?
Thanks demo.
Troy
troy1984
I've put mine on the shelf while you work with Demos script.
But I think I've cracked it though.
Adjustable top positions
Adjustable left positions
Adjustable radius size
Independant speeds on straights and radius
There is still a little bug in there (just a small quirky thing ya'know) but is eluding me at the moment so taking a break from it might refresh my braincells enough to spot it.
:cool:
troy1984
11-03-2003, 09:44 AM
Whoooh, tnx a lot mr J
Do you think you can edit it and upload/attach/email it or something. Thanks a lot.
Troy
troy1984
11-03-2003, 11:20 AM
Tnx a lot man. I can use both of your scripts on different pages :D. This ones great mr J. I still like to know from Demo how i can make the ball go faster on his version of the script.
Thank you 1.000.000 times BestZest, Mr J and Demo.
You have no idear how much you guys helped me!
hi sorry for being a bit slow,
to make it go the same speed as the rest i have changed it a bit so just relace the 'curve' function with this one:
function curve(way,cnt,x,y,url){
if(way=="up"){
document.getElementById("ball").style.top = curve_coords[cnt];
document.getElementById("ball").style.left = cnt+140;
cnt+=step;
if(cnt<40){setTimeout("curve('"+way+"',"+cnt+","+x+","+y+",'"+url+"')",1);}else{setTimeout("moveit("+x+","+y+",'"+url+"')",1);}
}
if(way=="down"){
document.getElementById("ball").style.top = curve_coords[cnt];
document.getElementById("ball").style.left = cnt+140;
cnt-=step;
if(cnt>0){setTimeout("curve('"+way+"',"+cnt+","+x+","+y+",'"+url+"')",1);}else{setTimeout("moveit("+x+","+y+",'"+url+"')",1);}
}
}
and it should work fine now. let me know when its all finished so i can see it,
demo
troy1984
11-03-2003, 02:05 PM
I replaced the function and it works :D.
Only now sometimes the ball just "flips out". When i click a few links in a short period of time it just shocks and doest move.
If you can help me out with this one to it could be great Demo.
Thanks again
dolphin
11-04-2003, 01:42 PM
ok i have edited it and attached in in a text file. i hope this is satisfactory for you now.
demo
troy1984
11-04-2003, 01:53 PM
It always was demo ;)
Thanks so much for everything.
I'll let you know how it works out.
Troy
troy1984
11-04-2003, 04:20 PM
Demo what did I do wrong?
Your scrips works fine but when i try to implent it i goes wrong...
http://www.trespassersw.nl/rask/externaljs.rar
Plz help me out one more time,
Thanks again demo
troy1984
11-05-2003, 02:18 AM
Sometimes it does open the url after and sometimes is doesn't. It's the same in your script aswell. It doesn't make sence to me.
Thanks again
Troy
whats wrong with the script?
troy1984
11-05-2003, 04:34 PM
It doesn't make sence;
Sometimes it does open a link after the ball slides sometimes it doesn't .
Then it opens everything then nothing....
:S Confused... :(
Plz help me out for the 1.000.000th time
Troy
can you show me the example of the script on webpage so i can hav a look.
troy1984
11-06-2003, 12:54 PM
http://www.trespassersw.nl/rask/externaljs.rar
Here it is.
It's in an internal and external js file (2 different html pages)
I want to use (if possible) the external js file.
Tnx demo,
Troy
troy1984
11-08-2003, 05:50 AM
Hi Demo,
Did I do something wrong or is it the script??
Greetings,
Troy
troy1984
11-10-2003, 04:59 AM
Ok now I'm getting desperd.
Demo do you think it is still possible for your script to work??
Or MR J. How can I make the image move "smooth" around the curve??
Please help me out this last time guys after that I can finally use the script and finish my web site.
Thanks in advance,
Greetings,
Troy
Whos script are you referring to?
troy1984
11-10-2003, 01:50 PM
Demo's script is good with the curve, but it doesnt open my pages at all. Your script works fine only the image doesn't go smooth around the curve. If you can make the curve go smooth I can use your script, if demo can make his links go work I can use his. I love both of your scripts but i just want 1 to work proper so i can implent it on my website.
Thank you both so much for making time to help me with this.
Greetings,
Troy
make sure that 'goURL' is set to true.
demo
Go to this link
www.huntingground.freeserve.co.uk/style/lyr_rad.htm
and tell me how this performs.
troy1984
11-10-2003, 04:07 PM
The curve doesn't go smooth here.
I tested on
Windows/Mac/linux
Netscape
Internet Explorer
Mozilla
When it goes around the curve it "shocks" a little bit on all browsers :S
troy1984
11-10-2003, 04:19 PM
And Demo the 'goURL' is set to true!!
That's why it doesn't make any sence.
You can see it for yourself if you download my example:
www.trespassersw.nl/rask/demoscript.zip
Thanks for the help guys,
Greetings
Troy
Sorry Troy1984 but it goes pretty smooth on my IE6 and Mozilla
tried it with your page and it looks ok
troy1984
11-12-2003, 03:17 AM
I'm sorry I tested the script on multiple pc's.
Can someone plz give a second opinion????
Greetings,
Troy
troy1984
11-16-2003, 01:58 PM
Someone... plz
troy1984
11-20-2003, 02:53 AM
Plz Demo or anyone help me out with the script. We came so far it would be sad not to finish it.
Plz help me out this last time.
Troy