Move an image with Javascript and see the actual movement (please help !)

rigaleb · 08-13-2009, 05:06 PM

Hi, I'm a beginner in web programming so please, don't mind if this might look as a dum request.
I need an image to move from outside the viewed space, from somwhere on the page where users cannot hav acces, let's say from x position of -439px to 0px, so that the image looks like entering the window. And I need to do this after the user clicks a piece of text that is already on the screen. How can I do that ? In what tag should I include the image ? where should I put de event handler/ listener ? I know I need to change the CSS atributes but how.
I tried this and it didn't work in Firefox nor in IE.

Code:

THE HTML FILE

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Greenbrain</title>
<script language="javascript" type="text/javascript" src="greenbrain.js"></script>
<link rel="stylesheet" type="text/css" href="greenbrain.css">
</head>
<body>   
   <div id=int; onClick="intr()"> <h1 class="intrare">INTRARE</h1> </div>
   <div id=img_intrare> <img src="soare.png"; class="soare"> </div>
</body>
</html>


THE .CSS FILE
body {background-image:url(fondhome.png); position:fixed;}
img.soare {position:absolute; left:-459px; top:100px; z-index:1;}
h1.intrare {z-index:2}


THE .JS FILE

function intr()
{
	var x, xi;
	x=0;
	xi=document.getElementById('img_intrare').style.left;
	if(xi!=x) {document.getElementById('img_intrare').style.left = x + "px"}  
}

ps: i've been trying for 4 days now to find out how to do this, the answer might be just under my nose but then, my nose would be to big and pidgeons would come and sit on it...

Philip M · 08-13-2009, 05:26 PM

This may help:-

Code:

<p id = "p1"  onclick = "moveRight()">Some text here for you to click on</p>

<script type="text/javascript">

var userWidth = window.screen.width;
function moveRight() {
var pp = document.getElementById("x");
var lft = parseInt(pp.style.left);
var tim = setTimeout("moveRight()",20);  // 20 controls the speed
lft = lft+5;  // move by 5 pixels
pp.style.left = lft+"px";
if (lft > userWidth + 10) {  // left edge of image past the right edge of screen
pp.style.left = -200;  // back to the left
clearTimeout(tim);
}
}


</script>

<img src="one.gif" id="x" style="position:relative;top:10px;left:-200px;"><br>

“Live like a candle which burns itself, yet gives light to others. Look backwards with gratitude, forward with hope, and upwards with confidence."

rigaleb · 08-13-2009, 05:49 PM

Ok, so I got this

Code:

<body>   
   <p id = "intrare"  onclick = "moveRight()">INTRARE</p>
   <img src="one.gif" id="soare" class="sun">
</body>

var userWidth = window.screen.width;
function moveRight()
{
	var pp= document.getElementById("soare");
	var lft = parseInt(pp.style.left);
	var tim = setTimeout("moveRight()",50);
	lft = left+50;
	pp.style.left = lft+"px";
	if (lft > userWidth + 439)
{
	pp.style.left = -878;  
	clearTimeout(tim);
}
}

Nothing happens in firefox and when I click the text in IE I get an "error on page" message in the status bar. What's wrong ?

Philip M · 08-13-2009, 06:09 PM

Works fine for me.

Code:

<p id = "intrare"  onclick = "moveRight()">INTRARE</p>
<img src="one.gif" id="soare" style="position:relative;top:10px;left:-200px; "><br>
<script type="text/javascript">

var userWidth = window.screen.width;
function moveRight() {
var pp = document.getElementById("soare");
var lft = parseInt(pp.style.left);
var tim = setTimeout("moveRight()",50);  // 50 controls the speed
lft = lft+50;  // move by 50 pixels
pp.style.left = lft+"px";
if (lft > userWidth + 439) {  // left edge of image past the right edge of screen
pp.style.left = -878;  // back to the left
clearTimeout(tim);
}
}

</script>

You must specify the style position in the img src.

rigaleb · 08-13-2009, 06:39 PM

GOOOOD. It worked ! Thanks. Now, another problem..

how do I make it stop at one point in it's trajectory and remain there ? Should i put a while loop ?that counts the "left" attribute ?

Philip M · 08-13-2009, 06:56 PM

Quote:

Originally Posted by rigaleb

GOOOOD. It worked ! Thanks. Now, another problem..

how do I make it stop at one point in it's trajectory and remain there ? Should i put a while loop ?that counts the "left" attribute ?

Code:

pp.style.left = lft+"px";
if (lft > 500) {
clearTimeout(tim);

rigaleb · 08-13-2009, 07:15 PM

And another thing: when i put the stylesheet in a separate .css file, the whole thing stops functioning. WHY ?

rigaleb · 08-13-2009, 08:32 PM

How do I make 2 images move at the same time ?