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


(billy) #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('')";

Larger selection of cursors
(billy) #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";

(billy) #5

Thanks, it’s working now. :slight_smile: