title: Using offsetx and offsettop in JavaScript or position x and positon y
body: <p>I have a slider that starts at click on button and I want every image to be loaded at a offset of <code>200 px</code> in comparison with the previous one. Here is the code:</p>
  
  <pre class="lang-js prettyprint-override"><code>var image1 = new Image()
  image1.src = "img0.jpg"
  var image2 = new Image()
  image2.src = "img1.jpg"
  var image3 = new Image()
  image3.src = "img2.jpg"
  var image4 = new Image()
  image4.src = "img3.jpg"
  var image5 = new Image()
  image5.src = "img4.jpg"
  
  var step = 1
  
  function slideit() {
      document.images.slide.src = eval("image" + step + ".src")
      if (step &lt; 5)
          step++
  
      else
          step = 1
      setTimeout("slideit()", 500)
  
  }
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;button onclick="slideit()"&gt;Try it&lt;/button&gt;
  &lt;img src="img0.jpg" name="slide" width="100" height="100" position = "absolute"&gt;
  </code></pre>
  
  <p>I'd like to do this in  <em>JavaScript</em> as I do not want to use <em>jQuery</em> in my code.</p>