Web Design Tips: Add Your Own Cursor

[jeeten 0]

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)

[Hercco 0]

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.

[twitch 0]

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.

[Hercco 0]

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

[Quatrux 4]

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.

[iGuest 3]

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!

[iGuest 3]

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