title: Changing CSS URL for pointer cursor (using Javascript)
body: <p>I asked a question yesterday <a href="https://stackoverflow.com/questions/43394095/change-cursor-image-css-url-using-javascript">here</a> about having a cursor that changes regularly using javascript, to make it look animated. I got a great answer (Thank you Shiva!). I've now been trying to get two different 'animated' cursors, one for the 'auto' cursor, and a different one for the 'pointer' cursor.</p>
  
  <p>I tried it lots of different ways, but just can't work it out (I must admit,  I'm completely new to this - trying to improve). Here's one of the ways I tried to do it:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  
  &lt;script type = "text/javascript"&gt;   
  var images = [
  'assets/shared/cursors/drum1.cur',
  'assets/shared/cursors/drum2.cur',
  'assets/shared/cursors/drum3.cur',
  'assets/shared/cursors/drum4.cur'
  ];
  
  var x = 0;
  
  function displayNextImage() {
  x = (x === images.length - 1) ? 0 : x + 1;
  document.body.style.cursor = 'url("' + images[x] + '"), default';
  } 
  
  setInterval(displayNextImage, 250);
  &lt;/script&gt;
  
  &lt;script type = "text/javascript"&gt;   
  var images = [
  'assets/shared/cursors/point1.cur',
  'assets/shared/cursors/point2.cur',
  'assets/shared/cursors/point3.cur',
  'assets/shared/cursors/point4.cur'
  ];
  
  var x = 0;
  
  function displayNextImage() {
  x = (x === images.length - 1) ? 0 : x + 1;
  document.body.style.cursor:pointer = 'url("' + images[x] + '"), default';
  } 
  
  setInterval(displayNextImage, 250);
  &lt;/script&gt;
  
  &lt;body&gt;
  
  &lt;div style="height: 1000vh; width: 1000vw;"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  &lt;/head&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>If possible I'd like to do it without jQuery.</p>
  
  <p>Again, any help is really appreciated. </p>
  
  <p>Thanks! :)</p>