Mouse/Cursor

This one hardly deserves its own section but what the hey. It makes finding the information on mouse cursors a bit easier.

Normally the browser controls what the mouse cursor will be. With Cascading Style Sheets you can gain control over this. Don't like the little hand icon that the cursor changes into when over a link? The code above changes it into cross hairs like in the scope of a gun. Talk about targeting your links! Give it a try. I applied the code above to this page so all the links will have this cursor when you mouse over them.

Well that's all fine and good but maybe you don't want cross hairs either. No problem, below is a list of the different styles of cursors you may use. Just mouse over each one to see what it looks like.

• hand (only good for I.E. 5+ and Opera)
• pointer (same as the hand in the browsers I've tested it in)
• n-resize
• ne-resize
• e-resize
• se-resize
• s-resize
• sw-resize
• w-resize
• nw-resize
• wait
• help
• text
• default (browsers default cursor)
• auto (lets the browser decide)

All of these except "hand" should work in Netscape Navigator 6+ including, of course, the cross hair cursor too. All of them should work in Internet Explorer 4+.

Well that's pretty much it for cursors. What's that you say? You want to use your own custom cursor like you used your own images for list bullets? That can be done. Problem is, about the only browser that supports it is Internet Explorer. Fine if most of your sites visitors will be using that particular browser, but the rest won't see that nifty cursor. Then again, it shouldn't hurt anything either so why not give it a try. The code goes like this:

Or for an animated cursor:

And to see these in action just mouse over the following text to see the custom cursor and to see the animated cursor.

Of course you may have to get a program to create these cursors as many graphics programs don't make them. Don't worry. They can be had for a reasonable price. Just one more outlet for your creative side.