Custom cursor not working properly html5

[garydg]

Hello,

I have a client who wants a custom cursor and rollover effects. The rollovers work fine but the cursor is not. The default cursor is still being displayed and the custom cursor kind of responds in a weird way. Does anyone know why this is? If I were to take out the coding for the rollovers, the cursor works fine. Here is a link to what I am talking about:https://2shea.com/AFC/advocacy/advocacy_webpage.html.

The html5 code is below (The were lots of rollovers so I only included one rollover script to simplify). 

Thanks!

var _this = this;
stage.enableMouseOver(3);
_this.orange_button.on('mouseover', function () {
_this.orange_photo1.play();
});
var _this = this;
stage.enableMouseOver(3);
_this.orange_button.on('mouseout', function () {
_this.orange_photo1.play();
});
/* Custom Mouse Cursor
Replaces the default mouse cursor with the specified symbol instance.
*/
stage.canvas.style.cursor = "none";
this.pasted_purple_kid.mouseEnabled = false;
this.addEventListener("tick", fl_CustomMouseCursor_6.bind(this));

function fl_CustomMouseCursor_6() {
this.pasted_purple_kid.x = stage.mouseX;
this.pasted_purple_kid.y = stage.mouseY;
}

[JoãoCésar]

Hi.

Try setting the cursor property on the root to "none" and when you set the custom cursor position to the mouse position you have to take into account the stage scale. Like this:

function fl_CustomMouseCursor_6() {
    this.pasted_purple_kid.x = stage.mouseX / stage.scaleX;
    this.pasted_purple_kid.y = stage.mouseY / stage.scaleY;
}

Please let us know the outcome.

Regards,

JC

[garydg]

OK. Thanks! I will try it. I am new to this so bear with me if I don't follow the directions properly.

[garydg]

Thanks JC! That worked!

[garydg]

Hey JC, I still have the default cursor appearing over the custom cursor. I just noticed that. I thought I had set the cursor property to "none" in the original script (stage.canvas.style.cursor = "none";). I think you meant differently. Do I need to set the cursor property to "none" in a different way than what I have written? Thanks.  Below is the current script.

stage.canvas.style.cursor = "none";
this.pasted_purple_kid.mouseEnabled = false;
this.addEventListener("tick", fl_CustomMouseCursor_6.bind(this));

[kglad]

@garydg 

try:

document.getElementById("animation_container").style.cursor = "none"

[garydg]

Hi kglad.

I tried the script and it partially works. It works fine overall except when I rollover a button, then a hand cursor appears over the custom cursor. I commented out the original cursor property and inserted the new one below that.

//stage.canvas.style.cursor = "none";
document.getElementById("animation_container").style.cursor = "none" // the new script provided by kglad
this.pasted_purple_kid.mouseEnabled = false;
this.addEventListener("tick", fl_CustomMouseCursor_6.bind(this));

function fl_CustomMouseCursor_6() {
//this.test_cursor.x = stage.mouseX;
//this.test_cursor.y = stage.mouseY;
this.pasted_purple_kid.x = stage.mouseX / stage.scaleX;
this.pasted_purple_kid.y = stage.mouseY / stage.scaleY;
}

[kglad]

for buttons, you need to set their cursor property to "none".

[garydg]

Thanks kglad! That worked!

[kglad]

you're welcome.