2

how do you set a custom cursor for the current page from a local image file? basically I need to change to a different cursor programmatically using javascript, but the cursor is stored locally on my hard drive.

KJW
  • 15,035
  • 47
  • 137
  • 243

1 Answers1

7

You can't (but see below), because the file:// cannot be accessed or referred from other protocols.

The basic way to include a cursor through JavaScript is:

element.style.cursor = "url(...location-of-pic...), auto";
//                                                ^^^^^^ (required as fallback)

  1. You can convert your image to a base64-dataURI, and use it instead of file://..../cursor.png:

    document.documentElement.style.cursor = 'url("data:image/x-icon;base64,AAABAAEAEBAAAAEAIABoBAAAFgAAACgAAAAQAAAAIAAAAAEAIAAAAAAAAAAAABMLAAATCwAAAAAAAAAAAAAAAAAAbGxt/2xsbf9sbG3/bGxt/2xsbf9sbG3/bGxt/2xsbf9sbG3/bGxt/2xsbf9sbG3/bGxt/2xsbf8AAAAAAAAAAGxsbf9sbG3/bGxt/2xsbf9sbG3/bGxt/2xsbf9sbG3/bGxt/2xsbf9sbG3/bGxt/2xsbf9sbG3/AAAAAAAAAABsbG3/bGxt/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABsbG3/bGxt/wAAAAAAAAAAbGxt/2xsbf8AAAAAbGxt/2xsbf9sbG3/bGxt/2xsbf9sbG3/bGxt/2xsbf8AAAAAbGxt/2xsbf8AAAAAAAAAAGxsbf9sbG3/AAAAAGxsbf9sbG3/bGxt/2xsbf9sbG3/bGxt/2xsbf9sbG3/AAAAAGxsbf9sbG3/AAAAAAAAAABsbG3/bGxt/wAAAAAAAAAAAAAAAAAAAAAAAAAAVHibFE94oDxKeKRkRHiqkUx4ohlsbG3/bGxt/wAAAAAAAAAAAAAAAAAAAABLeKMPPHixUj54sIQ+eLC5Pniw3j54sP8/eK//QXet/0J2q/9Ed6k+AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAPXiwKkF4rf9BeK3/QXit/0J3q+xFdqnAQ3erhTt7s1Qqg8VSFY3cWQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD94rwlCeKxzRHaqUUR2qis7e7MIAAAAABiM2QwJk+hyA5fv4gKX7v8AmfIbAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACZPoGQOX7oIDlu7tBZXs/wSX6+wJkeqCHXjmTiBy6QIAAAAAAAAAAAAAAAAAAAAAAAAAAA+R4QICl+4kA5fuhgWW7PMGlev/BpXr6wSY64MNjOkQJ23lTC9j5PwuZOSBAAAAAAAAAAAAAAAAAAAAAAAAAAAElu0JBpXr1QaV6/8GlevpBpbrfASY6xcAAAAAK2fkNi5k5PgsZuT4LGbkRAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAaV62wGlet+BZbrFQAAAAAAAAAALWTkIi1l5OUsZuT/LGbkWAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAALmPkDyxl5MssZuT/LGbkewAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAALmPkAixm5K0sZuT/LGbkoQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAALmTkAixm5JMsZuT/LGbkwCxm5AcAAAAAAAAAAAAAAAAAAAAAgAEAAIAB8L+f+QAAkAkAAJAJAACfAQAA4AcAAOAHAADggwAA/gEAAPABAADwIQAA+MP///+H////DwAA/g8AAA%3D%3D"), auto';

    You can upload and convert any file to base-64 format at this page. Trim the whitespace, and prefix data:image/png;base64,.

  2. Instead of using data-URIs, an image can also be uploaded to a file host, and embedded as follows:

    document.documentElement.style.cursor = 'url("http://sstatic.net/stackoverflow/img/favicon.ico"), auto';

See also:

Rob W
  • 341,306
  • 83
  • 791
  • 678
  • would setting `cursor = "default";` change to default cursor? – KJW Feb 23 '12 at 17:00
  • 1
    @KimJongWoo Use `.style.cursor = '';` (empty string) to undo your action. – Rob W Feb 23 '12 at 17:01
  • btw, this works but the default hand cursor shows up when you mouse over a link. how to override the default? is it possible to set style cursor to all elements on the dom document? – KJW Feb 23 '12 at 17:07
  • @KimJongWoo That's because the user agent defines a `cursor` CSS property for anchors. If you want to override all `cursor` properties, use [`document.styleSheets[0].insertRule('*{cursor:url(...),default !important;}',0)`](https://developer.mozilla.org/en/DOM/CSSStyleSheet/insertRule) (IE: [`addRule`](http://msdn.microsoft.com/en-us/library/aa358796(v=vs.85).aspx). This code assumes that you've already got a `styleSheet` object (` – Rob W Feb 23 '12 at 17:19
  • `document.styleSheets[0].insertRule('*{cursor: url("data:image/x-icon;base64,iVBORw0KGgoAAA...."),default !important;}',0);` ? firefox throws security error. – KJW Feb 23 '12 at 17:23
  • @KimJongWoo The first style sheet in your document is from an external URL. If you want an easy way to insert the CSS, [create a ` – Rob W Feb 23 '12 at 17:48
  • Thanks so much, this really helps, and I do consider this question as not duplicating with the suggested one. – Shao-Kui Jul 04 '19 at 09:03