Question : DHTML moving Image question

Hello

I am tying to move an image to right direction very slowly and then return it back to left also very slowly.
W3Schools has a tutorial, but in the tutorial the movement happens very quickly. The W3Schools url that I am talking about is:

http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_img_hspace

The code is at below, slightly modified by me to show the movement, but the movement happens very fast. How to do the movement slowly so that the image moves to right direction very slowly then comes back to left very slowly.

<html>
<head>
<script type="text/javascript">
function setSpace()
{
document.getElementById("compman").hspace="400";
document.getElementById("compman").vspace="70";
alert("HELLO");
set();
}
function set()
{
document.getElementById("compman").hspace="0";
document.getElementById("compman").vspace="0";

}
</script>
</head>
<body>

<img id="compman" src="http://www.w3schools.com/jsref/compman.gif" alt="Computerman" width="107" height="98" />
<p>Some text. Some text. Some text. Some text.</p>

<input type="button" onclick="setSpace()" value="Set hspace and vspace" />

</body>
</html>

.....................

If you are attending this question, please also try to put your guess, advise, and comment on my other question:
http://www.experts-exchange.com/Programming/Languages/Scripting/AJAX/Q_26415372.html

Answer : DHTML moving Image question

try this

                       
         
           
             1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:

           
           
             <html>
<head>
<script type="text/javascript">
var dir = 1;

function setSpace() {
 var img = document.getElementById("compman");
 var l = img.style.left.replace("px","").replace("pt","");
 if ( l == "200" ) dir = -1;
 if ( l == "0" ) dir = 1;
 img.style.left = l*1 + 5*dir;
  setTimeout("setSpace()", 50);
}
</script>
</head>
<body>

<img id="compman" style="position:relative; left:0" src="http://www.w3schools.com/jsref/compman.gif" alt="Computerman" width="107" height="98" />
<p>Some text. Some text. Some text. Some text.</p>

<input type="button" onclick="setSpace()" value="Set hspace and vspace" />

</body>
</html>

           
         