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!

Edited December 1, 2005 by miCRoSCoPiC^eaRthLinG (see edit history)

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.

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.

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.

1064333377[/snapback]

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;)

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.

Hi Jeeten,

Will this really work for any website??? Will cursor get changed for the website.....

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!

Hi Rasika,

 

Most browsers now support cursor fully so it should work but in either case, you should always have a fallback method as precaution, as shown in the code below, if none of those cursor images worked, the default of auto will be used.

 

<style type="text/css">a {    cursor: url('path/to/cursor1.png'), url('path/to/cursor2.jpg'), url('path/to/cursor3.gif'), auto;}</style>

Try not to confuse the users with it. They are use to expecting certain cursors.

 

Cheers,

 

MC