Skip to content Skip to sidebar Skip to footer
Home / Css / Cursor / Javascript

Change Cursor Image (css Url) Using Javascript

Post a Comment
I'm currently updating my website. I wanted to have an animated cursor on one of the pages. I found out that modern browsers don't support the .ani format or animated gifs, so I ha

Solution 1:

You can use something like this:

var images = [
  'http://lorempixel.com/21/21/',
  'http://lorempixel.com/22/22/',
  'http://lorempixel.com/23/23/'
];

var x = 0;

functiondisplayNextImage() {
  x = (x === images.length - 1) ? 0 : x + 1;
  document.body.style.cursor = 'url("' + images[x] + '"), default';
}

setInterval(displayNextImage, 400);
html, body {
  height: 100%;
}

body {
  cursor: url('http://lorempixel.com/20/20/'), default;
}

Solution 2:

I couldn't work out how to also have a .ani fallback cursor, so instead I changed my .png files to .cur files, which work in old and new browsers. So, the code ended up looking like this:

<!DOCTYPE html><html><head><scripttype = "text/javascript">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;

functiondisplayNextImage() {
  x = (x === images.length - 1) ? 0 : x + 1;
  document.body.style.cursor = 'url("' + images[x] + '"), default';
} 

setInterval(displayNextImage, 250);
</script><body><divstyle="height: 1000vh; width: 1000vw;"></div></body></html></head></html>

Thank you again Shiva. I couldn't have worked this out without you.

I've asked a related, but different question here: Changing CSS URL for pointer cursor (using Javascript)

Post a Comment for "Change Cursor Image (css Url) Using Javascript"