Custom cursor using Javascript in Firefox

[KeredDrahcir]

I'm trying to use an onmouseover event to change the cursor to a custom .cur image.
onMouseOver="this.style.cursor='icons/cursor.cur';"
The above code works fine in IE but not in Firefox. It's important the users know where they can click.
Could anyone help please?

[gits]

you might use:

this.style.cursor = 'pointer';

kind regards

[drhowarddrfine]

Because IE does it wrong like everything else. It should be:
this.style.cursor = "url(icons/cursor.cur)";

And onmouseover should be lower case in xhtml, at least.

[KeredDrahcir]

Thanks for the reply drhowarddrfine but I did try that code before I came here. I've tried it again and it still doesn't seem to work. I see you've put double quotes around the path to find the cursor. Since onmouseover goes in quotes could that cause a problem?

[gits]

of course ... either use single quotes inside the doubles or escape the inside double quotes:

onmouseover="this.style.cursor=\"url(icons/cursor.cur)\";"
 

regards

[KeredDrahcir]

I've tried that and it still doesn't work.

[gits]

does it work with any other 'webaware' image like a gif or jpeg?

kind regards

[KeredDrahcir]

I'll try that. Can it be done in Firefox? JavaScript Kit say it's IE only although the page was talking about NS so it was proabaly quite old.

[gits]

never tried it ... but the following:

onmouseover="this.style.cursor='pointer';"

works

[KeredDrahcir]

I can get the cursor as a pointer but the image still doesn't work. I've tried it as a gif and all I get (as before) is the text cursor.
I've got the pointer working elshwere on the same page.

[gits]

so using the pointer should be sufficient ... since it shows the standard 'here you can click' cursor? ... i'm not quite sure whether I would use another cursor or image except I would need it for a browser based game ... or why is it essential to have another custom cursor?

kind regards

[KeredDrahcir]

I can use the pointer but using the custom cursor just helps remind us whether we are logged in as user or administrator.
It don't suppose it's essential but it does improve the look. I just thought it should be possible.

[acoder]

I may be wrong, but I think you need to specify a default, e.g. "auto" or "default" for the custom cursor to work, e.g.

onmouseover="this.style.cursor=\"url(icons/cursor.cur),auto\";"

You could also consider using CSS only with "hover".

[gits]

in case it would be essential then have a look here and see if it helps ... but for your specific purpose personally i just would apply another style to the app's background-color or something more visible as a cursor ...

kind regards

PS: ahh ... try acoder's hint first ... may be it helps? ... as i said before ... i never used custom cursors before :)

[DMsy2]

Is .cur a proprietary M$ format that only IE supports?

[rnd me]

@DMsy2
yes and no.

.cur is basically a monochrome bitmap, so it may be viewable when loaded as a bmp, which many browsers handle.
Firefox allows .cur since 2.0

according to MDC, this is your best bet:

cursor:  url(foo.cur), url(http://www.example.com/bar.gif), auto;

[KeredDrahcir]

Thanks for all your help, acoder's solution of adding the defualt afterwards works. Adding the url(***.cur) stopped working in IE but when I added the default it worked again in IE and now works in Firefox.

Many thanks all,

[KeredDrahcir]

I now have it working in IE, Firefox, Safari and Google Chrome. Any ideas how to get it working in Opera?

[acoder]

I don't think Opera supports custom cursors.

[unnikrishan b]

I also have a similar problem but it's work for me when i entered the full path to the cursor file.