Changing Cursors
Deviate from the default cursors! Bored of seeing the usual arrow pointer in web sites and hand cursor when you put your mouse over the links? Well, we can change all that through the power of CSS. This tutorial will show you how.
Step 1: The Code
Here's what your stylesheet should look like:
<style type="text/css">
body {
cursor: default;
}
a {
cursor: hand;
}
</style>
The code above will display the standard cursors. In order to change them, just switch the underlined text with any of the following:
crosshair
help
move
text
wait
n-resize
s-resize
e-resize
w-resize
ne-resize
nw-resize
se-resize
sw-resize
Put your mouse over the other styles to see what they would look like. If you're still not satisfied with the selection of cursors above, read more...
Step 2: Custom Cursors
Yes, you can actually put in your own cursor in your site. From the code above, just change the underlined text to this one:
url('mycursor.cur')
The code will above will display your cursor named mycursor.cur. Of course, you have to upload your custom cursor to your server for this to work. Just change the underlined text to whatever file name your cursor has. Here's how it would look like:
The cursor above (which is the 3D version of move) is actually a cursor I found in my HD. I just used that for the benefit of this tutorial. Note that this is best viewed in Internet Explorer. You can find a lot of freeware cursors through download.com.
Conclusion
Changing the cursors in your web site is very easy and simple to do. The major browsers that support this are: IE4, Firefox 1 and Netscape 6.
If you have any questions or if you want to discuss this tutorial, you may post at Blinding Light MB.