Menu
I wanted to use a script to change the mouse pointer on my website using JavaScript. It's better done by CSS but my requirement is of a script that can be distributed to many people to embed in the head section of their websites. Through CSS, this can be manipulated by
html { cursor: *cursorurl* } How to do the same in JavaScript?
559
You cannot move the actual mouse pointer in Javascript. You can, however move a pointer shaped image and pretend that you can. :-) Better yet, you can move a cat image around, following the mouse cursor, and try to use it to chase the cursor into the position you want.
Answer: Use the CSS cursor property You can define a custom cursor using the CSS cursor property. The cursor property takes the comma-separated list of user-defined cursors value followed by the generic cursor. First of all create cursor image and save it with the extension .
JavaScript cursor is a thing used as a mouse cursor whenever it's going to point on specific elements. There are various types of cursor available those are like wait, help, move, pointer, crosshair, cell, not allowed, zoom-in, zoom-out, etc. This cursor can be changed by assigning value to document. body.
Javascript is pretty good at manipulating css.
document.body.style.cursor = *cursor-url*; //OR var elementToChange = document.getElementsByTagName("body")[0]; elementToChange.style.cursor = "url('cursor url with protocol'), auto"; or with jquery:
$("html").css("cursor: url('cursor url with protocol'), auto"); Firefox will not work unless you specify a default cursor after the imaged one!
other cursor keywords
Also remember that IE6 only supports .cur and .ani cursors.
If cursor doesn't change: In case you are moving the element under the cursor relative to the cursor position (e.g. element dragging) you have to force a redraw on the element:
// in plain js document.getElementById('parentOfElementToBeRedrawn').style.display = 'none'; document.getElementById('parentOfElementToBeRedrawn').style.display = 'block'; // in jquery $('#parentOfElementToBeRedrawn').hide().show(0); working sample: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>First jQuery-Enabled Page</title> <style type="text/css"> div { height: 100px; width: 1000px; background-color: red; } </style> <script type="text/javascript" src="jquery-1.3.2.js"></script></head> <body> <div> hello with a fancy cursor! </div> </body> <script type="text/javascript"> document.getElementsByTagName("body")[0].style.cursor = "url('http://wiki-devel.sugarlabs.org/images/e/e2/Arrow.cur'), auto"; </script> </html> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
