custom mouse cursor on rollover in HTML5?

[warpigs666]

I've searched the forum but can't find an answer that works in my situation. How can I can js to my html5 document so that when a user mouses over a button the cursor changes into that little pointing finger so that they know that they can click on the button?

Thanks in advance!

[kglad]

use:

cursor="pointer";

in your mouseover function.  change it (cursor='default') in your mouseout

[warpigs666]

Thanks, I couldn't figure out how to use this but I noticed that if I converted the movie or symbol to a button it automatically turned into a pointing finger when rolled over so I did that.

[kglad]

you're welcome.

[ClayUUID · Accepted solution]

warpigs666  wrote

Thanks, I couldn't figure out how to use this but I noticed that if I converted the movie or symbol to a button it automatically turned into a pointing finger when rolled over so I did that.

Indeed, using a Button for a button is generally the best course of action. Hence the name, "Button".

That being said, the rollover cursor for button instances can be further customized by assigning to its "cursor" property. E.g.:

this.myButton.cursor = "crosshair";

The name can be any standard CSS cursor name.

cursor | MDN

For completeness sake, this is how you do a custom rollover cursor when simulating a button with a movieclip:

// this is only necessary if there are no native buttons in the current document

stage.enableMouseOver(createjs.Ticker.framerate);

// convenience reference

var btn = this.myMCButton;

// prevent events being repeatedly added if timeline loops

if (!btn.hasEventListener("rollover")) {

    btn.addEventListener("rollover", btnRollover.bind(btn));

    btn.addEventListener("rollout", btnRollout.bind(btn));

}

function btnRollover() {

    this.cursor = "pointer";

}

function btnRollout() {

    this.cursor = "auto";

}