Change Cursor Image (CSS URL) Using Javascript
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;
function displayNextImage() {
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>
<script type = "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;
function displayNextImage() {
x = (x === images.length - 1) ? 0 : x + 1;
document.body.style.cursor = 'url("' + images[x] + '"), default';
}
setInterval(displayNextImage, 250);
</script>
<body>
<div style="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"