So I started investigating and playing around with custom cursor pointers embedded in web pages. It seems like there’s two distinct approaches:

1. Actually change the OS’s default cursor using a .cur or .ani file referenced as a url in the CSS
2. Make a small image (or chain of images) follow the cursor around, probably using the onMouseMove function or something

The problem with (2) is that the default OS cursor still remain on the screen. There may be a way to change the OS cursor to a crosshair or something to make it less visible, though.

The problem with (1) is that it only seems to work on Internet Explorer 6 and higher.

But anyway, here’s what you do to achieve the first (1) one:

1. Make a custom cursor using a cursor editing program. I downloaded one called “Sib Cursor Editor” by sibcode.com (good name, guys) and it’s pretty decent. Save the cursor as a .cur or .ani file. Let’s say it’s “foo.cur”.
2. Upload the cursor file to your site, how about in the same dir as the page.
3. Add the following code to the HEAD section of the web page:
   <style>
<!--
BODY{
cursor:url(\"foo.cur\");
}
-->
</style>
4. Open the page in IE 6+

Yeah!