Changing the Cursor
Click here for Spanish translationDid you know that you can change the cursor using CSS? Well, you can. It's easy, fun, but make sure you use it sparingly - visitors don't like it when you make it so whenever the cursor travels over the page it shows an hourglass :). You you probably get hundreds of restarts from your site. ;)
I will use a useful example to show you what it does. For example, what if I have a button that says help, and I want a question mark over it. Easy! Add this to your anchor tag.
<A HREF="tutorials_cursor.html" style="cursor: help">Help</a> |
This is what it does: Help. Nifty huh? You can also use embeded style sheets to apply this effect to all of your links. In this example, I will make them all crosshairs.
<STYLE TYPE="text/css">
A {cursor: crosshair;}
</STYLE>
|
Now all of your links on the page will work with it. This is what it does: Link. You could even go as far as to add this to your external style sheet! Here is a list of all of the settings you could have.
There you go, easy huh? Now go have fun, but don't overuse it. :)
Current Comments
59 comments so far (post your own)Not all of the cursor modifications work with mozilla or IE
Posted by Taylor Chase on Tuesday, 05.4.04 @ 02:35am | #42
how do i change the cursor into an image? is it even possible?
Posted by abner on Thursday, 08.5.04 @ 05:18pm | #127
hey! thanks for the tips! really useful for my site!
Posted by Mia (not shown)on Friday, 09.10.04 @ 11:16am | #172
oh, yeah, my website...
Posted by mia (http://www.xanga.com/swt_angel115)on Friday, 09.10.04 @ 11:17am | #173
This is such a great tutorial!!! It really helped me. Thanks a bunch for making this!!!! I really appreciate it!
Posted by Sakura (http://neopets.com/randomfriend.phtml?user=cutie7178)on Saturday, 10.2.04 @ 10:49pm | #185
Thanks!!! you've been a great help. I also have a question, how can I make my own cursor? Or something that moves around the site?
Posted by angela on Tuesday, 10.5.04 @ 04:12am | #187
How can I make, not just links, but change the cursor on my site entirly!
Posted by Matt on Sunday, 11.21.04 @ 10:12pm | #223
To make the cursor change for the entire site, add this:
<STYLE TYPE="text/css">
body {cursor: crosshair;}
</STYLE>
Posted by Brian Zimmer on Monday, 11.22.04 @ 03:18am | #224
Yay, thanks! All of the HTML helps things I checked doesn't have anything to say about cursors...>> Anyways, how do you change it into something different or an image of my own? Please e-mail to tell me.
Posted by catherine on Monday, 12.6.04 @ 10:15pm | #240
To make a custom cursor, just upload the .ani or .cur to a server and paste this attribute somewhere in a tag on your site, the CAPITALS being variables.
style="cursor: url('URL OF CURSOR')"
Helpful site, btw.
Posted by Chris Fargen (http://www.geocities.com/chrisfargen)on Saturday, 01.8.05 @ 05:38am | #262
I have found that using pointer instead of hand seems to be more compatible.
Posted by FBusher on Sunday, 01.9.05 @ 05:29pm | #265
The URL thing doesn't work. i really want a custom image to show up as the cursor... namely a "sword" cursor. if any1 knows where to find a script that does it, email me pls @ webmaster@kohguild.com with subject cursor. Thx.
CJ
Posted by CJ (www.kohguild.com)on Tuesday, 02.22.05 @ 01:05am | #364
how you do images
Posted by aery on Friday, 03.4.05 @ 07:36pm | #379
O.o
That is alot of help but kinda need to put my own custom cursor on my page...
how do I make a cursor with having to download a program...cause im not alloud to.
Heh
Posted by Tabery_kyou on Tuesday, 03.29.05 @ 11:25pm | #427
how do you change the cursor over an java applet
Posted by Need help on Wednesday, 03.30.05 @ 04:19am | #428
Great tutorial! Exactly what I was looking for.
Thanks.
Posted by Tracy on Sunday, 05.8.05 @ 01:40am | #527
it sucked i can make custom cusors like a sword and stuff
Posted by blake on Sunday, 05.15.05 @ 11:10pm | #534
Super /;)
Posted by Sergiu on Saturday, 07.23.05 @ 04:01am | #616
is their any more exiting ones like a sword or one of your imeges etc. please post back!
Posted by ada12m on Saturday, 07.30.05 @ 05:37am | #630
ummm... how do i convert an .ani file to a html file? .ani doesnt work on xanga... i tried to upload it on geocities to use on xanga, but it doesnt work.
Posted by Hugh (http://www.xanga.com/aznsmartiipants)on Wednesday, 08.10.05 @ 03:05pm | #645
Cool, but I was wondering, can anyone come up with the html required to change the wait cursor? So that when the page is loading, it shows a different cursor to the hourglass? Ta muchly.
Posted by Daveage (http://www.myspace.com/daveage)on Saturday, 08.20.05 @ 08:31am | #662
i want my own image for my cursor but i dont have many programs on my computer. is there a site where i can upload it to so that its a .cur?
Posted by Nikki on Saturday, 08.20.05 @ 01:44pm | #663
how do i change my cursor in friendster.com nd where can i get one??...
Posted by gian on Friday, 09.30.05 @ 09:51am | #695
alright it works but where can i get the animated cursor code for CSS.i saw some of the users using sime very cool sursor.Where can i get it?
Posted by dennis (-)on Wednesday, 10.26.05 @ 09:43pm | #707
Hey, Nice site (though it didnt help me personally very much) I make custom myspace layouts and I like to find cursors for them.Well right now I am having trouble with this one,You see I have a great Image I want to use as a cursor but I dont know how to make it where it shows up on my myspace so I need a base code (that works!!!!) so that I can use it thanks!
Just email me if you can help! (email:jellyman009@yahoo.com) Oh and one more thing haters of this site WELL HELLO DONT GET ON IT IF U DONT LIKE IT!
Posted by Nick (www.myspace.com/jellyman2009)on Sunday, 11.13.05 @ 05:53pm | #725
I cant save a pic as a .ani or a .cur
Can i make a cursor if i cant save as one of those?
Posted by Someone on Friday, 11.18.05 @ 09:52am | #729
hi...Good Day...!!!
The URL thing doesn't work. i really want a custom image to show up as the cursor... namely a "sword" cursor. if any1 knows where to find a script that does it, email me pls @ bert_love0019@yahoo.com with subject cursor. Thx.
Posted by bertlove on Sunday, 11.20.05 @ 04:05am | #731
I Love You
Posted by Kier (Pepsi Cursor)on Wednesday, 12.14.05 @ 06:33pm | #748
OMG the people here are n00bs ofcourse you cant save a pic as an ani or cur you have to have a cursor editing prog like axialis ax cursors.
Bah why bother
Posted by J4ckz0rs on Saturday, 12.17.05 @ 01:08am | #751
hey it made my site prettier!!
Posted by Riley on Monday, 12.26.05 @ 12:10am | #758
tenks fow da tips!!!!!!!!!!!!!!
Posted by sydney on Monday, 12.26.05 @ 02:47am | #760
hmm./;. so how would i get a cursor to appear on loading a webpage for others to view? and how can you make them more uniqu etc?
Posted by chris on Monday, 02.20.06 @ 11:04am | #857
Awesome tutorial but some types of cursors are not listed like:
cursor: -moz-grab/;
cursor: -moz-grabbing/;
cursor: url('test.cur'), default/;(for custom cursors)
Posted by Shachi Bista on Thursday, 03.23.06 @ 03:14am | #927
Without the /
Posted by Shachi Bista on Thursday, 03.23.06 @ 09:19am | #928
do you know if this one
cursor: url('test.cur'), default//;(for custom cursors)
works with mozilla?
Posted by pat on Thursday, 04.6.06 @ 11:47am | #961
Yes works with mozilla fine and IE too. I tried it with FF 1.5 Mozilla and Internet Explorer 5+
Posted by Shachi on Tuesday, 04.11.06 @ 09:07am | #970
Hi There
I Just whant to know how do you set the cursor style of a imagebutton that is disabled, to a text cursor, the default is always a hand.
Thanks Elsabe
Posted by Elsabe on Monday, 05.22.06 @ 08:43am | #1073
I want to change the mouse into an image when it is place over some text, how do I do that with html?
Posted by Nol on Sunday, 05.28.06 @ 04:18pm | #1214
This is nice.. But how do I use this on custom cursors..? Just askin'..:)
Posted by Rhie on Wednesday, 07.12.06 @ 06:31am | #2254
does anyone know a site where i can upload my custom cursor so i could use it on myspace?
Posted by Andrea (myspace.com/850sfinest)on Friday, 07.14.06 @ 08:05am | #2259
How do get my cursor which i made on Axialis AX-Curors on my myspace.
Posted by Francesca on Saturday, 09.30.06 @ 01:17pm | #2607
THESE ARE <b>SOOO</b> GOOD! (lol used HTML to get the SOOO like that! anyways, i would like to know how to make one of MY images to be a cursor with a code! can u tell me!
E_MAIL ME!!!!!
Posted by Paige on Saturday, 12.23.06 @ 11:51pm | #2690
how to create my own cursor and how to implement it in a web page?
Posted by vetri (india)on Saturday, 12.30.06 @ 08:07pm | #2697
Im new to the cursor scene. Just made a sweet one using ani-tuner. free trial. anyhow i converted it and i want to display where is the upload site?? are they all dying off?
Posted by j on Monday, 01.1.07 @ 03:06am | #2699
Can't you change the color of the cursor?
Posted by Ray on Monday, 01.1.07 @ 03:00pm | #2701
I've found it to be 101% useful, but for Mozilla browser i had some trouble,
cursor: url('test.cur')/;
would not make the custom cursor appear.
But a post fixed it so if u have problems with mozilla
cursor: url('test.cur'), default/;(in original post has a / but u should remove it)
thats all but still doesnt work on opera 9.10.
Posted by Alex on Wednesday, 01.24.07 @ 02:15am | #2730
Will this code:
<STYLE TYPE="text/css">
body {cursor: url(URL of cursor)
}
</STYLE>
work for Myspace?
Or is there some special one I need? I have been tryin' to get this to work for a looong time.
Email me with any help or suggestions...
Thanks,
Jamie
Posted by Jamie on Saturday, 01.27.07 @ 07:13pm | #2735
Will this code:
<STYLE TYPE="text/css">
body {cursor: url(URL of cursor)
}
</STYLE>
work for Myspace?
Or is there some special one I need? I have been tryin' to get this to work for a looong time.
Email me with any help or suggestions...
Thanks,
Jamie
Posted by Jamie on Saturday, 01.27.07 @ 07:17pm | #2736
~~**hello~~**
Posted by Breaone (www.myspace.com/icebaby166)on Monday, 01.29.07 @ 04:18pm | #2739
I have some problem on adding Cursor style sheet(hand) on Grid View. I am using Mozila Brouser 2 But no problem on IE 6. My code is below..
.SText
{
CURSOR: hand/;
}
<asp:GridView id="GDV" cssclass="SText" >
<column>
<asp:BoundField DataField ="news_information" >
<ItemStyle Width="400px" BorderColor="Silver" BorderWidth="2px" />
</asp:BoundField>
</column>
</asp:GridView>
Posted by Mukesh Doot on Tuesday, 02.6.07 @ 04:10am | #2753
Thanks a lot!
I used it on an image that I didn't want everyone knowing was a link. So now it's covert!
Thanks again.
Posted by jordan (http://www.digitalmemoriesvideography.com)on Friday, 02.9.07 @ 08:08am | #2759
Nice tutorial,
I need to add:
<STYLE TYPE="text/css">
A {cursor: help/;}
</STYLE>
into an external style sheet and make it only show on a link named FAQ.
How would I do this?
Thanks.
Posted by TN (http://pc-uk.110mb.com/index.html)on Wednesday, 02.14.07 @ 04:24pm | #2766
how we will change our cursors,please ghange it in tagalog..............
Posted by patricia bagalawis on Tuesday, 05.22.07 @ 09:41pm | #2892
Hi. I can find lots of help to change the mouse cursor, but how do you change the edit cursor? (The vertical bar that sits and flashes where you last clicked) I need to make it more visible on an A NAME link. Thanks.
Posted by Stef (www.stefcampion.com)on Monday, 10.8.07 @ 05:47am | #3041
exelent
Posted by marko (http://profiles.friendster.com/44900439)on Wednesday, 10.17.07 @ 08:55am | #3049
how can i take the antimated cursor off and put orignal back
Posted by shelia on Friday, 11.9.07 @ 05:26pm | #3073
how do i put cursor in friendster
Posted by santynelle on Tuesday, 12.11.07 @ 08:45am | #3115
CSS "Cascading Style Sheets" LessoNs - WeB DesigN LessoN - - Web site : http://WWW.css-lessons.ucoz.com/index.html
Posted by :-: S€zæR ->> (http://fiberoptic-cable.blogspot.com)on Saturday, 05.3.08 @ 04:38am | #3323
CSS "Cascading Style Sheets" LessoNs - WeB DesigN LessoN - - Web site : http://WWW.css-lessons.ucoz.com/index.html
Posted by :-: S€zæR ->> (http://fiberoptic-cable.blogspot.com)on Saturday, 05.3.08 @ 04:38am | #3324
Rate this Tutorial
Current Rating: