Tony C
Tony C

Reputation: 568

CSS cursor customization

I'm trying to make a CSS code that changes the cursor to a picture file when the cursor is on a webpage. I've seen sites that give you a simple code to do it but they always have ads. Any codes you guys know that can do this?

Upvotes: 1

Views: 4508

Answers (3)

Abhishek Choudhary
Abhishek Choudhary

Reputation: 399

create an HTML element with the cursor image you want and use javascript's onmousemove event to move the cursor.
window.onmousemove= function(e) {cursor.left=e.x;cursor.top=e.y;} //cursor is the HTML element

Upvotes: -1

Radi Cho
Radi Cho

Reputation: 700

CSS:

html{
  cursor: url(URL of pictures)
}

Other Simples:
http://www.html1.freeiz.com/Your_cursor.html
http://jsfiddle.net/wNKcU/5/
http://jsfiddle.net/wNKcU/788/

Upvotes: 3

Nico Burns
Nico Burns

Reputation: 17109

Yes, simply apply the following css code to your body tag (assuming you want effect for whole page):

body {
    cursor: url('URL to image');
}

Further information:
The image file must be 32x32 or smaller
Internet explorer only supports .cur files

Upvotes: 5

Related Questions