CSS, how to use a custom cursor (url)?

Question

Hi ^^

I'm designing my blog on a website, and I would like to use a custom cursor
The cursor is located on this url: http://fc06.deviantart.net/fs71/f/2010/202/4/7/test_2_by_Miguel_Demecheleer.cur

I really tried all kind of codes, but I don't get them in the wright place,
This is the CSS code I used for the blog:


html { min-height: 100%; }html {background-image: url("http://i772.photobucket.com/albums/yy7/miguel-demecheleer/Oekakibackground.gif") !important;background-repeat: repeat;background-attachment: fixed;background-position: center top;}body {background-image: url("http://i772.photobucket.com/albums/yy7/miguel-demecheleer/Oekakibackground.gif") !important;background-repeat: repeat !important;background-attachment: fixed !important;background-position: center top !important;}html body div#adsbottom,body div#adsbottom,#toolbar {}#toolbar a, #toolbar a:visited {}#bar {color: black;background-image: url('http://i772.photobucket.com/albums/yy7/miguel-demecheleer/Header-2.png');border:1px Dotted white;}#bar table {color: black;}#bar td.divider {}#bar #usertitle {color: black;}#bar a.tab, #bar a.tab:link, #bar a.tab:visited {color: black;}#bar a.tab:hover {background-color: brown;}#bar a.tab:focus, #bar a.tab:active {background-color: Brown;}#bar a.stab, #bar a.stab:link, #bar a.stab:visited {background-color: #cccccc;}#options {background: transparent;border: 1px Dotted white;}#options table {color: white;}#options td.divider {}#content {color: white;background-color: #663333;border: 1px Dotted white;}#content .box {background: white !important;color: black;border: 1px Dotted white;}#content .box .label {border-top: 1px Dotted white;border-bottom: 1px Dotted white;background-image: url('http://i772.photobucket.com/albums/yy7/miguel-demecheleer/Header-1.gif');color: black;}#content .box .label .small {color: black;}.alt {}a, a:link, a:visited {color: Black;}.divider {}.tinydivider {}textarea, , select {border: 1px Dotted white;color: white !important;background-image: url('http://i772.photobucket.com/albums/yy7/miguel-demecheleer/Writingbox.png');}input[type="submit"]{border: 1px Dotted white;color: white;background-color: brown;background-image: url('/inc/base/white_grad.png');}input[type="submit"]:hover {border: 1px Dotted white;background-image: url('/inc/base/white_grad.png') !important;}input[type="submit"]:active, input[type="submit"]:focus {border: 1px Dotted white;background-color: white;background-image: url('/inc/base/white_grad.png') !important;}textarea[disabled=""], input[disabled=""]{}select {border: 1px Dotted white;color: white;background-image: url('http://i772.photobucket.com/albums/yy7/miguel-demecheleer/Writingbox.png');border: 1px Dotted white;}.emph, .c-emph {}a.c-button, a.c-button:link, a.c-button:visited {border: 1px Dotted white;color: white;background-color: brown;background-image: url('/inc/base/white_grad.png'); !important}a.c-button:hover {border: 1px Dotted white;background-image: url('/inc/base/white_grad.png') !important;}a.c-button:active, a.c-button:focus {border: 1px Dotted white;background-color: white;background-image: url('/inc/base/white_grad.png') !important;}.c-emph {}


Can someone help me to get the cursor on the blog,
Thanks in advance!

Answer 1

You can't load custom cursors on a website using CSS, you'd need some kind of javascript. Cursor files are local, on the users computer. You can specify cursor styles for a given element, etc. but you can't load cursors from another source, they are controlled by the operating system.

Answer 2

Using custom cursor unless really necessary are not recommended in website design because using badly selected might confuse visitor and are non-consistent with how people perceive images of cursor. Might also not working across different browsers.



I haven't try it yet but some websites describe how to do it and i found it in

http://www.quirksmode.org/css/cursor.html



it used as below



cursor: url("pix/cursor_ppk.gif"), auto;



please note that this one uses GIF images and it says .CUR files only works in IE.



quoted from the website:

--------------------------------------------------------------------

"

Use an image as cursor. This value has a few problems:



1. IE expects a .cur file. I have no idea how to create one, so this test doesn’t work in IE.

2. Firefox requires a second, non-URL value; like cursor: url(pix/cursor_ppk.gif), auto.

3. The size of the image must be 32x32 pixels or lower. This is a (Windows) OS restriction; not a browser restriction.



This test uses the following .gif image:



* The test image shows up garbled in Chrome."

----------------------------------------------------------------------------------



Seems you will going to have to handle different browsers behaviour issue on this.

Answer 3

I HAVE UPDATED THE PIC SO YOU CAN SEE IT CAN YOU HELP MEH PLEASE?

IM GOIN TO TRY TO HELP YU OUT ALSO