Jump to content

Moving Image


garyblackpool
 Share

Recommended Posts

Hi, I do not have a clue where this is going wrong the image is not moving. Its saying a { or ; while searching for the end of file but the line is before the code.Could some one help please thanks.

 <script language="javascript">      var x = 500; //Starting Location - leftvar y = 500; //Starting Location - topvar dest_x = 30; //Ending Location - leftvar dest_y = 30; //Ending Location - topvar interval = 10; //Move 10px every initializationfunction moveimg(){if(x > dest_x) {  x -= interval;} else if(x < dest_x) {  x += interval}if(y > dest_y) {  y -= interval;} else if(y < dest_y) {  y += interval}// Just in case we're closer to the destination than the motion intervalif(Math.abs(dest_x - x) < interval) x = dest_x;if(Math.abs(dest_y - y) < interval) y = dest_y;if (x != dest_x && y != dest_y) {// Repeat the operationdocument.getElementById("picme").style.left = y+'px';document.getElementById("picme").style.top = x+'px';if ((x+interval > dest_x) && (y+interval > dest_y)) {//Keep on calling this function every 100 microsecond// till the target location is reachedwindow.setTimeout('moveimg()',100);}}}  </script>     </head><body onload="moveimg()">   <img src="picme.jpg" id="picme" />  </body></html>

Link to comment
Share on other sites

I'm not getting any errors involving a { or ; character. Maybe there's more code I'm not aware of? Anyway, as is, this code works fine for me.Does your initial call to moveImg() occur AFTER the page loads? The script won't find "picme" if "picme" does not yet exist in the DOM."picme" also needs to be taken out of the document flow. (Assuming you haven't already done that.) Do this in your stylesheet or with a JavaScript assignment. Usually this means position:absolute. position:fixed should also work, and position:relative will get you something, but it's hard to say what without more context. Every animation I remember seeing just sticks with position:absolute.FWIW, your opening script tag should look like this:<script type="text/javascript">The language attribute has been deprecated for many years. This is probably not your problem, however.

Edited by Deirdre's Dad
Link to comment
Share on other sites

Hi no i am not getting the error message now and i am not sure where it was coming from.Sorry but i dont understand what you mean by taking it out of the document flow.When the page loads the image is ment to move.Thanks.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"        "http://www.w3.org/TR/html4/loose.dtd"><html> <head>  <meta name="description" content="Free Web tutorials on HTML, CSS, XML, and XHTML">  <meta name="keywords" content="HTML, DHTML, CSS, XML, XHTML, JavaScript, VBScript">  <title>hello world</title>  <style type= "text/css">   </style>  <script type="text/javascript">  var x = 10; //Starting Location - leftvar y = 10; //Starting Location - topvar dest_x = 4000; //Ending Location - leftvar dest_y = 400; //Ending Location - topvar interval = 10; //Move 10px every initializationfunction moveimg(){if(x > dest_x) {  x -= interval;} else if(x < dest_x) {  x += interval}if(y > dest_y) {  y -= interval;} else if(y < dest_y) {  y += interval}// Just in case we're closer to the destination than the motion intervalif(Math.abs(dest_x - x) < interval) x = dest_x;if(Math.abs(dest_y - y) < interval) y = dest_y;if (x != dest_x && y != dest_y) {// Repeat the operationdocument.getElementById("picme").style.left = y+'px';document.getElementById("picme").style.top = x+'px';if ((x+interval > dest_x) && (y+interval > dest_y)) {//Keep on calling this function every 100 microsecond// till the target location is reachedwindow.setTimeout('moveimg()',100);}}}  </script>     </head><body onload="moveimg()">   <img src="picme.jpg" id="picme" />  </body></html>

Link to comment
Share on other sites

The term 'document flow' refers to the way elements are positioned relative to other elements. Block level elements sit one under the other, inline elements next to each other. If you insert an image inside an element it takes its positioning cues from the element it is inside - even the body. If you give the image position:absolute or fixed, it ignores other elements on the page and sits exactly where you tell it from the edges of the page. To use top, left, right and bottom with any confidence, you need to make sure that the element you're positioning isn't going to be taking cues from other nearby elements.

Link to comment
Share on other sites

Thanks for clarifying that. I got the code from one of my previous posts.have i not continued the opperation currectly?

if(x > dest_x) {  x -= interval;} else if(x < dest_x) {  x += interval}if(y > dest_y) {  y -= interval;} else if(y < dest_y) {  y += interval}// Just in case we're closer to the destination than the motion intervalif(Math.abs(dest_x - x) < interval) x = dest_x;if(Math.abs(dest_y - y) < interval) y = dest_y;if (x != dest_x && y != dest_y) {// Repeat the operation

Link to comment
Share on other sites

Can you post the entire HTML document?Actually, to begin with, your element needs to have "position: absolute" in its CSS to be able to move around:<img src="picme.jpg" style="position:absolute" id="picme" />

Edited by Ingolme
Link to comment
Share on other sites

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"        "http://www.w3.org/TR/html4/loose.dtd"><html> <head>  <meta name="description" content="Free Web tutorials on HTML, CSS, XML, and XHTML">  <meta name="keywords" content="HTML, DHTML, CSS, XML, XHTML, JavaScript, VBScript">  <title>hello world</title>  <style type= "text/css"> #picme{	position:absolute;	top: 10%;	left: 10%;  </style>  <script type="text/javascript">  var x = 10; //Starting Location - leftvar y = 10; //Starting Location - topvar dest_x = 4000; //Ending Location - leftvar dest_y = 400; //Ending Location - topvar interval = 1; //Move 10px every initializationfunction moveimg(){if(x > dest_x) {  x -= interval;} else if(x < dest_x) {  x += interval}if(y > dest_y) {  y -= interval;} else if(y < dest_y) {  y += interval}// Just in case we're closer to the destination than the motion intervalif(Math.abs(dest_x - x) < interval) x = dest_x;if(Math.abs(dest_y - y) < interval) y = dest_y;if (x != dest_x && y != dest_y) {// Repeat the operationdocument.getElementById("picme").style.left = y+'px';document.getElementById("picme").style.top = x+'px';if ((x+interval > dest_x) && (y+interval > dest_y)) {//Keep on calling this function every 100 microsecond// till the target location is reachedwindow.setTimeout('moveimg()',1000);}}}  </script>     </head><body onload="moveimg()">  <div id="picme"> <img src="picme.jpg"  /></div>  </body></html>

Link to comment
Share on other sites

Don't elements have to have inline style attributes to be altered by javascript that way? I'm sure I've tried in the past and failed for that reason...

Link to comment
Share on other sites

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"        "http://www.w3.org/TR/html4/loose.dtd"><html> <head>  <meta name="description" content="Free Web tutorials on HTML, CSS, XML, and XHTML">  <meta name="keywords" content="HTML, DHTML, CSS, XML, XHTML, JavaScript, VBScript">  <title>hello world</title>  <style type= "text/css"> #picme{	position:absolute;	top: 10%;	left: 10%;  </style>  <script type="text/javascript">  var x = 10; //Starting Location - leftvar y = 10; //Starting Location - topvar dest_x = 4000; //Ending Location - leftvar dest_y = 400; //Ending Location - topvar interval = 1; //Move 10px every initializationfunction moveimg(){if(x > dest_x) {  x -= interval;} else if(x < dest_x) {  x += interval}if(y > dest_y) {  y -= interval;} else if(y < dest_y) {  y += interval}// Just in case we're closer to the destination than the motion intervalif(Math.abs(dest_x - x) < interval) x = dest_x;if(Math.abs(dest_y - y) < interval) y = dest_y;if (x != dest_x && y != dest_y) {// Repeat the operationdocument.getElementById("picme").style.left = y+'px';document.getElementById("picme").style.top = x+'px';if ((x+interval > dest_x) && (y+interval > dest_y)) {//Keep on calling this function every 100 microsecond// till the target location is reachedwindow.setTimeout('moveimg()',1000);}}}  </script>     </head><body onload="moveimg()">  <div id="picme"> <img src="picme.jpg"  /></div>  </body></html>

Here's the problem:
#picme{position:absolute;top: 10%;left: 10%;

You're missing a closing brace '}' here

Don't elements have to have inline style attributes to be altered by javascript that way? I'm sure I've tried in the past and failed for that reason...
No, they don't need to be inline unless you want to read them with Javascript. They still will affect the element until Javascript modifies the style attribute which takes precedence. Edited by Ingolme
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...