By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,480 Members | 1,214 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,480 IT Pros & Developers. It's quick & easy.

Custom cursor using Javascript in Firefox

KeredDrahcir
100+
P: 426
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?
Nov 24 '09 #1

✓ answered by 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.
Expand|Select|Wrap|Line Numbers
  1. onmouseover="this.style.cursor=\"url(icons/cursor.cur),auto\";"
You could also consider using CSS only with "hover".

Share this Question
Share on Google+
19 Replies


gits
Expert Mod 5K+
P: 5,390
you might use:
Expand|Select|Wrap|Line Numbers
  1. this.style.cursor = 'pointer';
kind regards
Nov 24 '09 #2

drhowarddrfine
Expert 5K+
P: 7,435
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.
Nov 25 '09 #3

KeredDrahcir
100+
P: 426
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?
Nov 25 '09 #4

gits
Expert Mod 5K+
P: 5,390
of course ... either use single quotes inside the doubles or escape the inside double quotes:
Expand|Select|Wrap|Line Numbers
  1. onmouseover="this.style.cursor=\"url(icons/cursor.cur)\";"
  2.  
regards
Nov 25 '09 #5

KeredDrahcir
100+
P: 426
I've tried that and it still doesn't work.
Dec 1 '09 #6

gits
Expert Mod 5K+
P: 5,390
does it work with any other 'webaware' image like a gif or jpeg?

kind regards
Dec 3 '09 #7

KeredDrahcir
100+
P: 426
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.
Dec 3 '09 #8

gits
Expert Mod 5K+
P: 5,390
never tried it ... but the following:
Expand|Select|Wrap|Line Numbers
  1. onmouseover="this.style.cursor='pointer';"
works
Dec 3 '09 #9

KeredDrahcir
100+
P: 426
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.
Dec 4 '09 #10

gits
Expert Mod 5K+
P: 5,390
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
Dec 5 '09 #11

KeredDrahcir
100+
P: 426
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.
Dec 7 '09 #12

acoder
Expert Mod 15k+
P: 16,027
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.
Expand|Select|Wrap|Line Numbers
  1. onmouseover="this.style.cursor=\"url(icons/cursor.cur),auto\";"
You could also consider using CSS only with "hover".
Dec 7 '09 #13

gits
Expert Mod 5K+
P: 5,390
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 :)
Dec 7 '09 #14

P: 15
Is .cur a proprietary M$ format that only IE supports?
Dec 8 '09 #15

rnd me
Expert 100+
P: 427
@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:
Expand|Select|Wrap|Line Numbers
  1. cursor:  url(foo.cur), url(http://www.example.com/bar.gif), auto;
Dec 13 '09 #16

KeredDrahcir
100+
P: 426
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,
Dec 14 '09 #17

KeredDrahcir
100+
P: 426
I now have it working in IE, Firefox, Safari and Google Chrome. Any ideas how to get it working in Opera?
Dec 15 '09 #18

acoder
Expert Mod 15k+
P: 16,027
I don't think Opera supports custom cursors.
Dec 21 '09 #19

P: n/a
I also have a similar problem but it's work for me when i entered the full path to the cursor file.
Nov 20 '10 #20

Post your reply

Sign in to post your reply or Sign up for a free account.