Change mouse cursor on rollover or use a custom image for cursor

1

hi everyone, I want to use a custom image for cursor when the mouse cursor rollover on a specific object. For example, I have animated a rectangle shape and it’s moving up and down. So when the mouse cursor rollover on the rectangle shape, the mouse cursor will change to a custom image that I like. So is there any way to that? Any help out there will be greatly appreciated.

Billy

2

Hi Billy,

look at CSS (or Javascript if you like) to change the cursor image

CSS

#myElement {
    cursor: url('${resourcesFolderName}/myimage.jpg') !important; // !important just for protection and your image is inside resources folder
}

JAVASCRIPT - use “On Mouse Over”, New Function…

element.style.cursor = "url('')";
3

Thanks, DBear, i did try the Javascript but nothing happens. I select the object and use “On Mouse Over”, new Function and choose the javascript. Nothing happens when I preview it. I had try jpg, png, and gif images.

element.style.cursor = "url('http://bringerp.free.fr/Files/RotMG/cursor.gif')";

I had attached the Hype file and u can take a look at it and see what’s the problem. Thank you very much.
cursor.hype.zip (14.9 KB).

4

Sorry forgot the second param that’s needed these days

element.style.cursor = "url('http://bringerp.free.fr/Files/RotMG/cursor.gif'), auto";
5

Thanks, it’s working now. :slight_smile:

6

Bro its saying that "element is not defined" what should I do now?

7

Can you share a Hype document? It's very hard to figure out how to help if we have no information.

8

As @Daniel has said ... we need more to go on. "element is not defined" leads me to believe that there is maybe a typo somewhere that is stopping the "element" argument of the function not being set. It's a sort of internal argument that is a part of every hype function that you create. It allows you to reference the element that is calling the function within that function so if I wanted to change something on that element for example, a rectangle or button I could reference it like

hypeDocument.setElementProperty(element, 'scale', 1.5, 1.0, 'easeinout')

But, as mentioned, we need more as this is just all speculation.

1 Like