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

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.


Hi Billy,

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


#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… = "url('')";

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. = "url('')";

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

Sorry forgot the second param that’s needed these days = "url(''), auto";

Thanks, it’s working now. :slight_smile:

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

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

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