Custom Cursor Image? ( 7 Views )

Hey all!

I was wondering whether or not its possible to create a custom cursor image when mousing over certain links or fields of text.

I know that you can change the cursor to a cross-hair, the wait cursor, etc. using CSS, but I haven't come across a method on using a custom image.

Is this possible?

Thx!

(gül, Niger)

Quote:

Originally Posted by Jeff Lange

Oh ok, well in that case, I can understand.

You can still use relative paths on a CD, just put the cursor in the same folder, and use:

Code:

cursor:url(cursor.ico);

or if it's in a subfolder, use

Code:

cursor:url(folder/cursor.ico);

I've never used it, so I'm not sure if .ico will work, it might only accept .cur.

Alright,

It still doesn't seem to want to work for me... I've modified the code to use:

Code:

body{ cursor: url('magglass.cur'), wait; }

Now, according to the W3C site, if the first cursor specified cannot be read/used, it will use the next cursor specified in the list (in this case, wait). But when I load up my page, neither of the two are used.

I'm not sure if the code has to be inline or embedded... as it is now, the stylesheet is external.

I've tried both .ICO and .CUR files. Any other ideas?

Thanks again!

(büþra, Nigeria)

Oh ok, well in that case, I can understand.

You can still use relative paths on a CD, just put the cursor in the same folder, and use:

Code:

cursor:url(cursor.ico);

or if it's in a subfolder, use

Code:

cursor:url(folder/cursor.ico);

I've never used it, so I'm not sure if .ico will work, it might only accept .cur.

(MEHMET , Qatar)

Quote:

Originally Posted by Jeff Lange

Also note that I find them extremely annoying, and if you had one on your site, I'd probably never come back.

Hey Jeff,

I agree 100%! In fact, nothing bothers me more than that...

Actually, this is for a custom application that's being built, so it's a requirement, and not a preference. Don't ask! LOL

PS: Serenity now! :D

(harun, Aruba)

Quote:

Originally Posted by vgarcia

The file path has to be relative to your web server, not your actual file system. Something like "/images/magicon.ico" would work, but not "d:/magicon.ico".

Ahh! I thought it may have been that, but figured it would have worked on the local system as well (for testing purposes).

So this won't work locally at all? The app/site is going to be saved on CD and distributed... Are there any other alternatives?

(James, Paraguay)

Also note that I find them extremely annoying, and if you had one on your site, I'd probably never come back.

(murat, Cocos (Keeling) Islands)

The file path has to be relative to your web server, not your actual file system. Something like "/images/magicon.ico" would work, but not "d:/magicon.ico".

(metehan, Saint Lucia)

Thanks for the resources!

I've tried making my own Icon and .CUR file, and neither seem to work. This is the CSS code I'm using:

Code:

body{ cursor: url('d:/magicon.ico'), wait, help; }

And I created a 32x32 ICO file. Is there something I'm missing?

(eylül, Antarctica)

Quote:

Originally Posted by Ikonified

Are there any special "requirements" needed to make one?

Right. You might want to check out this.

(nurullah, Azerbaijan)

I'm pretty sure you can do icons in most graphics apps.

(sfhadhdfh, Guinea-Bissau)

Thanks for the reply Vinnie! I thought I'd be able to use a custom URL to point to an image, but I wasn't sure... I surely didn't think about the .ICO extension.

An icon image can be done in any graphics application, can it not? Are there any special "requirements" needed to make one?

Thanks again!

(ahmet, Mali)

Yes you can use your own cursor!

Code:

body { cursor: url('/icons/myIcon.cur'); }

Just change the URL to your needed path. You need a .cur file (you may be able to use a .ico file, I'm not sure). I know this works in IE4+ and Netscape 6+ (not sure of Opera or KHTML).

(elif, Iraq)

How do you create a ico or cur file?

(temirhan, Myanmar)

Custom Cursor Image? ( 7 Views )

Related Topics ... (or search in 1.720.883 topics !)