Hello, I'm trying to create a custom cursor with the new customizable element feature. The code ran smoothly, but the image is not found, and the cursor is replaced only by the secondary mandatory option that I defined in the style. I have already tested the change on the w3schools website and it works normally. t is an image present in the media library, inclusive.
Do I need to modify something in the image path? Because in the 404 error that appears in the console, the constant IMAGE_URL appears after my domain, although it is defined with the absolute path:
https://www.petersonevaristoalves.com/IMAGE_URL or https://en.petersonevaristoalves.com/IMAGE_URL
Here is the code:
const IMAGE_URL = 'https://static.wixstatic.com/media/17a3fc_65d927f18bd34657bd15f1991f61b3e0~mv2.png'; const DEBUG_TEXT = 'Loading the code for Custom Element'; const createStyle = () => { const styleElement = document.createElement('style'); styleElement.innerHTML = ` #comp-kjh39u74, #comp-kjh39u74 img, #comp-kjh39u74 svg, #comp-kjh39u74 button, #comp-kjh39u74 h2, #comp-kjh39u74 p { cursor: crosshair; //already tested without this line cursor: url(IMAGE_URL) 25 25, crosshair; //the secondary option after comma is mandatory } `; return styleElement; }; class customCrosshair extends HTMLElement { constructor() { super(); console.log(DEBUG_TEXT); //This text appears on the console (as it should) but right after it appears the warning of the image not found } connectedCallback() { this.appendChild(createStyle()); } } customElements.define('custom-crosshair', customCrosshair);
Well, I had to give up the constant and write the image address directly in the style code. I also included some tags in addition to the body to overlay the cursor on some clickable elements and it met what I needed.
Follow the code if it helps someone.
const createStyle = () => { const styleElement = document.createElement('style'); styleElement.innerHTML = ` html, body, div, h1, h2, p, a, img, button, svg { cursor: crosshair; cursor: url('https://static.wixstatic.com/media/17a3fc_65d927f18bd34657bd15f1991f61b3e0~mv2.png') 25 25, crosshair !important; } `; return styleElement; }; class customCrosshair extends HTMLElement { constructor() { super(); } connectedCallback() { this.appendChild(createStyle()); } } customElements.define('custom-crosshair', customCrosshair);
Following, I am looking for a method to apply custom cursor site-wide(global scope)~
It's not a good idea to try to apply your own style on Wix element IDs.
First of all, Wix can change it whenever they need and it will break your code.
and second, your style might be overridden by their own style (for example if they used "!important" or if they load some styling dynamically.
What you should do is to create your own button (and other elements) using Custom element and apply your styling to these elements.