Custom cursor using Javascript in Firefox

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • KeredDrahcir
    Contributor
    • Nov 2009
    • 426

    Custom cursor using Javascript in Firefox

    I'm trying to use an onmouseover event to change the cursor to a custom .cur image.
    onMouseOver="th is.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
    Recognized Expert Moderator Expert
    • May 2007
    • 5388

    #2
    you might use:
    Code:
    this.style.cursor = 'pointer';
    kind regards

    Comment

    • drhowarddrfine
      Recognized Expert Expert
      • Sep 2006
      • 7434

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

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

      Comment

      • KeredDrahcir
        Contributor
        • Nov 2009
        • 426

        #4
        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?

        Comment

        • gits
          Recognized Expert Moderator Expert
          • May 2007
          • 5388

          #5
          of course ... either use single quotes inside the doubles or escape the inside double quotes:
          Code:
          onmouseover="this.style.cursor=\"url(icons/cursor.cur)\";"
          regards

          Comment

          • KeredDrahcir
            Contributor
            • Nov 2009
            • 426

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

            Comment

            • gits
              Recognized Expert Moderator Expert
              • May 2007
              • 5388

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

              kind regards

              Comment

              • KeredDrahcir
                Contributor
                • Nov 2009
                • 426

                #8
                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.

                Comment

                • gits
                  Recognized Expert Moderator Expert
                  • May 2007
                  • 5388

                  #9
                  never tried it ... but the following:
                  Code:
                  onmouseover="this.style.cursor='pointer';"
                  works

                  Comment

                  • KeredDrahcir
                    Contributor
                    • Nov 2009
                    • 426

                    #10
                    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.

                    Comment

                    • gits
                      Recognized Expert Moderator Expert
                      • May 2007
                      • 5388

                      #11
                      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

                      Comment

                      • KeredDrahcir
                        Contributor
                        • Nov 2009
                        • 426

                        #12
                        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.

                        Comment

                        • acoder
                          Recognized Expert MVP
                          • Nov 2006
                          • 16032

                          #13
                          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.
                          Code:
                          onmouseover="this.style.cursor=\"url(icons/cursor.cur),auto\";"
                          You could also consider using CSS only with "hover".

                          Comment

                          • gits
                            Recognized Expert Moderator Expert
                            • May 2007
                            • 5388

                            #14
                            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 :)

                            Comment

                            • DMsy2
                              New Member
                              • Dec 2009
                              • 15

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

                              Comment

                              Working...