Changing Cursor to Own Image???

[magicyte]

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

[rangana]

http://webscripts.softpedia.com/script/Development-Scripts-js/Convert-to-Cursor-37765.html
http://www.rw-designer.com/cursor-maker

[jscheuer1]

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:


<style type="text/css">
body {
cursor: url(mycursor.cur);
}
</style>

However, support is limited.

[magicyte]

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

-magicyte

[TheJoshMan]

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:


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

[jscheuer1]

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:


<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".

[TheJoshMan]

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

Thanks John, I appreciate the reply.

[jscheuer1]

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:


the validator just wants a fall back cursor

[magicyte]

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

-magicyte