You can change the HTML mouse cursor in two distinct ways: In JavaScript with the DOM element.style object. In CSS with the cursor property. You can use cursors predefined by web browsers or use a custom cursor in the form of an image.
Example to change the mouse cursor, when hovering over an image, in JavaScript:
<img src="https://www.1formatik.com/os.jpg" id="image" alt="">
<script>
document.getElementById("image").style.cursor = "wait";
</script>
Example to change the mouse cursor, on the whole page, in CSS:
<img src="https://www.1formatik.com/os.jpg" id="image" alt="">
<script>
document.getElementById("image").style.cursor = "wait";
</script>
For example to put an image as a cursor on all
tags:
<style>
div {
cursor: url('image.png'), auto;
}
</style>