Web Design Tips: Add Your Own Cursor

The code that we will be using will work with Internet Explorer 6.0+. You can use your own cursor images -- just upload them to a website. Cursor images are special images with a .cur or a .ani file extension. <style type="text/css"> body, a {cursor: url(http://www.youraddress.com/cursor.cur);} </style> Replace youraddress.com/cursor.cur with the address of your custom cursor and then save your changes. That's it!

Comment/Reply (w/o sign-up)

Cursor is standard CSS so it should work on most newish browsers.

But... I strongly advise not to use own cursors unless you have a very good reason. If you thought it'd just be a cool thing to do... well its not. People have used to the standard cursors and I personally can say that if someone has changed the basic cursor for the page to a crosshair for example (that I've seen done way too often) I usually get furious, leave the site and never come back. I'd imagine if a custom cursor would be ever worse.

Whole other thing is if you have a good reason. For exaple if the webpage is a game or some other kind of "application", like a map system or something, changing the cursor to something more suitable is all right. And in fact you should use a different cursor if the function of mouse clicks/drags/whatever actions are different from the usual.

Comment/Reply (w/o sign-up)

Well, you can use the cursors defined in the browser, and if you have some desktop theme, then they will suit.

I personally use the cursor: pointer; on a:hover, and cursro: help; on a:hover over abbreviations and long-winded words, so that people know.

Comment/Reply (w/o sign-up)

I do this too. No matter what I do I always have a CSS class called .fakelink on my stylesheet. It just changes the cursor into pointer.

It's a really handy way to indicate that my clicking this image or whatever expands something or a full sized image is popped out. This is the type of usage that I encourage people to do; if you have elements that appear to be working like something else then make the using look the same, ie. use pointer when an elements acts like a link, although the click would be a call to a javascript function for example.

Help cursor has kind of become a defacto for abbreviation and acronym elements and thus is nice if used. Also it is quite common to underline abbreviations and acronyms with a dashed line. (border-bottom-style: dashed;)

 

 

 

Comment/Reply (w/o sign-up)

I agree, I would hate to have custom cursors on a site, I have my own by default which I like to use.. in addition I also hate the custom ugly scrollbars :S that is why i turned this feature off on opera.

Comment/Reply (w/o sign-up)