Results 1 to 9 of 9

Thread: Changing Cursor to Own Image???

  1. #1
    Join Date
    Jun 2008
    Posts
    589
    Thanks
    13
    Thanked 54 Times in 54 Posts
    Blog Entries
    1

    Default Changing Cursor to Own Image???

    Is there any possible way to change the cursor to an image? You know, like make the cursor an image you have made, namely PNG or BMP?

    Would I need to make a .cur file? If so, how would I do this??

    -magicyte
    Last edited by magicyte; 10-02-2008 at 09:21 PM. Reason: Thread Resolved

  2. #2
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    1,160
    Thanks
    17
    Thanked 277 Times in 275 Posts

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Once you have your custom cursor, if it is for use directly on a web page (not in Flash or Java, etc.), it should be .ani or .cur, and you should use the proper css, ex:

    Code:
    <style type="text/css">
    body {
    cursor: url(mycursor.cur);
    }
    </style>
    However, support is limited.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. #4
    Join Date
    Jun 2008
    Posts
    589
    Thanks
    13
    Thanked 54 Times in 54 Posts
    Blog Entries
    1

    Default

    Thank you for the links, Ranganna. And thanks, John, for telling me how to do it and that support is limited.

    -magicyte

  5. #5
    Join Date
    Jan 2006
    Location
    Ft. Smith, AR
    Posts
    795
    Thanks
    57
    Thanked 129 Times in 116 Posts

    Default

    Quote Originally Posted by jscheuer1 View Post
    Once you have your custom cursor, if it is for use directly on a web page (not in Flash or Java, etc.), it should be .ani or .cur, and you should use the proper css, ex:

    Code:
    <style type="text/css">
    body {
    cursor: url(mycursor.cur);
    }
    </style>
    However, support is limited.
    Not trying to take the light off of someone else's question... but I used this in one of my stylesheets exactly as you have it there (different filename obviously), and then went to validate and it said that I was missing "Comma Separator".

    Any ideas as to why?
    --------------------------------------------------
    Reviews, Interviews, Tutorials, and STUFF
    --------------------------------------------------
    Home of the SexyBookmarks WordPress plugin

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by Nyne Lyvez View Post
    missing "Comma Separator".

    Any ideas as to why?
    Technically speaking (as far as good practice is concerned), it is a good idea to supply a fall back cursor, comma separated. In actual practice that is of limited value, as browsers that don't support url(cursor) will often choke there and never get to the comma separated fall back, but it does work in some browsers that don't support custom cursors:

    Code:
    <style type="text/css">
    body {
    cursor: url(mycursor.cur), text;
    }
    </style>
    Now, according to standards (what the validator should be looking at), I'm not sure what the issue is. I imagine it's that the syntax looks to the validator as two possibilities (which, if it were, would require a comma separator), or the validator just wants a fall back cursor, or the validator considers custom url(cursor) invalid, but isn't being very clear about it.

    In any case, it is the syntax that works in supporting browsers (with or without a comma separated fall back). If a fall back is supplied, some non-supporting browsers will use that, other non-supporting browsers will show whatever cursor they ordinarily would, as if no cursor directive were given. Some legacy or niche browsers may even have a major or minor problem of some sort with it no matter what you do, older browsers than that don't even support css.

    As I said, "support is limited".
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #7
    Join Date
    Jan 2006
    Location
    Ft. Smith, AR
    Posts
    795
    Thanks
    57
    Thanked 129 Times in 116 Posts

    Default

    that's kind of what I figured, but just thought i'd ask to make sure.

    Thanks John, I appreciate the reply.
    --------------------------------------------------
    Reviews, Interviews, Tutorials, and STUFF
    --------------------------------------------------
    Home of the SexyBookmarks WordPress plugin

  8. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    For the specification (what the validator should be using to evaluate the code we are talking about) see:

    http://www.w3.org/TR/CSS21/ui.html#propdef-cursor

    particularly:

    <uri>
    The user agent retrieves the cursor from the resource designated by the URI. If the user agent cannot handle the first cursor of a list of cursors, it should attempt to handle the second, etc. If the user agent cannot handle any user-defined cursor, it must use the generic cursor at the end of the list.

    :link,:visited { cursor: url(example.svg#linkcursor), url(hyper.cur), pointer }

    This example sets the cursor on all hyperlinks (whether visited or not) to an external SVG cursor. User agents that don't support SVG cursors would simply skip to the next value and attempt to use the "hyper.cur" cursor. If that cursor format was also not supported, the UA would skip to the next value and simply render the 'pointer' cursor.
    From that, assuming it is being followed by the validator, I gather the reason is:

    Quote Originally Posted by jscheuer1 View Post
    the validator just wants a fall back cursor
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  9. #9
    Join Date
    Jun 2008
    Posts
    589
    Thanks
    13
    Thanked 54 Times in 54 Posts
    Blog Entries
    1

    Default

    Thanks guys for all of your advice. I will dilligently use it in my programming time!!

    -magicyte

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •